Android Jetpack Compose – Collapsing Toolbar

Çıktı:

Collapse İşlemi gerçekleştirebilmemiz için öncelikle tüm sayfa içeriğini bir kapsayıcı içerisine eklememiz gerekmektedir. Bu nedenle ben Column nesnesi oluşturup içerisine LazyColumn oluşturacağım. LazyColumn liste verilerini listelemek için kullanılacak olup, en üstte resim göstermek ve resmin altında liste elemanlarını satır satır listelemek için;

İlk elemana item, liste elemanları için ise items scope’u içerisine değerleri ekleyeceğim.

Column(
   Modifier.fillMaxSize(),
   horizontalAlignment = Alignment.CenterHorizontally,
   verticalArrangement = Arrangement.Center
) {
    //aşağıda yazacağımız kodlar bu aralığa eklenecek.
}

Listemiz içerisinde 100 adet eleman listelenmesini istiyorum bu nedenle kısaca 1..100 arası otomatik sayı oluşturup listeye ekletelim.

val items = (1..100).map{"Eleman $it"}
val lazyListState = rememberLazyListState()

ardından;

var scrolledY = 0f
var previousOffset = 0

Yukarıda belirtiğimiz değişkenler, Collapse işlemi gerçekleştirirken hesaplamaları kaydedebilmemiz için gerekecektir.

LazyColumn(Modifier.fillMaxSize(),lazyListState){
  // aşağıda yazacağımız kodlar bu aralığa yazılacak
}

LazyColumn verileri satır satır listelemek istediğimiz için verilerin dikey formatta listelenebilmesini sağlayacak.

Listenin en üstünde bir resim göstermek istiyoruz. Tek olarak LazyColumn içerisine veri ekleyebilmek için item i kullanacağız.

item { 
                                Image(
                                    painter = painterResource(id = R.drawable.ic_launcher_background),
                                    contentDescription =null,
                                    contentScale = ContentScale.FillWidth,
                                    modifier = Modifier
                                        .graphicsLayer {
                                            scrolledY += lazyListState.firstVisibleItemScrollOffset - previousOffset
                                            translationY = scrolledY * 0.5f
                                            previousOffset =
                                                lazyListState.firstVisibleItemScrollOffset
                                        }
                                        .height(240.dp)
                                        .fillMaxWidth()
                                )
}

Burada bir liste elemanı oluşturduk ve içerisine Image nesnesini dahil ettik, painter ile göstereceğimiz resmi tanımladık. Burada bulunan Modifier graphicsLayer scope’u içerisine yaptığımız tanımlama sayesinde collapse işlemini gerçekleştirmiş oluyoruz.

Resmin hemen altında ise liste elemanlarını göstereceğimiz kodumuzu da dahil edelim;

items(items){
   Text(text = it)
}

İyi çalışmalar dilerim…