Jetpack Oluşturmada Akış Düzeni. Not : Bu makaleler üzerine inşa edilmiştir… | tarafından ABHINAV CHAUHAN | Mayıs, 2022

Jetpack Oluşturmada Akış Düzeni.  Not : Bu makaleler üzerine inşa edilmiştir… |  tarafından ABHINAV CHAUHAN |  Mayıs, 2022

Not: Bu makaleler, Bu makale İşlerin nasıl yürüdüğünü net bir şekilde anlamak için önce onu okumanızı şiddetle tavsiye ederim.

Java salıncak çerçevesine aşina iseniz, muhtemelen bir FlowLayout’un ne olduğunu biliyorsunuzdur, ancak değilse.

Bir FlowLayout, çocuklarını arka arkaya düzenler ve mevcut satır doldurulduğunda yeni bir satır başlatır.

Görünüm dünyasında ConstraintLayout’u kullanarak FlowLayout’a benzer bir davranış elde edebilirsiniz. Akış ancak Compose çerçevesi bir FlowLayout sağlamaz, o yüzden bir tane oluşturalım.

Oluşturma dünyasında özel bir düzen oluşturmak için aramamız gerekiyor Düzen birleştirilebilir. Düzen Oluşturulabilir bir Ölçüm Politikası hangi boyutun şeklinde nasıl söyler ÖlçümSonuç hangi tarafından döndürülür ölçüm() yöntem. için uygulanan bir somut oluşturmamız gerekiyor. Ölçüm Politikası Arayüz ve uygulama ölçüm() yöntem. Ölçü politikasını kapsüllemek için yardımcı fonksiyon oluşturalım.

fun flowLayoutMeasurePolicy() = MeasurePolicy{ measurables,constraints ->
layout(constraints.maxWidth,constraints.maxHeight){
val placeables = measurables.map { measurable ->
measurable.measure(constraints)
}
var yPos = 0
var xPos = 0
var maxY = 0
placeables.forEach { placeable ->
if (xPos + placeable.width >
constraints.maxWidth
) {
xPos = 0
yPos += maxY
maxY = 0
}
placeable.placeRelative(
x = xPos,
y = yPos
)
xPos += placeable.width
if (maxY < placeable.height) {
maxY = placeable.height
}
}
}
}

Akış düzeni

önlem politikasını vermek Düzen Birleştirilebilir ve işimiz bitti

@Composable
fun FlowLayout(
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
){
val measurePolicy = flowLayoutMeasurePolicy()
Layout(measurePolicy = measurePolicy,
content = content,
modifier = modifier )
}

kullanım

FlowLayout{
val images = intArrayOf(
R.drawable.image1,
R.drawable.image2,
R.drawable.images3,
R.drawable.images4,
R.drawable.image5,
R.drawable.images6,
R.drawable.image7,
R.drawable.image9,
R.drawable.image10,
)

for (i in images.indices) {
Image(
painter = painterResource(id = images[i]),
contentDescription = null,
modifier = Modifier
.width(Random.nextInt(50,120).dp)
.height(Random.nextInt(50,120).dp)
.border(width = 1.dp, color = Color.White, shape = CircleShape)
.clip(CircleShape),
contentScale = ContentScale.Crop

)
}

}

Sonuç

Teşekkürler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.