e
sv

Jetpack Compose ile Android uygulamaları için özel düzenler oluşturun

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Düzenler, bir uygulama kullanıcı arayüzünde gördüğümüz düğmeler, metin alanları, resimler ve daha fazlası gibi View nesnelerini barındıran kapsayıcılar olarak tanımlanabilir. Bir uygulama kullanıcı arayüzünde görünümlerin nasıl düzenleneceğini ve görüntüleneceğini tanımlarlar.

Kesikli Çizgi Kutularında Gösterilen Jetpack Oluşturma Tarafından Sağlanan Üç Örnek Düzen Türü: Üç Dikey Görünüm (Sol), Üç Yatay Görünüm (Orta), Biri Solda Düzenlenmiş ve İki Sağda Yığılmış Üç Görünüm (Sağ)

Android'in modern UI araç takımı olan Jetpack Compose, geliştiricilerin kullanması için bazı yaygın düzen türleri sağlar. Ancak, ihtiyaçlarınıza göre özelleştirilmiş düzenler oluşturmak için Jetpack Oluştur'u da kullanabilirsiniz.

Android uygulamaları için özel düzenler ve bunların Jsatisetpack Compose kullanılarak nasıl oluşturulacağı hakkında daha fazla bilgi edelim. Bu makalede:

Özel düzenlerin nasıl oluşturulacağını neden bilmelisiniz?

Jetpack Compose, çeşitli düzen seçenekleri de dahil olmak üzere daha hızlı Android uygulamaları oluşturmak için birçok geliştirici aracı sunar. Bazen bir uygulamanın kullanıcı arayüzünün tasarım gereksinimlerini Jetpack Compose'daki bu mevcut mizanpajları kullanarak uygulayabilirsiniz.

Ancak bu mevcut yerleşimler her zaman proje tasarım gereksinimlerini karşılamamaktadır. Bu gibi durumlarda, projenizin tam gereksinimlerine uygun özel bir yerleşim düzenini nasıl oluşturacağınızı bilmelisiniz.

Jetpack Compose'daki mizanpajlara genel bakış

Jetpack Compose'daki bazı yaygın düzenler şunlardır:

  • Box : görüşlerini diğerinin üzerine yerleştiren bir düzen
  • Column : görünümlerini dikey bir sıraya yerleştiren bir düzen
  • Row : görünümlerini yatay bir sıraya yerleştiren bir düzen
  • ConstraintLayout : görüşlerini diğerlerine göre yerleştiren bir düzen

Son zamanlarda, test edilen ızgara düzenleri olan LazyVerticalGrid ve LazyHorizontalGrid tamamen yayınlandı.

Bu güncellemeyle birlikte LazyLayout adlı heyecan verici yeni bir düzen geldi. Bu, yalnızca o anda ihtiyaç duyulan öğeleri oluşturan ve yerleştiren bir düzendir – başka bir deyişle, belirli bir zamanda bir cihaz ekranında görülebilen öğeler.

Verimli kaydırılabilir düzenler oluşturmak için tembel düzenler kullanabilirsiniz. LazyLayout varyasyonları şunları içerir:

“Tembel” kelimesini çok gördüğünüzü biliyorum ve hayır, bu düzenlerin işlevlerini yerine getirmek istemediği anlamına gelmez (bazılarımız gibi 🙃 ). Bunun yerine, tembel bir düzenin işlevini yalnızca gerektiğinde gerçekleştireceği anlamına gelir. Başka bir deyişle, gerçekten verimli.

Bu verimlilik nedeniyle tembel düzenler, çok sayıda görünüm göstermeyi amaçlayan düzenler için kullanılır ve bunların listeler ve ızgaralar biçiminde kolayca organize edilmesine ve kaydırılabilir olmasına olanak tanır.

Jetpack Compose'da özel bir düzen oluşturma adımları

Kendi düzeninizi oluşturma sürecini etkili bir şekilde anlamanız için basit bir örnek kullanacağım. ReverseFlowRow olarak adlandırmayı sevdiğim bir düzen oluşturacağız.

