Etkileşimi yüksek kullanıcı arayüz tasarımları, kullanıcıların dikkatini çekmek ve projenin beğenilmesi konusunda fazlasıyla katkı sağlar.
Bu makale Compose yapısında Expandable list (Genişletilebilir listeleme) oluşturmayı örnekleyecektir.
Dilerseniz Android Compose’da Lazy Layout Kullanımı makalesi ile Compose’da listelemeyi nasıl yapabileceğinizi detaylı inceleyebilirsiniz.
Örnek uygulama görüntüsü;
Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose temellerini atabilirsiniz.
Proje kodlarına github linkinden ulaşabilirsiniz.
Nasıl Expandable List Oluşturulur?
Projenin tüm kodları aşağıdaki MainActivity sınıfında bulunmaktadır. İlk önce LazyColumn ile bir listeleme oluşturduk. Comment etiketlerinden detayları inceleyebilirsiniz. Sonrasında MyTexts fonksiyonunda ise Expandable özelliğini aktif hale getirdim. Peki nasıl?
Expandable özelliğini kullanabilmek için remember‘ı kullandım. Remember, kendisine ilettiğiniz fonksiyondan döndürülen değeri “belleğe alan” bir composable fonksiyondur.
|
1 |
var expanded by remember { mutableStateOf(false) } |
İtem’a tıklama durumunda expanded değişkeninin değerini güncelledim. Son olarak Expanded (genişletme) yapılacak alanda aşağıdaki kodu ekleyerek, expanded değişkenin true ise içeriğin uzunluğu kadar görünür satır alanı oluşturdum.
|
1 |
lines = if (expanded) Int.MAX_VALUE else 1 |
MainActivity sınıfının tüm kodları:
|
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 |
import android.content.res.Configuration 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.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.* import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.smality.expandablelistwithcompose.ui.theme.ExpandableListWithComposeTheme //Listelemede bulunacak yazıları List sınıfına ekleme private val messages: List<MyMessage> = listOf( MyMessage( "Compose ile Harita Kullanımı", "Harita ve konum teknolojileri ile hayatımızdaki birçok probleme çözüm sağlayarak işlerimizi kolaylaştırıyoruz. Bu yüzden yazılım projelerimizde harita kullanımı çok önemlidir.\n \nBu makale, Compose yapısında harita(maps) oluşturmayı ve konum bilgisini kullanmayı örnekleyecektir." ), MyMessage( "Compose ile BottomSheet Kullanımı", "Popüler ve kullanıcı deneyimi yüksek olan arayüz elementlerini tasarımda kullanmak müşterilerin dikkatini çekmek için çok önemlidir.\n" + "\n" + "Bu makale, Jetpack Compose ile ekranın alt kısmında kapatılabilir ve açılabilir alan sağlayan Bottom Sheet bileşenini örnekleyecektir." ), MyMessage( "Kotlin ile Carousel Android App", "Kullanıcı deneyimini arttıran elementler ile etkileşimli kullanıcı arayüz tasarlamak projenin yaşam döngüsü için çok önemlidir."+ "\n\n" + "Bu makale Kotlin dili ile Android Viewpager2 widget’ına Carousel efektini ekleyerek slider yapımını örnekleyecektir." ), MyMessage( "Compose Tasarım Araç ve Özellikleri", "Yazılım geliştirme süreçlerini kolaylaştırmak ve hızlandırmak için birçok araç tavsiye edilmektedir.\n" + "\n" + "Bu makale Android Stduio’da Compose ile tasarım geliştirme aşamasında kolaylık ve hızlılık sağlayan araç ve özellikleri anlatacağım." ), MyMessage( "Play Integrity API ile Güvenlik Önlemleri", "Yazılımlarımızı saldırılara karşı güncel yapılarla güvenliğini sağlamak her daim önemlidir.\n" + "\n" + "Bu makale Google Play Integrity API ile uygulamalarınızı ve oyunlarınızı zararlı saldırılardan korumayı, kötüye kullanımı azaltmayı nasıl sağlayacağımızı açıklayacağım." ), ) class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ExpandableListWithComposeTheme { Column(modifier = Modifier.padding(top = 16.dp)) { MyMessages(messages) } } } } } data class MyMessage(val title: String, val body: String) @Composable fun MyComponent(message: MyMessage) { Row( modifier = Modifier .background(MaterialTheme.colors.background) .padding(8.dp) ) { MyTexts(message) } } //Dikey olarak kayan bir liste üretmek için LazyColumn kullanalım @Composable fun MyMessages(messages: List<MyMessage>) { LazyColumn { items(messages) { message -> //Satır yapısını kullanan fonksiyon MyComponent(message = message) } } } @Composable fun MyTexts(message: MyMessage) { //Expandable yapıya sahip olması için remember API'sını kullanıyoruz var expanded by remember { mutableStateOf(false) } Row( modifier = Modifier.fillMaxSize() ) { Column(modifier = Modifier .clickable { //Her tıklandığında güncel expanded değerinin olumsuz halini expanded değişkenine atadık expanded = !expanded }) { //Başlık alanı için Text elementine görsel özellikler tanımlama MyText( text = message.title, fontWeight = FontWeight.ExtraBold, color = MaterialTheme.colors.primaryVariant, style = MaterialTheme.typography.subtitle1, fontFamily = FontFamily.SansSerif ) //İçerik alanı için Text elementine görsel özellikler tanımlama MyText( text = message.body, color = MaterialTheme.colors.onBackground, style = MaterialTheme.typography.body1, fontWeight = FontWeight.Normal, fontFamily = FontFamily.Monospace, //expanded değişkenin true ise içeriğin uzunluğu kadar görünür satır alanı oluşturur lines = if (expanded) Int.MAX_VALUE else 1 ) Spacer(modifier = Modifier.padding(6.dp)) } } } //Listenen yazıları görüntüleyebilmek için Text elementini tanımlama @Composable fun MyText( text: String, color: Color, fontWeight: FontWeight, style: TextStyle, fontFamily: FontFamily, lines: Int = Int.MAX_VALUE ) { Text( text, color = color, fontWeight = fontWeight, style = style, fontFamily = fontFamily, maxLines = lines ) } @Preview(showSystemUi = true) @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) @Composable fun DefaultPreview() { ExpandableListWithComposeTheme { Column(modifier = Modifier.padding(top = 16.dp)) { MyMessages(messages = messages) } } } |
Proje kodlarına github linkinden ulaşabilirsiniz.
