Android Jetpack Compose – Listing Item Row
Bu dersimizde Kotlin Jetpack Compose yapısı ile listeleme ve liste elemanına tıklama işleminin nasıl gerçekleştirilebileceğine ilişkin bir örnek çalışma yürüteceğiz.
User adlı bir kotlin data sınıfı üretelim. name ve surname adlı String fieldları üretelim.
data class User(val name:String, val surname:String)MainActivity.kt dosyamızı aşağıdaki şekilde güncelleyelim.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackCompose01Theme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
val liste:List<User> = listOf(
User("şerif","güngör"),
User("kadir","güngör")
)
}
}
}
}
}Burada liste adlı User tipinde bir List ürettik ve “şerif güngör” ile “kadir güngör” değerlerine sahip User nesnelerini listeye dahil ettik.
GetUserDetail adlı bir fonksiyon üretelim ve argüman olarak User tipli List ve Context tipli argüman içersin.
@Composable
fun GetUserDetail(liste:List<User>,context:Context){
}Ürettiğimiz bu fonksiyon gerçekte listeleme yapacağı için ve her satırda birer kolon gösterebilecek bir yapı halinde kullanılmasını istediğim için Liste elemanlarını tek tek döndürebilmek adına forEach döngüsü değil, LazyColumn adlı compose sınıfını kullanacağız. forEach döngüsü burada verilerin tümünü listelemek yerine sadece bir adet veriyi gösteriyor ve geri kalan tüm elemanların yerini boşlukla dolduruyor. Yani bir nevi bug gibi düşünebilirsiniz veri listelemek için döngü önerilmiyor.
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 5.dp)
){
}LazyColumn’ın Modifier özelliğine fillMaxWidth() diyerek kolonun tam sayfa genişliğine yayılmasını sağlamış oluyoruz. ContentPadding ile de vertical ve horizontal olarak padding boşlukları bırakabiliyoruz.
@Composable
fun GetUserDetail(liste:List<User>,context:Context){
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 5.dp)
){
itemsIndexed(liste) {index,item->
Log.d("test",item.name + item.surname)
}
}
}Metodumuzun son hali üzerine itemsIndexed adlı özel metodu ekleyerek, arrayde bulunan her bir index verisini item üzerinden gezebiliyoruz.
Android xml görsel komponentlerinde bulunan CardView nesnesine alternatif olarak Compose’da Box nesnesi üretip kenarlarına border ve shadow ekleyebiliriz.
Box(
modifier =
Modifier
.background(color = Color.White)
.padding(2.dp)
.fillMaxWidth()
.shadow(1.dp, RoundedCornerShape(1.dp))
.clickable(
onClick = {
Toast.makeText(context,item.name,Toast.LENGTH_LONG).show()
}
),
contentAlignment = Alignment.TopStart,
) {
}Box en temelinde modifier ve contentAlignment parametrelerini alıyor. Modifier nesnesi üzerinde background color, padding, filMaxWidth, shadow, clickable gibi metotlar üzerinden argümanları ile değerlerini belirtebiliyoruz. clickable nesnenin tıklanabilir olması, onClick ise tıklanma durumunu temsil eden metot olarak karşımıza çıkıyor. Box scope’u aralığındayken resim ve alt alta ad ve soyad bilgilerini ekleyebilmek için satır ve sütunları oluşturmamız gerekiyor. Bu nedenle öncelikli olarak Row sınıfından bir scope üretelim. Güncel kodumuz şöyle olacak;
Box(
modifier =
Modifier
.background(color = Color.White)
.padding(2.dp)
.fillMaxWidth()
.shadow(1.dp, RoundedCornerShape(1.dp))
.clickable(
onClick = {
Toast.makeText(context,item.name,Toast.LENGTH_LONG).show()
}
),
contentAlignment = Alignment.TopStart,
) {
Row(
Modifier.padding(10.dp)) {
//KODLARI BU ARALIĞA EKLEYECEĞİZ.
}
}
İsteğe bağlı olarak Row sınıfı argümanı olarak Modifier ekleyip padding özelliği tanımladım ve 10dp olarak kenarlardan boşluk bıraktım. Şimdi bu ürettiğimiz satırın içerisine resim ve yazıları ekleyebilmek adına iki ayrı kolon oluşmasını sağlayabilmek için doğrudan Image ve Column adlı nesneleri Row scope’u arasına yazacağız böylece önce sol tarafta resimi göreceğiz. Geri kalan sağ taraftaki tüm boşlukları ise Column yani kolon dolduracak. Bu Column nesneleri alt alta ekleyecek Yazı nesnelerini eklediğimiz durumda.
Row(Modifier.padding(10.dp)) {
Image()
Column()
}Image nesnesinin painter, contentDescription ve modifier adlı argümanları bulunuyor. painter resimi nereden göstereceğimizi temsil ettiğimiz alanımız. Eğer drawable klasöründeki bir resmi çağırmak istiyorsak; painterResource metodu ile bunu çağırabiliriz.
Modifier özelliği ile nesnenin genişlik ve yüksekliğini örneğin 100dp ile sabitleyebiliriz. clip özelliği sayesinde de resimin CornerRadius olması ile kenarlarını oval hale getirebilmekteyiz.
Image(
painter = painterResource(R.drawable.ic_launcher_background),
contentDescription = null,
modifier = Modifier
.width(100.dp)
.height(100.dp)
.clip(RoundedCornerShape(10.dp))
)Column ile de içerisine iki adet ekleyeceğimiz Text nesnesi ile içerisine yazı ekleyebiliriz. Text nesnesi xmlde bulunan TextView nesnemize denk gelmektedir. Text’in text, fontSize, fontWeight gibi özellikleri bulunmaktadır.
Column(
Modifier.padding(5.dp)) {
Text(text = item.name.uppercase(), fontSize = 36.sp,fontWeight = FontWeight.W700)
Text(text = item.surname.uppercase())
}Çalışmamızın son halini aşağıdaki kodda bulabilirsiniz. Keyifli çalışmalar dilerim.
package com.example.jetpackcompose01
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetpackcompose01.Model.User
import com.example.jetpackcompose01.ui.theme.JetpackCompose01Theme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackCompose01Theme {
// A surface container using the 'background' color from the theme
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
//Greeting("Android")
val liste:List<User> = listOf(
User("şerif","güngör"),
User("kadir","güngör")
)
GetUserDetail(liste,applicationContext)
}
}
}
}
}
@Composable
fun GetUserDetail(liste:List<User>,context:Context){
LazyColumn(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 5.dp)
){
itemsIndexed(liste) {index,item->
Box(
modifier =
Modifier
.background(color = Color.White)
.padding(2.dp)
.fillMaxWidth()
.shadow(1.dp, RoundedCornerShape(1.dp))
.clickable(
onClick = {
Toast.makeText(context,item.name,Toast.LENGTH_LONG).show()
}
),
contentAlignment = Alignment.TopStart,
) {
Row(
Modifier.padding(10.dp)) {
Image(
painter = painterResource(R.drawable.ic_launcher_background),
contentDescription = null,
modifier = Modifier
.width(100.dp)
.height(100.dp)
.clip(RoundedCornerShape(10.dp))
)
Column(
Modifier.padding(5.dp)) {
Text(text = item.name.uppercase(), fontSize = 36.sp,fontWeight = FontWeight.W700)
Text(text = item.surname.uppercase())
}
}
}
}
}
}
Son Yorumlar