Generalidades

Modificador de diseño de Jetpack Compose.Compositor, içerisinde barındırdığı … | Autor: Simge Şengün | Junio ​​de 2021

Redactar, içerisinde barındırdığı Column, Row I Box gibi composable’ları birleştirerek uygulamamıza özel layoutlar oluşturabilmemizi destekliyor. Bu yazımda sizlere layout yapısından ve daha Sonra layout modifier nasıl yazılır, nasıl kullanılır bunlardan bahsedeceğim.

Simge Şengün

Sistema de vista Esky ViewGroupExtiende ederek ve içerisindeki measure I layout fonksiyonlarını realiza ederek, yeni ve özel layoutlar oluşturabiliyorduk. Compose’da layout Combinable’ını kullanarak Yenibier fonksiyon yazmamız Yeterli oluyor!

Compose’da su bir elementin, bir parent elementin bu parent elementinin içerisinde bir konumu vardır: (x, y) pozisyonu ve boyutu (genişlik ve yükseklik). Aynı zamanda bir veyabirden çok elemento hijo içerebilir.

Elementler kendilerini boyutlandırmayı – mutlaka belirtilmesi gereken —constraint’lerle sağlıyor. Elemento de restricción de tela en mínimo ve maksimum boyutlarını belirliyor.

Eğer bir elementinbirden çok child elementi varsa o element,

  • Elementos del niño ella birinin boyutunu ölçerek kendi boyutunu hesaplayabilir.
  • Kendi boyutunu hesapladığında, niño elementlerini kendisine göreceli olarak yerleştirebilir.

Ancak bu konuda dikkat etmemiz gereken bir nokta var. Bir layout elementinin sub elementlerini birer kereden fazla ölçemiyoruz.

Bir diseño eAumentomentinin, elemento infantillerinibirden çok kez ölçtüğünü düşünün. Bu, o niño elementlerin de – eğer varsa – kendi niño elementlerinibirden çok kez ölçmelerine sebep olabilir. Bu nedenle UI bir kez bile oluşsa ortaya bir performans kaybı çıkabilir. 😯

layout Modifier’ını kullanarak bir elementin boyutlandırılmasını ve pozisyonunu manuel olarak kontrol edebiliriz.

fun Modifier.myLayoutModifier(...) = Modifier.layout  measurable, constraints ->
...
)

Layout Modificador’ını kullanarak iki adet lambda parametresi elde ederiz:

  • measurable: ölçülecek ve yerleştirilecek child elementi
  • constraint: elemento secundario en genişliğinin ve yüksekliğinin mínima ve maksimum değerleri

Diyelim ki ekrana bir Texto yerleştirmek istiyoruz, ancak padding değerinin Text’in hemen üzerine kadar değil, primera línea de base’ına kadar olmasını istiyoruz.

Relleno normal
La primera línea de base’ına kadar olduğunda

İlk yapmamız gereken şey, combinable’ımızı ölçmek. Diseño Kuralları’nda öğrendiğimiz üzere, Niño elementleri sadece birer kez ölçebiliriz.

fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout measurable, constraints ->
...

)

Combinable’ı measurable.measure(constraints) ile ölçebiliriz. Bu metodu kullanırken, Yenibir constraints parámetros yazabilir yada constraintsYo soy kullanabiliriz.

Şimdilik Yenibil constraints oluşturmak yerine parámetros constraints Yo kullanalım:

fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout measurable, constraints ->
val placeable = measurable.measure(constraints)
...

)

measure() metodunun sonucu ise artık bir pozisyon verebileceğimiz Placeable Dir.Bu Placeable a nasıl bir pozisyon verebileceğimizi azsonra göreceğiz!

Böylece composable’ımızı ölçmüş olduk. Örneğimizde genişlik değerimiz composable’ımızın ölçülen genişliğine eşit olacak. Yani o kısımda bir şey değiştirmeyeceğiz.

Yüksekliği hesaplamadan önce, placeable ımızın bir first baseline’ı olup olmadığını kontrol etmemiz lazım. Bunun için check () kontrolünü kullanıyoruz.

check () fonksiyonu eğer içerisine yazdığımız condición es falsa ise IllegalStateException ortaya çıkarır.

fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout measurable, constraints ->
val placeable = measurable.measure(constraints)
// First baseline'ı olup olmadığını kontrol ettik
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)

Uxelius firstBaselineToTop yüksekliğinden, la primera línea de base yükseklikliğini çıkartıp, bu değeri ölçtüğümüz yüksekliğin üzerine ekleyerek bulabiliriz.

(baselineToTop – firstBaseline) + placeable.height
fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout measurable, constraints ->
val placeable = measurable.measure(constraints)
// First baseline'ı olup olmadığını kontrol ettik
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseline = placeable[FirstBaseline]
// Top-to-baseline yüksekliğinden ilk baseline yüksekliğini çıkardık
val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
// Bu bulduğumuz yüksekliği, composable'ımızın yüksekliğine ekleyerek, yeni yükseklik değerimizi bulduk
val height = placeable.height + placeableY

)

Composable’ımızın ölçülerini tamamladığımıza göre, boyutunu hesaplayıp onu ekrana yerleştirmemiz gerekiyor.Bunun Ising layout metodunu kullanıyoruz. layoutmetodunu bir inceleyelim:

layout(placeable.width, height) 
// Composable'ımızın yerleştirileceği yer

layout parámetros metodu olarak genişlik ve yükseklik alıyor ve Composable’ımızı ekrana yerleştirmemiz için bize bir lambda sunuyor. Bunun için ise placeable.placeRelative(x, y) metodunu kullanmalıyız.

Eger placeable.placeRelative(x, y) metodunu kullanmazsak Composable’ımız kullanıcıya görünür hale gelmez.

placeRelative bir placeable’ın pozisyonunu, layoutDirection‘a göre, diseño de yani’umuzun yönüne göre, otomatik olarak ayarlar.

layout(placeable.width, height) 
// Composable'ımızın yerleştirildiği yer
placeable.placeRelative(0, placeableY)

Modificador’ımızı tamamladık! 🎉

fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout measurable, constraints ->
val placeable = measurable.measure(constraints)
// İlk baseline'ı olup olmadığını kontrol ettik
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseline = placeable[FirstBaseline]
// Top-to-baseline yüksekliğinden first baseline yüksekliğini çıkardık
val placeableY = firstBaselineToTop.roundToPx()- firstBaseline
// Bu bulduğumuz yüksekliği, composable'ımızın yüksekliğinden çıkararak, yeni yükseklik değerimizi bulduk
val height = placeable.height + placeableY
layout(placeable.width, height)
// Composable'ımızın yerleştirildiği yer
placeable.placeRelative(0, placeableY)


)

Örneğin çok basit bir text düşünelim.

@Composable
fun TextWithPaddingToBaselinePreview()
AppTheme
Text("Merhaba!")

Buna oluşturduğumuz modificador de diseño’ı eklemek oldukça kolay!

@Composable
fun TextWithPaddingToBaselinePreview()
AppTheme
Text("Merhaba!", Modifier.firstBaselineToTop(32.dp))

LEER  Cómo descifrar la contraseña de Wifi en un teléfono móvil sin root | por Ravi-Teja | junio de 2021

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba