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

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.