Android Jetpack Compose – Accompanist : TabPager kullanımı

Klasik Android XML yapısındaki ViewPager nesnesine Jetpack Compose’da Pager adıyla benzer yapıya sahibiz. Pager Horizontal ve Vertical olmak suretiyle iki farklı şekilde tercih edilebiliyor.

Yine klasik Android XML yapısında TabLayout olarak kullandığımız nesneyi, TabRow ve Tab adlarında Compose yapısı içerisinde görüyoruz.

Çıktı:

Şimdi bu nesneleri nasıl kullanabiliriz bu konuya değinelim. Projemize pager kütüphanesini dahil ederek başlayalım;

implementation "com.google.accompanist:accompanist-pager:0.23.1"

implementation "com.google.accompanist:accompanist-pager-indicators:0.23.1"

pager-indicators library sekmenin seçili durumunda alt kısımda çizgi çıkararak seçimi belirtebilmek için gerekli olacaktır.

fillData adlı compose fonksiyonu üretelim. Bu fonksiyon hangi tab’i seçersek ona göre içerik gösterebilmesi için gerekli olacaktır.

@Composable
fun fillData(tabIndex:Int){
    when (tabIndex){
        0 ->
        Text(text = "Tab 1 content",modifier = Modifier
            .fillMaxSize()
            .background(Color.White))
        1 ->
            Text(text = "Tab 2 content",modifier = Modifier
                .fillMaxSize()
                .background(Color.White))
       2 ->
           Text(text = "Tab 3 content",modifier = Modifier
               .fillMaxSize()
               .background(Color.White))
    }
}

createTabs adlı bir compose fonksiyonu üretelim ve bu fonksiyon sekmeleri oluştursun.

@OptIn(ExperimentalPagerApi::class)
@Composable
fun createTabs(){
// kodlar bu aralığa yazılacak
}

Tıklanılan tab indisini yakalayabilmemiz için state üretelim;

var tabIndex by remember { mutableStateOf(0) }
val scope = rememberCoroutineScope()

Tab başlıklarını tanımlayalım;

val tabTitles = listOf("Tab 1", "Tab 2", "Tab 3")

Bir Column nesnesi üretip içerisine TabRow sınıfı içerisinde tabTitles elemanlarından her birini Tab olarak tanımlayalım;

Column {
        TabRow(selectedTabIndex = tabIndex) {
            tabTitles.forEachIndexed { index, title ->
                Tab(selected = tabIndex == index,
                    onClick = {
                    // ilgili tab'e tıklanınca gerçekleşecek eylem
                    },
                    text = { Text(text = title) })
            }
        }
}

Yazdığımız bu kodu çalıştırdığımızda tab’lerin oluşturulduğunu görebilirsiniz.

var tabTitles ile başlayan satırımızın hemen alt satırına;

val pagerState = rememberPagerState(0)

rememberPagerState içerisindeki 0 değeri, kaçıncı tabin hafızada kalacağını tanımladığımız alanı ifade ediyor. Açık olan tab indisi ile aynı olmasını sağlayacağız.

Tab onClick olayını aşağıdaki şekilde güncelleyelim;

onClick = {
   scope.launch {
      pagerState.animateScrollToPage(index)
   }
},

burada pagerState.animateScrollToPage metodumuz ile tab’e tıklandığında ilgili tab’in swipe edildiği zamanki aynı değer ile güncellenerek aynı içeriğe eş zamanlı erişebilmesini sağlıyoruz.

Eğer tab’in tıklama olayına bu kodları yazmazsak, sadece sağa sola swipe edildiğinde diğer sekmelere geçiş yapar, ama tab’in tıklama durumu olmadığı için tab başlığına tıklanınca hiçbir aksiyon sergilemeyecektir.

tab’e tıklandığında içerik gösterebilmesi için gerekli kodlarımızı yazalım. Column scope’unun bitişinden hemen sonra;

Column {
}

Bu column içerisinde ilgili tab’e ait Indicator tanımlanmasını yapalım.

TabRow(selectedTabIndex = tabIndex, indicator = 
{ tabPositions ->
  TabRowDefaults.Indicator(
     Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
  )
})
{
   //aşağıda yazacağımız kodları bu aralığa yazacağız.
}

Tablerin oluşturulması ve swipe edilmesi zamanında da sekme başlıklarına tıklanınca pagerState’in güncellenmesini sağlayalım;

tabTitles.forEachIndexed { index, title ->
                Tab(selected = tabIndex == index,
                    onClick = {
                        scope.launch {
                            pagerState.animateScrollToPage(index)
                        }
                    },
                    text = { Text(text = title) })
}

TabRow’un scope kapanışından sonra bir alt satıra;

HorizontalPager(count = tabTitles.size, state = pagerState) { tabIndex ->
            fillData(tabIndex)
}

Burada HorizontalPager ile swipe işlemini pagerState nesnesine başlıyoruz böylece sağa sola swipe edilmesi durumunda sekmelere geçiş yapıyor.

İyi çalışmalar dilerim.