Android Jetpack Compose – BottomNavigation ile StateManagement kullanımı

Çıktı:

Projemizin build.gradle dosyası içerisinde depentencies bloğuna ilgili paketi dahil edelim;

implementation("androidx.navigation:navigation-compose:2.4.2")

Components adlı bir Kotlin sınıfı oluşturup içerisine Home, Notification ve Message adlı fonksiyonlar oluşturup içerisine Text nesneleri ekleyelim.

@Composable
fun Home(){
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Home")
    }
}

@Composable
fun Message(){
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Message")
    }
}

@Composable
fun Notification(){
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ){
        Text(text = "Notification")
    }
}

Navigation adlı bir Kotlin sınıfı oluşturalım ve içerisine Screens adlı sealed class üretelim. Argüman olarak title, route ve icons içerecek olan bu sınıf içerisinde Home, Notification ve Message adlı fonksiyonları içerecek bu fonksiyonları sayfanın en altında bulunacak olan BottomNavigation nesnesi üzerinde göstereceğiz.

sealed class Screens(val title:String,val route: String,@DrawableRes val icons:Int) {
    object Home:Screens(
        title = "Home",
        route = "home_route",
        icons = R.drawable.ic_baseline_home_24
    )
    object Notification:Screens(
        title = "Notification",
        route = "notification_route",
        icons = R.drawable.ic_baseline_notifications_24
    )
    object Message:Screens(
        title = "Message",
        route = "message_route",
        icons = R.drawable.ic_baseline_message_24
    )
}

object; sealed class argümanında bulunan değerleri sırasıyla ekleyip nesne üretebilmemize sahip olmaktadır. Dolu constructor seviyesinde nesneye değer ataması yapmayla aynı işlevdedir.

NavHostController adlı sınıf hangi NavigationTab’ına tıkladığımızda hangi olaya/fonksiyona route edeceğini tanımladığımız durumların temsil edildiği bir yapıdır. BottomNavHost adlı bir fonksiyon üretip bu olayın kodlarını yazalım.

@Composable
fun BottomNavHost(navHostController: NavHostController){
    NavHost(
        navController = navHostController,
        startDestination = Screens.Home.route
    ){
        composable(route = Screens.Home.route){
            Home()
        }
        composable(route = Screens.Notification.route){
            Notification()
        }
        composable(route = Screens.Message.route){
            Message()
        }
    }
}

NavHost nesnesi üzerinden composable fonksiyonları ile hangi compose fonsiyonları üzerinden view göstereceğimizi belirtebiliyoruz.

BottomNavigation nesnesini oluşturabilmek ve Itemları(BottomNavigationItem) ekleyebilmemiz ve yönlendirebilmemiz için bir metot daha oluşturmamız gerekiyor.

@Composable
fun BottomNavigationScreen(navController: NavController, items:List<Screens>){
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination
    BottomNavigation {
        items.forEach{
            screens ->
            BottomNavigationItem(
                selected = currentDestination?.route == screens.route,
                onClick = {
                          navController.navigate(screens.route){
                              launchSingleTop=true
                              popUpTo(navController.graph.findStartDestination().id){
                                  saveState = true
                              }
                              restoreState = true
                          }
                },
                icon = {
                    Icon(
                        painter = painterResource(id = screens.icons),
                        contentDescription = null
                    )
                },
                label ={Text(text=screens.title)},
                alwaysShowLabel = false,
                selectedContentColor = MaterialTheme.colors.secondary
            )
        }
    }
}

NavigationItem’ları gösterebilmek için döngüden yararlanıyoruz. Burada fonksiyonun en üstünde yazdığımız items:List<Screen> Screens sealed sınıfı içerisinde bulunan objectlerin algılanmasını sağlıyor. Böylece foreach ile tek tek bütün Screens tipli objeleri dönebiliyor ve NavigationItem olarak tanımlayabiliyoruz.

Her BottomNavigationItem; selected, onClick, icon, label, alwaysShowLabel, selectedContentColor değerlerini alabiliyor. label ve selected harici isteğe bağlı olduğunu düşünebiliriz.

selected tıklanınca nereye route edeceğini(hangi view’ı route edeceğini,

onClick tıklanınca gerçekleşecek olan aksiyonu (ki biz burada navController.navigate diyerek ilgili ekrana route etmesi gerektiği komutunu veriyoruz),

icon bu elemanlarda göstermek istediğimiz simgeyi seçebileceğimiz özellik,

label ise elemanda hangi yazıyı/başlığı göstermek istediğimiz özellik,

alwaysShowLabel yazının sürekli gösterilmesi gerektiğinde,

selectedContentColor ise eleman tıklandığında hangi renk gösterilmesi gerektiğini temsil ediyor.

İlgili activity sınıfımız üzerinde Scaffold nesnesi üzerinde BottomNavHost ve BottomNavigationScreen öğelerini tanımlayalım.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val listItems = listOf(
                Screens.Home,
                Screens.Notification,
                Screens.Message
            )
            val navController = rememberNavController()
            JetpackCompose06_BottomNavigationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Scaffold(bottomBar = {
                        BottomNavigationScreen(navController = navController, items = listItems )
                    }) {
                        BottomNavHost(navHostController = navController)
                    }

                }
            }
        }
    }
}

Keyifli çalışmalar dilerim.