Android Jetpack Compose – Scaffold yapısı

Jetpack Compose projeleri oluşturduğumuzda da gördüğümüz Scaffold; TopBar, BottomBar, FAB ve Drawer öğelerini üretebilmek için kullandığımız bir sınıftır.

var shaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Open))

Scaffold(
                        scaffoldState = shaffoldState,
                        topBar = { TopAppBar(title = {Text("TopAppBar")},backgroundColor = Color(0xFF1976D2))  },

) {

}

TopAppBar nesnesi Android’de bildiğimiz ActionBar/Toolbar nesnesinin compose yapısındaki adıdır.

Scaffold(
                        scaffoldState = shaffoldState,
                        bottomBar = { BottomAppBar(Modifier.background(Color(0xFF1976D2))) {
                            Text(text = "sa")
                        }},
) {

                    }

BottomBar nesnesi ise Android’de bildiğimiz BottomNavigationBar nesnesi gibi olduğunu düşünebilirsiniz. Ancak tam manasıyla buna denk gelmemektedir. Çünkü buna karşılık gelen BottomNavigation adlı compose nesnesi de bulunmaktadır.

Scaffold(
                        scaffoldState = shaffoldState,
                        floatingActionButton = {
                            FloatingActionButton(
                                backgroundColor = Color(0xFF1976D2),
                                onClick = {
                                    Toast.makeText(applicationContext,"tıklandı",Toast.LENGTH_LONG).show()
                                }) {
                                Text(text = "saa")
                            }
                        },
) {

}

FloatingActionButton da tamamiyle klasik xml yapısındaki ile aynı. FAB’ın Position’ı da floatingActionButtonPosition metodu ile değiştirilebilmektedir.

Scaffold(
                        scaffoldState = shaffoldState,
                        topBar = { TopAppBar(title = {Text("TopAppBar")},backgroundColor = Color(0xFF1976D2))  },
                        bottomBar = { BottomAppBar(Modifier.background(Color(0xFF1976D2))) {
                            Text(text = "sa")
                        }},
                        floatingActionButton = {
                            FloatingActionButton(
                                backgroundColor = Color(0xFF1976D2),
                                onClick = {
                                Toast.makeText(applicationContext,"tıklandı",Toast.LENGTH_LONG).show()
                            }) {
                                Text(text = "saa")
                            }
                        },
                        floatingActionButtonPosition = FabPosition.End
) {

}

NavigationDrawer nesnesine karşılık gelen drawer yapısı ile drawerContent içerisine yazacağımız nesneler ile navigation drawer öğesinde içerik gösterebilmekteyiz. drawerContent özelliği yazıldığında drawer aynı zamanda üretilmiş olacaktır.

var shaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Open))
                    Scaffold(
                        scaffoldState = shaffoldState,
                        topBar = { TopAppBar(title = {Text("TopAppBar")},backgroundColor = Color(0xFF1976D2))  },
                        bottomBar = { BottomAppBar(Modifier.background(Color(0xFF1976D2))) {
                            Text(text = "sa")
                        }},
                        floatingActionButton = {
                            FloatingActionButton(
                                backgroundColor = Color(0xFF1976D2),
                                onClick = {
                                Toast.makeText(applicationContext,"tıklandı",Toast.LENGTH_LONG).show()
                            }) {
                                Text(text = "saa")
                            }
                        },
                        floatingActionButtonPosition = FabPosition.End,
                        drawerContent = { Text(text = "drawerContent")},
) {

}

BottomBar nesnesinin içerisine BottomNavigation nesnesi eklemek isteyebilirsiniz. Bu işlem için örnek olarak aşağıya kodlarımı dahil ediyorum;

bottomBar = { BottomAppBar(Modifier.background(Color(0xFF1976D2))) {
                            BottomNavigation {
                                BottomNavigationItem(
                                    icon = {
                                        BadgedBox(badge = { Badge { Text("27") } }) {
                                            Icon(
                                                Icons.Filled.Favorite,
                                                contentDescription = "Favorite"
                                            )
                                        }
                                    },
                                    selected = false,
                                    onClick = {})
                            }
                        }},

BottomNavigation nesnesi içine BottomNavigationItem nesneleri dahil edebiliriz. Her item icon içerebilir. Eğer icon içerecekse BadgedBox nesnesi içerisinde compose’da standart halde bulunan iconları tercih edebilirsiniz. Örneğin Icons.Filled.Favorite gibi