Bu düzen, görünümlerini yan yana yerleştirir ve mevcut satır dolduğunda bir sonraki satıra geçer. Ancak, görünümlerini ekranın bitiş konumundan başlangıç konumuna – başka bir deyişle sağdan sola – düzenlemeye başlar:

ReverseFlowRow Olarak Adlandırılan Temel Özel Android Uygulama Düzeni, Sağdan Sola Düzenlenen ve Yığılmış, Üçü Üstte, İkisi Altta olmak üzere Beş Etiketli Görünümü Gösteren Birleştirilebilirler

Böyle bir düzen, Jetpack AlertDialog düğmelerinin Material Design yönergelerini karşılaması için kullanılması gerektiğini düşünüyorum.

Şu anda benzer bir düzen kullanılmaktadır, ancak ekranın başlangıç konumundan bitiş konumuna kadar gider ve bu yönergeleri karşılamaz. Dosyaladığım sorunu IssueTracker ile bulabilirsin .

Android uygulamaları için Jetpack Oluşturma düzenlerinin arkasındaki teori

Görünümleri ekranda görüntülemek için Jetpack Compose, (görünümleri temsil eden) UI düğüm ağacını oluşturur, her bir görünümü UI ağacında düzenler ve her birini ekrana çizer.

Bu makalenin amaçları doğrultusunda, bu işlem sırasında özel bir düzen oluşturmayı işleyebileceğimiz için yalnızca görünümlerin yerleşimi ile ilgileniyoruz. Görünümleri bir düzen içinde yerleştirme işlemi üç adımda gerçekleşir:

  1. Düzendeki tüm görünümleri ölçmek (yani çocuklar)
  2. Düzenin hangi boyutta olması gerektiğine karar vermek
  3. Çocukları düzenin sınırları içine yerleştirme

Layout oluşturulabilir'i kullanma

Jetpack Compose'da, mizanpaj görünümleri, şu şekilde tanımlanan Layout oluşturulabilir kullanılarak elde edilebilir:

 @Composable satır içi eğlence Düzeni(
    içerik: @Composable @UiComposable () -> Birim,
    değiştirici: Değiştirici = Değiştirici,
    MeasurePolicy: MeasurePolicy
)

content parametresi, bu düzende olmak istediğiniz görünümü veya görünümleri ( Composable s olarak anılır) belirtir. modifier parametresi, düzende üst görünümden veya oluşturulabilirden geçirilebilecek bazı değişiklikleri tanımlamak için kullanılır.

Yukarıdaki kodun en önemli kısmı, alt görünümlerin ölçümünü, yerleşimin boyutunu ve alt görünümlerin yerleşime yerleştirilmesini tanımlayan MeasurePolicy .

Böylece ReverseFlowRow şu şekilde başlayacak:

 @Birleştirilebilir
eğlenceli ReverseFlowRow(
    içerik: @Composable () -> Birim
) = Düzen(içerik) { ölçülebilirler, kısıtlamalar ->
    // çocukları ölçmek, düzen boyutlandırmak ve çocukları yerleştirmek burada gerçekleşir.
}

MeasurePolicy bir lambda olarak temsil ettiğimizi fark edebilirsiniz. Bu, MeasurePolicyişlevsel bir arabirim olması nedeniyle mümkündür.

Ayrıca yukarıdaki kodda, measurables , ölçülmesi gereken çocukların listesidir, constraints ise ebeveynden gelen yerleşim sınırlarıdır.

Özel düzendeki tüm görünümleri ölçme

Her çocuğu, her biri için measure(constraints) çağırarak kısıtlamalarla ölçeriz. Bu, üst düzeni tarafından konumlandırılabilen bir alt düzene karşılık gelen bir Placeable döndürür.

 val placeables = measurables.map { ölçülebilir ->
    // Her çocuğu ölçün.
    ölçülebilir. ölçü(kısıtlamalar)
}

