Pratik, işlevsel, eğlenceli ve kullanıcı deneyimi yüksek olan mobil tasarımlar projelere çoğu zaman pozitif etki sağlar.
Bu makale Android Compose tasarımında Navigation Drawer oluşturmayı örnekleyen projeyi açıklayacaktır.
Örnek proje;
1-Compose Proje Oluşturma
Compose kullanabilmek için Android Studio Arctic Fox veya üst sürümlerden birini indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.
2-Gerekli Kütüphanelerin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Material3 ve Navigation kütüphanesini yüklüyoruz.
|
1 2 3 |
implementation 'androidx.compose.material3:material3' implementation("androidx.navigation:navigation-runtime-ktx:2.5.3") implementation("androidx.navigation:navigation-compose:2.5.3") |
3- Navigation Drawer Oluşturma
Material 3 kütüphanesiyle birlikte gelen ModalNavigationDrawer yapısını Navigation Drawer oluşturmakta kullanacağız. CreateNavigationDrawer adında oluşturduğum fonksiyon içinde bu süreç başlayacaktır. Kodları yorum etiketleriyle birlikte inceleyelim.
|
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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.foundation.* import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.* import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.* import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.* import androidx.navigation.NavHostController import androidx.navigation.compose.* import kotlinx.coroutines.CoroutineScope import com.smality.navigationdrawercompose.ui.theme.NavigationDrawerComposeTheme import kotlinx.coroutines.launch class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { NavigationDrawerComposeTheme { Surface( modifier = Modifier.fillMaxSize(), ) { CreateNavigationDrawer() } } } } } @OptIn(ExperimentalMaterial3Api::class) @Composable fun CreateNavigationDrawer() { //navigation & in-app routing val navController: NavHostController = rememberNavController() //Navigation drawer için bazı gerekli özellikler val scope = rememberCoroutineScope() val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) //NavigationDrawer Oluşturma ModalNavigationDrawer( drawerState = drawerState, //Item'lara tıklandığında Navigation menünün kapanıp, ilgili içeriği gösteren metod çağırıyoruz drawerContent = { MainDrawerSheet(navController, scope, drawerState) }) { Scaffold (topBar = { MainAppBar { scope.launch { //Navigation drawer açılması için method drawerState.open() } } }) { innerPadding -> ///Navigation drawer da hangi item tıklandıysa ona uygun sayfa tasarımını oluşturma NavHost(navController, Screens.Profile.name) { composable(Screens.Profile.name) { Column (modifier = Modifier.padding(innerPadding)) { Text("My Profile Screen", fontWeight = FontWeight.Bold,modifier = Modifier.padding(30.dp),fontSize = 20.sp) } } composable(Screens.Setting.name) { Column (modifier = Modifier.padding(innerPadding)) { Text("Settings page", fontWeight = FontWeight.Bold,modifier = Modifier.padding(30.dp),fontSize = 20.sp) } } composable(Screens.Logout.name) { Column (modifier = Modifier.padding(innerPadding)) { Text("Logout page", fontWeight = FontWeight.Bold,modifier = Modifier.padding(30.dp),fontSize = 20.sp) } } } } } } //TopAppBar Oluşturma @OptIn(ExperimentalMaterial3Api::class) @Composable fun MainAppBar( modifier: Modifier = Modifier, navigationClick: () -> Unit = {} ) { TopAppBar( title = { Text(color =Color.White,text="Navigation Drawer Title")}, modifier = modifier, navigationIcon = { //Navigation için üç çizgi olan ikonlu button oluşturma IconButton(onClick = navigationClick) { Icon(modifier = Modifier, tint = Color.White, imageVector = Icons.Filled.List, contentDescription = "Navigation menu", ) } }, colors = TopAppBarDefaults.largeTopAppBarColors( containerColor = MaterialTheme.colorScheme.primary), ) } //Drawer üst mavi alandaki tasarımı oluşturma @Composable fun DrawerHeader() { Column(modifier = Modifier .background(brush = Brush.horizontalGradient(listOf(Color(0xFF2672D9), Color(0xff032C45)))) .fillMaxWidth() .padding(20.dp) .height(200.dp), verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.Start) { Image( painter = painterResource(id = R.drawable.tugba), contentDescription = "picture", contentScale = ContentScale.Crop, modifier = Modifier .size(70.dp) .clip(CircleShape) ) Text(color =Color.White, fontSize = 20 .sp, text = "Tuğba Üstündağ", modifier = Modifier.padding(vertical = 20.dp) ) Text(color =Color.White, fontSize = 16 .sp, text = "info@smality.com", modifier = Modifier.padding(vertical = 5.dp) ) } } //Item'lara tıklandığında Navigation menünün kapanıp,ilgili içeriği gösteren metod @OptIn(ExperimentalMaterial3Api::class) @Composable fun MainDrawerSheet( navController: NavHostController, scope: CoroutineScope, drawerState: DrawerState) { ModalDrawerSheet { DrawerHeader() DrawerItem(Icons.Default.Person, "My Profile") { navController.navigate(Screens.Profile.name) scope.launch { drawerState.close() } } DrawerItem(Icons.Default.Settings, "Account settings") { navController.navigate(Screens.Setting.name) scope.launch { drawerState.close() } } DrawerItem(Icons.Default.ExitToApp, "Logout") { navController.navigate(Screens.Logout.name) scope.launch { drawerState.close() } } } } //Drawer item'ların tasarım arayüzlerini tanımlama @Composable fun DrawerItem( icon: ImageVector, text: String, onClick: () -> Unit = {} ) { Row(modifier = Modifier .fillMaxWidth() .clickable { onClick() } .padding(16.dp), verticalAlignment = Alignment.CenterVertically, ){ Icon( imageVector = icon, contentDescription = null, ) Spacer(modifier = Modifier.width(16.dp)) Text(text) } } |
