Popüler ve kullanıcı deneyimi yüksek olan arayüz elementlerini tasarımda kullanmak müşterilerin dikkatini çekmek için çok önemlidir.
Bu makale, Jetpack Compose ile ekranın alt kısmında kapatılabilir ve açılabilir alan sağlayan Bottom Sheet bileşenini örnekleyecektir.
Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.
Modal BottomSheet örnek uygulama;
WhatsApp, Instagram, Facebook, LinkedIn vb. birçok popüler uygulama Bottom Sheet bileşenini kullanmaktadır. Popüler uygulamaların tercih etme sebebi, bilgileri görüntülemek veya seçenekler listesinden kolay bir seçim yapmak için parmaklarınızın ucunda esnek animasyonlu bir çözüm sağlamasıdır.
Modern Android uygulamalarında BottomSheet iki türe sahiptir.
- Persistent BottomSheet
- Modal BottomSheet
1-Persistent BottomSheet
Persistent BottomSheet’ın alanı, ekranın ana UI bölgesiyle birlikte bulunur. Her ikisini aynı anda görüntülemeye ve bunlarla etkileşim kurmaya izin verir. Örneğini Google Maps’de bakalım.
2-Modal BottomSheet
Modal BottomSheet etkinleştirildiğinde, ekranın ana UI bölgesi transparan siyah renginde oluşur. Modal BottomSheet aktifken, ekranın ana UI bölgesindeki elementlerle etkileşim yapamazsınız. Örneğin, Google Drive (+) ikonuna tıkladığınızda Modal BottomSheet oluşur.
Üstte belirttiğim BottomSheet türlerinden biri olan Modal BottomSheet örnekleyen projemizi kodlayalım.
İlk önce Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçerek proje oluşturun. Ana ekranın background rengini açık mor yapmak için projemin teması olan ModalBottomSheetWithComposeTheme kullandım. Sizin projenizde tema ismini farklı olabilir. ModalBottomSheetWithComposeTheme yerine projenizdeki tema isminiz yazmalısınız.
Modal BottomSheet oluşturan kod bölümü ModalBottomSheet fonksiyonunda bulunmaktadır. Kodlarda detaylı açıklamaları inceleyerek, projenize uygulamanızı tavsiye ederim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.* import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.colorResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.* import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.launch import com.smality.modalbottomsheetwithcompose.ui.theme.ModalBottomSheetWithComposeTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ModalBottomSheetWithComposeTheme { Surface( //Ana ekranın background rengini açık mor yapalım modifier = Modifier.fillMaxSize(), color =Color(0xFFBB86FC) ) { ModalBottomSheet() } } } } } //Ana ekranın tasarımı ve BottomSheet alanını açma işlevi @OptIn(ExperimentalMaterialApi::class) @Composable fun MainScreen(scope: CoroutineScope, state: ModalBottomSheetState) { //Ekranın ana UI bölümüne "Open ..." butonunu ekleyelim Column( Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = colorResource(id = R.color.white), contentColor = colorResource(id = R.color.black) ), onClick = { scope.launch { state.show() } }) { Text(text = "Open Modal Bottom Sheet Layout") } } } @OptIn(ExperimentalMaterialApi::class) @Composable fun ModalBottomSheet() { val context= LocalContext.current //ModalBottomSheetValue hidden ise bu sınıf çağrıldığında ModalBottomSheet görünmeyecektir. val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden) val coroutine = rememberCoroutineScope() ModalBottomSheetLayout( sheetState = sheetState, //ModalBottomSheet alanının köşelerini oval görünmesini sağlıyoruz. sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), modifier = Modifier.padding(0.dp), //BottomSheet alanında gösterilecek UI tasarımını oluşturalım sheetContent = { Box( modifier = Modifier .fillMaxWidth() .height(200.dp), contentAlignment = Alignment.Center ){ Column(modifier = Modifier.padding(10.dp), horizontalAlignment = Alignment.CenterHorizontally ) { Text(text = "Do you want logout ?",fontSize = 25.sp,fontWeight = FontWeight.Bold) Spacer(modifier = Modifier.height(5.dp)) Text(text = "You can login with same mobile number later.",color = Color.Gray) Row(modifier = Modifier.padding(25.dp)) { //Button görünümü ve tıklama event OutlinedButton( onClick = { /*TODO*/ }, modifier = Modifier.padding(end = 32.dp)) { Text("Cancel") } Button(onClick = {Toast.makeText(context, "Logout", Toast.LENGTH_SHORT).show() }) { Text("Logout") } } } } } ) { //Ana ekrandaki button tıklama eventi ile ilişkilendirme MainScreen(coroutine, sheetState) } } |
Proje kodlarına github linkinden ulaşabilirsiniz.