Her çocuğu ölçerken ebeveynin kısıtlamalarını kullandığımızı unutmayın. Bu, her çocuğun mümkünse ebeveyndeki tüm alanı kullanabilmesini sağlar.

Özel düzene boyut kısıtlamaları ekleme

Ardından, layout() yöntemini çağırarak ve en azından genişliğini ve yüksekliğini belirterek layoutun boyutunu tanımlarız.

 layout(constraints.maxWidth, kısıtlamalar.maxHeight) {
   // Çocukların yerleştirilmesi burada gerçekleşir.
}

Burada ebeveyn kısıtlamasının maksimum genişliğini ve yüksekliğini kullandık. Bu nedenle, ebeveyn kısıtlamalarına bağlı olarak, bu düzen tüm ekranı kaplayabilir veya almayabilir.

Görünümleri düzen içine yerleştirme

Son olarak, Placeable placeRelative() yöntemini çağırarak, Yerleştirilebilir öğeler olarak da adlandırılan ölçülen çocukları mizanpaja yerleştiririz.

Cihazın yerleşim yönü değiştiğinde – başka bir deyişle, soldan sağa ve sağdan sola veya tam tersi olduğunda – yerleşiminizi otomatik olarak yansıtmak istiyorsanız bu yöntem kullanılmalıdır.

Geçerli LayoutDirection layout() alıcısından alabileceğinizi unutmayın. Bu, bir düzen yönü değiştiğinde düzeninizi otomatik olarak yansıtmak istemiyorsanız, bunun yerine görünümlerinizi her bir düzen yönüne nasıl yerleştirmek istediğinize karar verirseniz yararlı olabilir.

Düzeninizin, düzen yönüne göre otomatik olarak yansıtılmasını istemiyorsanız, bunun yerine place() yöntemini kullanın.

 // Çocukları yerleştirdiğimiz x ve y koordinatlarını takip edin.
var yPosition = 0
var xPosition = kısıtlamalar.maxWidth

// Çocukları üst düzene yerleştirin.
placeables.forEach { yerleştirilebilir ->
    if (placeable.width < xPosition) {
        // Mevcut satırda bir sonraki çocuğu eklemek için hala yeterli alan var.
        xPosition -= yerleştirilebilir.genişlik
    } başka {
        // Geçerli satırda bırakılan boşluk çocuk için yeterli değil. 
        // Bir sonraki satıra geç.
        yPosition += yerleştirilebilir.yükseklik
        xPosition = kısıtlamalar.maxWidth - yerleştirilebilir.genişlik
    }
    // Çocuğu ekrana konumlandırın.
    placeable.placeRelative(xPosition, yPosition)
}

Gördüğünüz gibi, her çocuk için bir yerleşimin nereden başlayacağını belirtmek için kullanılan x ve y koordinatlarını takip etmemiz gerekiyor. Bu, bir çocuğu diğerinin yanına yerleştirmemizi ve bir sonraki satıra veya sıraya ne zaman geçeceğimizi bilmemizi sağlayacaktır.

Son Jetpack Özel Android uygulama düzeni için proje kodu oluşturun

Tam düzenimiz şöyle görünecek:

 @Birleştirilebilir
eğlenceli ReverseFlowRow(
    mainAxisSpacing: Dp,
    crossAxisSpacing: Dp,
    içerik: @Composable () -> Birim
) = Düzen(içerik) { ölçülebilirler, kısıtlamalar ->
    // 1. Ölçüm aşaması.
    val placeables = measurables.map { ölçülebilir ->
        ölçülebilir. ölçü(kısıtlamalar)
    }

    // 2. Boyutlandırma aşaması.
    layout(constraints.maxWidth, kısıtlamalar.maxHeight) {
        // 3. Yerleştirme aşaması.
        var yPosition = 0
        var xPosition = kısıtlamalar.maxWidth

        placeables.forEach { yerleştirilebilir ->
            if (placeable.width < (xPosition + mainAxisSpacing.roundToPx())) {
                xPosition -= (placeable.width + mainAxisSpacing.roundToPx())
            } başka {
                yPosition += (placeable.height + crossAxisSpacing.roundToPx())
                xPosition = kısıtlamalar.maxWidth - placeable.width - mainAxisSpacing.roundToPx()
            }
            placeable.placeRelative(xPosition, yPosition)
        }
    }
}

