Tüm mobil cihazların ekran boyutu ve yönü üzerinde iyi görünen, duyarlı tasarımların oluşturulması önemlidir.
Bu makale Compose yapısında mevcut alanın genişlik/yüksekliğini tespit ederek responsive tasarım ile Carousel card oluşturmayı örnekleyecektir.
Yatay/dikey moddayken Carousel efekti ile card oluşturma örneği;
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
Tasarımda Amaçladığımız Özellikler
Bir kere UI kodu yazarak Carousel card oluşturma ve kullanıcı cihazı yatay/dikey konuma ayarladığında;
- Dikey mod (Portrait mode): 2 card tamamen görünür durumda olacak ve kullanıcının kaydırarak (Carousel efekti) daha fazla içeriği görünmesi sağlanacak.
- Yatay mod (Landscape mode): 4 card tamamen görünür durumda olacak ve kullanıcının kaydırarak (Carousel efekti) daha fazla içeriği görünmesi sağlanacak.
BoxWithConstraints ile Yatay/Dikey Mod Kontrolu
BoxWithConstraintsScope, tasarım yapacağımız alanın maxWidth, minWidth, maxHeight ve minHeight değerlerini bize vermektedir. Bu değerleri kontrol ederek cihazın yatay mı yoksa dikey modda mı olduğunu tespit edebiliriz. Böylelikle Compose’da responsive tasarım oluşturmayı da göreceğiz.
|
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 |
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.* import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.* import com.smality.composeresponsivelayouts.ui.theme.ComposeResponsiveLayoutsTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeResponsiveLayoutsTheme { Surface(modifier = Modifier.fillMaxSize()) { val cardData = remember { generateCards() } BoxWithConstraints { AdaptiveLayoutCardList(cardData) } } } } } } //maxWidth ve maxHeight kontrolu ile yatay/dikey moda göre card tanımlama @Composable fun BoxWithConstraintsScope.AdaptiveLayoutCardList(cardData: List<Pair<String, String>>) { LazyRow( horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically, contentPadding = PaddingValues(24.dp) ) { items(cardData) { card -> //landscape mode (Yatay mod) if (maxWidth > maxHeight) { //4 tane card gösterimi val cardWidth = maxWidth / 4 MyCard( title = card.first, subtitle = card.second, height = maxHeight / 3, width = cardWidth - cardWidth * 0.15f ) } else { //portrait mode (dikey mod) val cardWidth = maxWidth / 2 MyCard( title = card.first, subtitle = card.second, height = maxHeight / 4, width = cardWidth - cardWidth * 0.2f ) } } } } //Card oluşturma @Composable fun MyCard( title: String, subtitle: String, height: Dp, width: Dp ) {//width ve height değerleri üstte AdaptiveLayoutCardList fonksiyonundan gelmektedir. Card(modifier = Modifier.height(height).width(width), shape = RoundedCornerShape(12.dp), ) { Column( modifier = Modifier.padding(25.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { //Card view içine başlık ve kategori Text'lerini tanımlıyoruz Text(text = title, fontSize = 30.sp, fontWeight = FontWeight.Bold) Text(text =subtitle, fontSize = 23.sp) } } } //20 elemanlı card içeriğinin belirtildiği dizi oluşturma private fun generateCards(): List<Pair<String, String>> { return MutableList(20) { index -> val cardNumber = index + 1 "Title $cardNumber" to "Subtitle $cardNumber" } } |
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
Kaynaklar
1- https://www.valueof.io/blog/compose-boxwithconstraints-boxwithconstraintsscope
2- https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxWithConstraintsScope
