Yazılım projelerinizi güncel tasarım kodlama yapılarıyla oluşturmak rakiplerinizden önde olmanızı sağlar.
Bu makale Android Jetpack Compose’da listeleme ve grid tasarımlarını sağlayan Lazy Layouts örnekleyerek açıklayacağım.
Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.
Örnek uygulama görüntüsü;
Proje kodlarına github linkinden ulaşabilirsiniz.
Lazy Layouts Nedir?
ListView ve RecyclerView yapıları öğeleri listeleme ve grid vb özellikleri oluşturmayı sağlamaktaydı. Jetpack Compose Lazy Layouts, ListView ve RecyclerView elementlerinin işlevlerini uygulamayı sağlar.
Lazy Layouts, LazyColumn, LazyRow ve LazyGrid adlı 3 yapıdan oluşur. Ben örnekte LazyColumn ve LazyGrid yapılarını kullandım.
LazyColumn Kullanımı
LazyColumn örneğinde, mesaj balonlarının bulunduğu listeleme alanı bulunmaktadır. MessageCard fonksiyonunda bir tane mesaj balonunun nasıl görüleceğini tasarladım. Kolay bir şekilde LazyColumn nasıl kullanıldığını aşağıda kodda görebilirisiniz. Örneğin en can alıcı noktası bu koddur.
|
1 2 3 4 5 6 7 8 9 |
@Composable fun Conversation(messages: List<Message>) { LazyColumn { items(messages) { message -> MessageCard(message) } } } |
Şimdi ise LazyColumn örneğinin tamamını 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 |
import android.content.Intent import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.* import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.smality.lazylayoutswithcompose.ui.theme.JetpackCompose_AppTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { JetpackCompose_AppTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { Conversation(SampleData.conversationSample) } } } } } data class Message(val author: String, val body: String) //Mesajlar için örnek verilerin bulunduğu diziyi oluşturma object SampleData { val conversationSample = listOf( Message( "Tuğba", "Android versiyonları:\n" + "Android Lollipop (API 21)\n" + "Android Marshmallow (API 23)\n" + "Android Nougat (API 24)\n" + "Android Oreo (API 26)\n" + "Android Pie (API 28)\n" + "Android 10 (API 29)\n" + "Android 11 (API 30)\n" + "Android 12 (API 31)\n" ), Message( "Tuğba", "Bence Kotlin piratik ve kullanımı kolay bir dil olduğu için eğlenceli bir yapısı bulunmaktadır" ), Message( "Tuğba", "Jetpack Compose, modern Android UI yapısı sunmaktadır.\n" + "Android'de kullanıcı arayüzü geliştirmeyi basitleştirir ve hızlandırır." + "Daha az kod ile güçlü araçlar sunmaktadır.." ), Message( "Tuğba", "Yakın zamanda bütün yazılımcılar UI yapısını Compose ile yazacak:)" ), Message( "Tuğba", "Artık emülatörü direkt Android Studio içinde çalıştırabilirsiniz...." ), Message( "Tuğba", "Kotlin ile Android Programlama özel dersi verdiğimi biliyor muydunuz?" ), ) } //Mesaj balonu alanının tasarımı @Composable fun MessageCard(msg: Message) { val context = LocalContext.current Row(modifier = Modifier.padding(all = 8.dp)) { Image( painter = painterResource(id = R.drawable.icon), contentDescription = "Contact profile picture", modifier = Modifier .size(50.dp) .clip(CircleShape) //Resime tıklayınca LazyGrid örneğine yönlendirme .clickable { context.startActivity(Intent(context, LazyGrid::class.java)) } ) Spacer(modifier = Modifier.width(8.dp)) Column { //Yazar isiminin alanını oluşturma Text( text = msg.author, color = MaterialTheme.colors.secondary, style = MaterialTheme.typography.subtitle1 ) Spacer(modifier = Modifier.height(4.dp)) //Mesaj içeriğinin alanını oluşturma Surface(shape = MaterialTheme.shapes.medium, elevation = 30.dp) { Text( text = msg.body, style = MaterialTheme.typography.body1, modifier = Modifier .border(1.5.dp, MaterialTheme.colors.onPrimary) .padding(all = 15.dp) ) } } } } //LazyColumn tanımlama @Composable fun Conversation(messages: List<Message>) { LazyColumn { items(messages) { message -> MessageCard(message) } } } //Örnek veriyi kullanarak tasarımı gösterme @Preview @Composable fun preview_rec() { Conversation(SampleData.conversationSample) } @Preview(showBackground = true) @Composable fun DefaultPreview() { MessageCard( msg = Message("Android", "Hey, take a look at Jetpack Compose, it's great!") )} |
Lazy Grids
Xml yapısında kullandığımız GridView elementi ile benzer birişlevi bulunmaktadır. Lazy Grids, LazyVerticalGrid ve LazyHorizontalGrid iki çeşidi bulunmaktadır.
LazyVerticalGrid: Container view’deki içerikleri dikey olarak listeler.
LazyHorizontalGrid: Container view’deki içerikleri yatay olarak listeler.
Örneğimizde profil fotoğrafına tıklayınca LazyGrid sınıfına yönlenmesini sağladım. LazyGrid sınıfında bazı makalelerimin isimlerini LazyVerticalGrid ile yapısı ile gösterilmesini sağladım.
|
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 |
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Text import androidx.compose.ui.* import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.* import com.smality.lazylayoutswithcompose.ui.theme.JetpackCompose_AppTheme class LazyGrid : ComponentActivity() { @OptIn(ExperimentalFoundationApi::class) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { JetpackCompose_AppTheme { val state = rememberLazyListState( initialFirstVisibleItemIndex = 80 ) val colorNamesList = listOf("Jetpack Compose ile OnBoarding Oluşturma","Android Wear Uygulama Geliştirme","TextView'e Reveal Animasyonu Ekleme","Jetpack Compose ile Adım Adım Tasarım","Apk Uygulama İçi Güncelleme", "Android View ile Compose Birlikte Kullanımı", "Jetpack Compose ile Paralaks Efekt Oluşturma", "Insecure Data Storage","Macrobenchmark ile Android App Performans Ölçümü") LazyVerticalGrid( //Grid hücrelerinin kaplıyacağı alanı belirliyoruz cells = GridCells.Adaptive(140.dp), state = state, content = { //Her item'ın listelendiği bölüm itemsIndexed(colorNamesList) { index, item -> //Gri renkdekş kutuları oluşturuyoruz Box( modifier = Modifier .padding(8.dp) .aspectRatio(1f) .clip(RoundedCornerShape(5.dp)) .background(Color.LightGray), contentAlignment = Alignment.Center ) { //Makale başlıklarını her item için Txt elementine aktarıyoruz Text(text = "$item",fontSize = 24.sp,fontWeight = FontWeight.Bold) } } } ) } } } } |
Proje kodlarına github linkinden ulaşabilirsiniz.
