Jetpack Compose’da özel yerleşim tasarımı | tarafından Saurabh Pant | Haz, 2022

Jetpack Compose'da özel yerleşim tasarımı |  tarafından Saurabh Pant |  Haz, 2022

Alışık olmak!

https://dar-al-sabah.com/

Son zamanlarda, basit bir ekran olan ancak bazı eğrileri olan login ekranı için referans olarak bana bir tasarım geçti. Bu yüzden sadece öğrenme amaçlı denemeyi bıraktım. Ekran böyle görünüyordu

Buradaki ilginç şey, iki kabın çapraz olarak hizalanmasıdır. Bu yüzden geliştirmeyi düşündüm. Nasıl yapıldığını görelim.

Öyleyse çapraz olarak ayrılmış iki kabı şu şekilde bölelim: Üye olmak ve Giriş yapmak. Şekillerini tek tek belirleyeceğiz. Genel olarak her iki kap da, çapraz olarak kavisli bir köşe hariç, köşeleri yuvarlatılmış dikdörtgenlerdir. Şimdi böyle bir şekil oluşturmak için her ikisi için ayrı yollar oluşturabilir ve onlara istenen şekli sağlayabiliriz.

biz bir oluşturacağız Kavisli şekil uzayan sınıf Şekil Composable grafik kitaplığından sınıf. adlı bir işlevi geçersiz kılar anahat oluştur konteynerler için özel yolumuzu sağlayacağız.

class CurvedShape(private val type: CurveType) : Shape {
override fun createOutline(
size: Size,
layoutDirection: LayoutDirection,
density: Density
): Outline {
return Outline.Generic(
path =
if (type == CurveType.LTR) ltrCurve(size)
else rtlCurve(size)
)
}
}

için bir numaralandırma oluşturduk Eğri Türü. bu Üye olmak konteyner var LTR (soldan sağa) eğri ve Giriş yapmak konteyner var sağdan sola (sağdan sola) eğri türü. Pekala, şimdi her iki kapsayıcı için de yol işlevlerimizi oluşturuyoruz.

LTR Eğri Yolu

Bu yolda sağ alt köşeyi çapraz olarak sol alt köşeye bağladık. Aşağıda gösterildiği gibi sol üst köşeden başlayarak her bir köşeyi C1,C2,C3 ve C4 olarak adlandıralım.

Şimdi LTR yolu uygulamamızda, önceden tanımlanmış bir yarıçapla kabın sol üst köşesinde C1’de bir yay çizmeye başlıyoruz. Sonra C1’den C2’ye bir çizgi çizeriz. C2’den C3’e bir yay oluştururuz ve C3’ten yayı C4 yayına tasarımımıza uyacak kadar eğimli bir açıyla bağlarız.

Ve bu yolu kendimize dönüyoruz Kavisli şekil anahat oluştur LTR tipi için işlev. Son olarak bu şekli grafik katmanındaki Signup Box’ımıza ayarlıyoruz.

Box(
modifier = modifier
.graphicsLayer {
shape = CurvedShape(CurveType.LTR)
clip = true
}
.background(Color.Cyan)
)

Bu birleştirilebilirliği ana içerikte ayarlamak ve uygulamayı çalıştırmak bize aşağıdaki çıktıyı verecektir.

İstediğimiz kayıt şeklini oluşturduk. Artık içine elemanlar ekleyebiliriz ve hazır.

RTL Eğri Yolu

LTR eğrisi ile aynı şekilde, RTL şeklimizi oluşturabiliriz. Bu durumda, yine gösterildiği gibi dört köşeyi C1, C2, C3 ve C4 olarak ele alacağız.

Burada da C1 yayı oluşturuyoruz ve onu C2’ye ve C2’den C3’e ve son olarak da C4’e birleştiriyoruz.

Ve bu yolu kendimize dönüyoruz Kavisli şekil anahat oluştur RTL türü için işlev. Son olarak bu şekli kendimize ayarlıyoruz. Giriş yapmak Grafik katmanındaki kutu.

Box(
modifier = modifier
.graphicsLayer {
shape = CurvedShape(CurveType.RTL)
clip = true
}
.background(Color.Cyan)
)

Bu birleştirilebilirliği ana içerikte ayarlamak ve uygulamayı çalıştırmak bize aşağıdaki çıktıyı verecektir.

Harika!! Böylece kaplarımız için istediğimiz şekilleri oluşturduk. Ancak asıl zorluk şimdi, köşegenlerin birbiriyle doğru şekilde hizalanacağı şekilde onları ayarlamamız gerektiğinde ortaya çıkıyor. Şimdi bunları bir sütuna ayarlamak, Giriş kapsayıcısını Kayıt kapsayıcısının alt kısmının altına yerleştirecek ve aşağıdaki gibi görüneceklerdir.

Peki bunları gerektiği gibi nasıl ayarlayacağız? Peki! bunun için x ve y koordinatlarını aşağıdaki gibi alan özel bir düzen değiştirici oluşturmamız gerekiyor

@Composable
fun Modifier.placeAt(
x: Int,
y: Int,
) = layout { measurables, constraints ->
val placeable = measurables.measure(constraints)
layout(placeable.width, placeable.height) {
placeable.placeRelative(x,y)
}
}

Şimdi bu değiştiriciyi Signup and Login kapsayıcılarımızda aşağıdaki gibi çağırıyoruz.

Signup kapsayıcısının yüksekliği 600 dp olduğundan, Login kapsayıcısının üstünü 510 dp olarak ayarladık, bu da yaklaşık olarak ihtiyacımıza göre ayarlanır.

kahretsin! Sonunda istediğimiz tasarımı oluşturduk.

kontrol edebilirsiniz github repo ve oynamak için çatallayın.

Kaynak kodu: https://github.com/aqua30/CustomLoginDesign

Şimdilik hepsi bu kadar.

Bir sonrakine kadar…

Şerefe!

Bir cevap yazın

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