İki yeni özellik eklediğimi fark ettiniz mi: mainAxisSpacing ve crossAxisSpacing ? Bunlar, sırasıyla yatay ve dikey yönlerde mizanpajdaki her çocuk arasına boşluk eklemek için kullanılır.

Özel düzenimizi test etme

Düzenimizi önizlemek için, onu @Preview ile açıklamalı bir şekillendirilebilir işlev içine sarabiliriz. Bu, bir Android uygulaması için gereken ekstra yapılandırma olmadan bir düzen örneğini çalıştırmamızı sağlar. Ayrıca, onları nasıl görüntülediğini görmek için mizanpajımıza bazı metin görünümleri/birleştirilebilirler ekleyelim:

 @Ön izleme
@Birleştirilebilir
eğlenceli ReverseFlowRowPreview() {
    ReverseFlowRow(mainAxisSpacing = 16.dp, crossAxisSpacing = 16.dp) {
        Text("First", fontSize = 20.sp, style = TextStyle(background = Color.Red))
        Text("İkinci", fontSize = 20.sp, style = TextStyle(background = Color.LightGray))
        Text("Üçüncü", fontSize = 20.sp, style = TextStyle(background = Color.Blue))
        Text("Dördüncü", fontSize = 20.sp, style = TextStyle(background = Color.Green))
        Text("Beşinci", fontSize = 20.sp, style = TextStyle(background = Color.Gray))
        Text("Altıncı", fontSize = 20.sp, style = TextStyle(background = Color.Yellow))
        Text("Yedinci", fontSize = 20.sp, style = TextStyle(background = Color.Cyan))
        Text("Sekiz", fontSize = 20.sp, style = TextStyle(background = Color.Magenta))
        Text("Dokuzuncu", fontSize = 20.sp, style = TextStyle(background = Color.DarkGray))
    }
}

Önizlemeyi çalıştırmak aşağıdakileri sağlar:

Dokuz Renkli Metin Görünümüyle Doldurulmuş Özel ReverseFlowRow Android Uygulama Düzeni

Bu örnekte metin görünümleri/birleştirilebilirler kullanmış olsak da, bu özel Jetpack Oluşturma düzeni, diğer Jetpack Oluşturma öğeleriyle de çalışacaktır. Ayrıca, kendi özel düzeninizi oluşturmak için bu eğitimde ele aldığımız kavramları kullanabilir ve adımları takip edebilirsiniz.

Çözüm

Bu hemen hemen kendi düzeninizi oluşturmanın gerektirdiği şeydir. Bu örnek, AlertDialog düğmeleri için gereken düzen gibi normal bir vaka senaryosunu ele almaktadır, ancak çocukların farklı boyutlarda olduğu bir durum gibi daha fazla vaka senaryosuna hitap edecek şekilde geliştirilebilir.

Oluşturduğumuz ReverseFlowRow düzenini farklı boyutlardaki çocuklarla olduğu gibi kullanırsanız, aralarında bir miktar örtüşme olacaktır. Böyle bir duruma uyum sağlamak için bazı ek kodlar gereklidir. Bu mini zorluğun üstesinden gelmek istiyorsanız, güncellenmiş kodu aşağıdaki yorumlara gönderin!

Çözümlerinizi görmek beni heyecanlandırıyor. Bu arada, Android uygulama geliştirme becerilerinizi geliştirmek için tema oluşturma gibi Jetpack Oluşturma konuları hakkında daha fazla bilgi edinebilirsiniz.

LogRocket Blog'da ilk olarak Jetpack Compose ile Android uygulamaları için özel düzenler oluşturun yazısı çıktı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Jetpack Compose ile Android uygulamaları için özel düzenler oluşturun