Jetpack Compose ConstraintLayout Kullanımı

Merhaba, bu yazımızda Jetpack Compose içinde ConstraintLayout kullanımından bahsedeceğiz. Kısaca tanımından bahsedecek olursak;

ConstraintLayout içerisinde bulunan compose elementleri birbirlerine göre hizalamamıza izin veren bir düzendir. Aslında kendisi birden çok iç içe kullanılan Row, Column, Box gibi düzen layoutlarının bir alternatifidir. ConstraintLayout aslında normal hizalamalardan ziyade daha karmaşık hizalama gereksinimleri olan tasarımlar için kullanışlıdır.

Aşağıdaki durumlarda ConstraintLayout kullanmayı düşünebilirsin:

1. Geliştirdiğin kodun okunabilirliğini arttırmak istiyorsan ve kod düzeninde Row ve Column’ ın iç içe geçmesini önlemek istemiyorsan.
2. Compose elementleri diğer compose elementlere göre hizalamak istiyorsan veya Compose elementi bir guideline’ a, barrier’ e ya da chain’ e göre pozisyonlandırmak istiyorsan.

Dipnot: ConstraintLayout büyük ve karmaşık yapılarda android tarafından önerilen yöntemdir. Çünkü düz görünüm hiyerarşisi performans olarak karmaşık iç içe görünüm hiyerarşisinden daha iyidir.

Kullanımı

Öncelikle ConstraintLayout kütüphanesini projemize eklememiz gerekmektedir. build.gradle dosyası içine aşağıdaki kütüphaneyi ekleyin:

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

Eğer xml ile constraint layout kullandıysan hatırlarsın ki constraint layout içinde koyduğumuz her bir viewi hizalarken, diğer viewlerin id sine göre hizalıyorduk. Compose da ise aynı mantık hizalama yapmak için her bir viewe bir referans id oluşturmamız gerekmektedir.

Yukarıdaki örnekte bir ConstraintLayout içinde Button ve Text viewleri ekledik. Ayrıca button ve text adında iki referans oluşturduk. Button’ ı ConstraintLayout’ ın üstüne sabitleyerek üstten 16 dp boşluk verdik. Ardından Text i Button’ ın altına sabitledik ve ona da üstten 16 dp boşluk verdik.

Yukarıdaki kodun çıktısı.

Decoupled API

Bazı durumlarda cihazınızın yatay ve dikey pozisyonları için ayrı hizalamalar yapmanız gerekebilir. Bu tarz ayarlamalar için Decoupled constraint’ ler kullanabilirsin. Bunu yaparken iki farklı yöntem kullanmamız gerekmektedir:

1. ConstraintSet parametresini kullanarak ConstraintLayout compose’ una direkt atama yapmak.
2. Hizalama yapacağınız viewlere layoutId vererek erişmek.

Yukarıda göreceğin şekilde bu sefer hizalama değerlerini direkt ConstraintLayout içindeki viewlere vermedik de sadece layoutId tanımladık. Ardından ConstraintSet methodu oluşturarak içindeki hizalamaları ConstraintLayout a tanımladık. Burada createRefFor methodu sayesinde id ile ConstraintLayout içindeki viewi seçerek hizalama yaptık.

ConstraintLayout Kavramları

Guideline, barrier ve chain kavramları ConstraintLayout’ ta hizalamamıza yardımcı olan kavramlardır. Ne işe yaradıklarına yakından bakalım;

Guideline

Guideline’ lar görünümleri hizalarken yardımcı olan ufak kılavuz çizgileridir. Eklediğiniz viewleri bu guideline a bağlayarak ConstraintLayout içinde hizalama yapabilirsiniz. Guideline’ ları parent ConstraintLayout içinde iki farklı şekilde yerleştiririz; yatay ve dikey. Yatay guideline için top ve bottom, dikey guideline için start ve end yaklaşımı kullanırız.

Örneğin: Üstten yatay bir guideline oluşturmak istediğimizde ya dp ile üstten mesafe vereceğiz ya da yüzde ile üstten hizalayacağız.

Barriers

Barrier ise viewleri birbirine yaslamaya yarayan bir hizalama yöntemidir. Birbirine yaslanan viewlerden birisinin visibilitysi gone olursa diğer view onun olduğu tarafa doğru kayar.

val topBarrier = createTopBarrier(button, text)

Yukarıdaki şekilde barrier oluşturabiliriz. Ayrıca sağa sola ya da aşağı yaslayabilmek için de createBottomBarrier(), createStartBarrier(), createEndBarrier() kullanabiliriz.

Barrier Modifier.constrainAs() bloğu içine tanımlanarak kullanılabilir.

Chains

Chainler tek bir eksende (yatay veya dikey olarak) grup benzeri davranışlar sağlarlar. Diğer eksenler bağımsız olarak sınıflandırılabilir. Chain oluşturmak createVerticalChain ya da createHorizontalChain kullanılır.

val verticalChain = createVerticalChain(button, text, chainStyle = ChainStyle.Spread)
val horizontalChain = createHorizontalChain(button, text)

Chains Modifier.constrainAs() bloğu içine tanımlanarak kullanılabilir.

Bir Chain farklı ChainStyles ile yapılandırılabilir. Bu da chaine bağladığımız viewlerin etrafındaki boşlukları nasıl düzenleyeceğimize yardımcı olur;

• ChainStyle.Spread: Boşluk ilk ve son viewın başı ve sonu dahil bütün viewler arasında eşit bir biçimde dağılır.
• ChainStyle.SpreadInside: Boşluk ilk ve son viewin başı ve sonu hariç bütün viewler arasında eşit dağılır.
• ChainStyle.Packed: Boşluk ilk viewden önce ve son viewden sonra eşit bir şekilde dağılır. Bütün viewler birleşik şekilde ortada bulunur.

ConstraintLayout ilk kullanımlarda ne kadar karmaşık gelse de kullandıkça oldukça pratik olduğunu fark edebilirsin. Okunabilirliği arttırmak için viewlere id vermek daha kullanışlı olabilir.

Buraya kadar okuduğun için teşekkür ederim. Bir sonraki yazıda görüşmek üzere.

Kaynakça:

ConstraintLayout in Compose | Jetpack Compose | Android Developers