Yenilemek için aşağı çekin.

Yenilemek için kaydırma bileşeni, kullanıcıların verileri yenilemek için uygulama içeriğinin başından aşağı doğru sürüklemesine olanak tanır.

API yüzeyi

Kaydırılabilir içeriğiniz için kapsayıcı görevi gören yenilemek için kaydırma özelliğini uygulamak üzere PullToRefreshBox composable'ı kullanın. Aşağıdaki anahtar parametreler, yenileme davranışını ve görünümünü kontrol eder:

  • isRefreshing: Yenileme işleminin devam edip etmediğini belirten bir Boole değeri.
  • onRefresh: Kullanıcı yenileme işlemi başlattığında yürütülen bir lambda işlevi.
  • indicator: Sistemin yenilemek için kaydırma işleminde çizdiği göstergeyi özelleştirir.

Temel örnek

Bu snippet, PullToRefreshBox öğesinin temel kullanımını gösterir:

@Composable
fun PullToRefreshBasicSample(
    items: List<String>,
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier
) {
    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
        modifier = modifier
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(items) {
                ListItem({ Text(text = it) })
            }
        }
    }
}

Kodla ilgili önemli noktalar

  • PullToRefreshBox, dize listesi gösteren bir LazyColumn sarmalar.
  • PullToRefreshBox için isRefreshing ve onRefresh parametreleri gerekir.
  • PullToRefreshBox bloğundaki içerik, kaydırılabilir içeriği temsil eder.

Sonuç

Bu videoda, önceki koddan temel yenilemek için kaydırma uygulaması gösterilmektedir:

Şekil 1. Öğe listesinde temel bir yenilemek için kaydırma uygulaması.

Gelişmiş örnek: Gösterge rengini özelleştirme

@Composable
fun PullToRefreshCustomStyleSample(
    items: List<String>,
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier
) {
    val state = rememberPullToRefreshState()

    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
        modifier = modifier,
        state = state,
        indicator = {
            Indicator(
                modifier = Modifier.align(Alignment.TopCenter),
                isRefreshing = isRefreshing,
                containerColor = MaterialTheme.colorScheme.primaryContainer,
                color = MaterialTheme.colorScheme.onPrimaryContainer,
                state = state
            )
        },
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(items) {
                ListItem({ Text(text = it) })
            }
        }
    }
}

Kodla ilgili önemli noktalar

  • Gösterge rengi, indicator parametresindeki containerColor ve color özellikleri aracılığıyla özelleştirilir.
  • rememberPullToRefreshState(), yenileme işleminin durumunu yönetir. Bu durumu indicator parametresiyle birlikte kullanırsınız.

Sonuç

Bu videoda, renkli bir göstergeyle yenilemek için kaydırma uygulamasının nasıl çalıştığı gösterilmektedir:

Şekil 2. Özel stile sahip, yenilemek için kaydırma uygulaması.

Gelişmiş örnek: Tamamen özelleştirilmiş bir gösterge oluşturma

Mevcut bileşenlerden ve animasyonlardan yararlanarak karmaşık özel göstergeler oluşturabilirsiniz.Bu snippet'te, yenilemek için kaydırma uygulamanızda tamamen özel bir göstergenin nasıl oluşturulacağı gösterilmektedir:

@Composable
fun PullToRefreshCustomIndicatorSample(
    items: List<String>,
    isRefreshing: Boolean,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier
) {
    val state = rememberPullToRefreshState()

    PullToRefreshBox(
        isRefreshing = isRefreshing,
        onRefresh = onRefresh,
        modifier = modifier,
        state = state,
        indicator = {
            MyCustomIndicator(
                state = state,
                isRefreshing = isRefreshing,
                modifier = Modifier.align(Alignment.TopCenter)
            )
        }
    ) {
        LazyColumn(Modifier.fillMaxSize()) {
            items(items) {
                ListItem({ Text(text = it) })
            }
        }
    }
}

// ...
@Composable
fun MyCustomIndicator(
    state: PullToRefreshState,
    isRefreshing: Boolean,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier.pullToRefresh(
            state = state,
            isRefreshing = isRefreshing,
            threshold = PositionalThreshold,
            onRefresh = {

            }
        ),
        contentAlignment = Alignment.Center
    ) {
        Crossfade(
            targetState = isRefreshing,
            animationSpec = tween(durationMillis = CROSSFADE_DURATION_MILLIS),
            modifier = Modifier.align(Alignment.Center)
        ) { refreshing ->
            if (refreshing) {
                CircularProgressIndicator(Modifier.size(SPINNER_SIZE))
            } else {
                val distanceFraction = { state.distanceFraction.coerceIn(0f, 1f) }
                Icon(
                    painter = rememberVectorPainter(AppIcons.CloudDownload),
                    contentDescription = "Refresh",
                    modifier = Modifier
                        .size(18.dp)
                        .graphicsLayer {
                            val progress = distanceFraction()
                            this.alpha = progress
                            this.scaleX = progress
                            this.scaleY = progress
                        }
                )
            }
        }
    }
}

Kodla ilgili önemli noktalar

  • Önceki snippet, kitaplık tarafından sağlanan Indicator öğesini kullanıyordu. Bu snippet, MyCustomIndicator adlı özel bir composable gösterge oluşturur. Bu composable'da pullToRefreshIndicator değiştiricisi, konumlandırmayı ve yenilemeyi tetiklemeyi yönetir.
  • Önceki snippet'te olduğu gibi, örnekte PullToRefreshState örneği ayıklanır. Böylece aynı örneği hem PullToRefreshBox hem de pullToRefreshModifier'ye iletebilirsiniz.
  • Örnekte, PullToRefreshDefaults sınıfındaki kapsayıcı rengi ve konum eşiği kullanılmıştır. Bu sayede, yalnızca ilgilendiğiniz öğeleri özelleştirirken Material kitaplığındaki varsayılan davranışı ve stili yeniden kullanabilirsiniz.
  • MyCustomIndicator, bulut simgesi ile CircularProgressIndicator arasında geçiş yapmak için Crossfade kullanır. Kullanıcı aşağı çektiğinde bulut simgesi büyür ve yenileme işlemi başladığında CircularProgressIndicator simgesine dönüşür.
    • targetState, hangi durumun (bulut simgesi veya dairesel ilerleme durumu göstergesi) gösterileceğini belirlemek için isRefreshing kullanır.
    • animationSpec, geçiş için CROSSFADE_DURATION_MILLIS süreli bir tween animasyonu tanımlar.
    • state.distanceFraction, kullanıcının ne kadar aşağı çektiğini gösterir. 0f (çekme yok) ile 1f (tamamen çekilmiş) arasında değişir.
    • graphicsLayer değiştiricisi, ölçeği ve şeffaflığı değiştirir.

Sonuç

Bu videoda, önceki kodda yer alan özel gösterge gösterilmektedir:

Şekil 3. Özel gösterge içeren, yenilemek için kaydırma uygulaması.

Ek kaynaklar