ConstraintLayout ile duyarlı kullanıcı arayüzü oluşturma   Android Jetpack'in bir parçasıdır.

Eksik kısıtlamalar derleme hatasına neden olmasa da, düzen düzenleyici, eksik kısıtlamaları araç çubuğunda hata olarak gösterir. Hataları ve diğer uyarıları görüntülemek için Uyarıları ve Hataları Göster'i tıklayın. Eksik kısıtlamaları önlemenize yardımcı olmak için, Otomatik bağlantı ve kısıtlamaları tahmin etme özellikleriyle birlikte, düzen düzenleyici sizin için otomatik olarak kısıtlamalar ekler.

Projenize ConstraintLayout ekleme

Projenizde ConstraintLayout kullanmak için aşağıdaki adımları uygulayın:

1. settings.gradle dosyanızda maven.google.com deposunu belirttiğinizden emin olun:

   Eski

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Kitaplığı, aşağıdaki örnekte gösterildiği gibi modül düzeyindeki build.gradle dosyasına bir bağımlılık olarak ekleyin. En son sürüm, örnekte gösterilenden farklı olabilir.

   Eski

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
   }
   

3. Araç çubuğunda veya senkronizasyon bildirimde Projeyi Gradle Dosyalarıyla Senkronize Et'i tıklayın.

Artık ConstraintLayout ile düzeninizi oluşturmaya hazırsınız.

Düzen dönüştürme

Mevcut bir düzeni kısıtlama düzenine dönüştürmek için aşağıdaki adımları uygulayın:

1. Düzeninizi Android Studio'da açın ve düzenleyici penceresinin alt kısmındaki Tasarım sekmesini tıklayın.
2. Bileşen Ağacı penceresinde, düzeni sağ tıklayın ve DoğrusalLayout'u ConstraintLayout'a Dönüştür'ü tıklayın.

Yeni düzen oluştur

Yeni bir kısıtlama düzeni dosyası başlatmak için aşağıdaki adımları uygulayın:

1. Proje penceresinde modül klasörünü tıklayın ve Dosya > Yeni > XML > XML'i Düzenle'yi seçin.
2. Düzen dosyası için bir ad girin ve Kök Etiket için "androidx.restrictedtlayout.widget.ConstraintLayout" yazın.
3. Son'u tıklayın.

Kısıtlama ekleme veya kaldırma

Kısıtlama eklemek için aşağıdakileri yapın:

1. Palet penceresinden bir görünümü düzenleyiciye sürükleyin.

   ConstraintLayout içine eklediğiniz görünümler, her köşesinde kare yeniden boyutlandırma düğmeleri ve her yanında dairesel kısıtlama düğmeleri bulunan bir sınırlayıcı kutuda gösterilir.

2. Görünümü tıklayarak seçin.
3. Aşağıdakilerden birini yapın:
   • Bir kısıtlama tutamacını tıklayın ve müsait bir sabitleme noktasına sürükleyin. Bu nokta başka bir görünümün kenarı, düzenin kenarı veya bir kılavuz olabilir. Kısıtlama tutma yerini sürüklerken, düzen düzenleyicinin olası bağlantı bağlantı noktalarını ve mavi yer paylaşımlarını gösterdiğini fark edin.

   • Şekil 4'te gösterildiği gibi, Özellikler penceresinin Düzen bölümündeki Bağlantı oluştur düğmelerinden birini tıklayın.

     

     Şekil 4. Özellikler penceresinin Düzen bölümünden bağlantı oluşturabilirsiniz.

Kısıt oluşturulduğunda düzenleyici, iki görünümü ayırmak için varsayılan bir kenar boşluğu ekler.

Kısıtlamalar oluştururken aşağıdaki kuralları göz önünde bulundurun:

• Her görünümde en az iki kısıtlama olmalıdır: bir yatay ve bir dikey.
• Yalnızca sınırlama tutamacı ile aynı düzlemi paylaşan bir sabitleme noktası arasında kısıtlamalar oluşturabilirsiniz. Bir görünümün dikey düzlemi (sol ve sağ taraflar) yalnızca başka bir dikey düzlemle, referans değerleri ise yalnızca diğer referans değerleriyle sınırlanabilir.
• Her kısıtlama tutamaç yalnızca bir kısıtlama için kullanılabilir ancak farklı görünümlerden aynı ankraj noktasına birden fazla kısıtlama oluşturabilirsiniz.

Aşağıdakilerden birini yaparak bir kısıtlamayı silebilirsiniz:

• Bir kısıtlamayı tıklayarak seçin ve ardından Sil'i tıklayın.

• Bir kısıtlama ankrajını Kontrol tuşuyla (MacOS'te Command tuşuyla) tıklayın. Şekil 5'te gösterildiği gibi, kısıtlamayı tıklayarak silebilirsiniz. Bu durumda kısıtlama kırmızıya döner.

  

  5. Şekil. Kırmızı bir kısıtlama, tıklayarak silebileceğinizi gösterir.

• Özellikler penceresinin Düzen bölümünde, şekil 6'da gösterildiği gibi bir kısıtlama ankrajını tıklayın.

  

  Şekil 6. Silmek istediğiniz kısıtlama sabitleyiciyi tıklayın.

Bir görünüme zıt kısıtlamalar eklerseniz kısıtlama çizgileri, 2. videoda gösterildiği gibi zıt kuvvetleri belirtmek için bir yay gibi kıvrılır. Bu efekt en çok görüntü boyutu "sabit" veya "içeriği sarma" olarak ayarlandığında görünür. Bu durumda görüntü, kısıtlamalar arasında ortalanır. Bunun yerine, görünümün boyutunu kısıtlamaları karşılayacak şekilde uzatmasını istiyorsanız boyutu "kısıtlamaları karşıla" olarak değiştirin. Mevcut boyutu korumak ancak görünümü ortalanmayacak şekilde taşımak istiyorsanız kısıtlama önyargısını ayarlayın.

Aşağıdaki bölümlerde açıklandığı gibi, farklı düzen davranışı türleri elde etmek için kısıtlamalar kullanabilirsiniz.

Ebeveyn konumu

Sipariş konumu

Hizalama

Temel çizgi hizalama

Bir kuralla sınırla

Bir engele sınırlama

Kısıtlama önyargısını ayarlama

Görünümün her iki tarafına da bir sınırlama eklediğinizde ve aynı boyut için görüntüleme boyutu "sabit" veya "içeriği sarmala" olursa, görüntü varsayılan olarak% 50 önyargı ile iki kısıtlama arasında ortalanır. Özellikler penceresindeki önyargı kaydırma çubuğunu sürükleyerek veya 3. videoda gösterildiği gibi görünümü sürükleyerek önyargıyı ayarlayabilirsiniz.

Bunun yerine, görünümün boyutunu kısıtlamaları karşılayacak şekilde uzatmasını istiyorsanız boyutu "kısıtlamaları karşıla" olarak değiştirin.

Görüntü boyutunu ayarlama

Bir görünümü yeniden boyutlandırmak için köşe tutamaçlarını kullanabilirsiniz. Ancak bu işlem, boyutu sabit kodlar. Böylece görünüm, farklı içerik veya ekran boyutları için yeniden boyutlandırılmaz. Farklı bir boyutlandırma modu seçmek için bir görünümü tıklayın ve düzenleyicinin sağ tarafındaki Özellikler penceresini açın.

Özellikler penceresinin üst kısmına yakın bir yerde, çeşitli düzen özelliklerine yönelik denetimler içeren görüntüleme denetleyicisi bulunur (Şekil 14). Bu seçenek yalnızca kısıtlama düzenindeki görünümler için kullanılabilir.

Şekil 14'te açıklama 3 ile belirtilen simgeleri tıklayarak yükseklik ve genişliğin hesaplanma yöntemini değiştirebilirsiniz. Bu semboller, beden modunu aşağıdaki gibi temsil eder. Aşağıdaki ayarlar arasında geçiş yapmak için simgeyi tıklayın:

• Sabit: Aşağıdaki metin kutusunda veya düzenleyicide görünümü yeniden boyutlandırarak belirli bir boyut belirtin.
• İçeriği Kaydır: Görünüm, yalnızca içeriğine sığması için gereken kadar genişler.
• layout_constrainedWidth

Yatay boyutun kısıtlamalara uyması için bu değeri true olarak ayarlayın. WRAP_CONTENT değerine ayarlanan bir widget, varsayılan olarak kısıtlamalarla sınırlandırılmaz.

• Eşleme Kısıtlamaları: Görünüm, kenar boşlukları dikkate alınarak her iki taraftaki kısıtlamaları karşılamak için mümkün olduğunca genişler. Ancak aşağıdaki özellikleri ve değerleri kullanarak bu davranışı değiştirebilirsiniz. Bu özellikler yalnızca görüntü genişliğini "kısıtlamaları eşle" olarak ayarladığınızda geçerli olur:
  • layout_constraintWidth_min

    Bu, görünümün minimum genişliği için dp boyutu alır.

  • layout_constraintWidth_max

    Bu, görünümün maksimum genişliği için bir dp boyutu alır.

  Ancak, belirtilen boyutun yalnızca bir kısıtlaması varsa görünüm, içeriğine sığacak şekilde genişler. Bu modu yükseklik veya genişlik için kullandığınızda boyut oranı da belirleyebilirsiniz.

Boyutu oran olarak ayarlama

Görüntü boyutlarından en az biri "kısıtlamaları eşle" (0dp) olarak ayarlanmışsa görüntü boyutunu 16:9 gibi bir orana ayarlayabilirsiniz. Oranı etkinleştirmek için En Boy Oranı Kısıtlamasını Aç/Kapat'ı (şekil 14'teki açıklama metni 1) tıklayın ve görünen girişe width:height oranını girin.

Hem genişlik hem de yükseklik "kısıtlamaları eşleştir" olarak ayarlanmışsa hangi boyutun diğerinin oranına göre belirleneceğini seçmek için En Boy Oranı Kısıtlamasını Değiştir'i tıklayabilirsiniz. Görünüm denetleyicisi, ilgili kenarları düz bir çizgiyle bağlayarak hangi boyutun oran olarak ayarlandığını gösterir.

Örneğin, her iki tarafı da "eşleşme kısıtlamaları"na ayarlarsanız genişliği yükseklikle ilgili bir oran olacak şekilde ayarlamak için En Boy Oranı Kısıtlamasını Değiştir'i iki kez tıklayın. Tüm boyut, görünümün yüksekliğine göre belirlenir. Şekil 15'te gösterildiği gibi bu değer herhangi bir şekilde tanımlanabilir.

Görüntü kenar boşluklarını ayarlama

Görünümlerinizin eşit aralıklarla yerleştirilmesini sağlamak için araç çubuğunda Marj'ı tıklayarak düzene eklediğiniz her görünüm için varsayılan marjı seçin. Varsayılan kenarda yaptığınız değişiklikler yalnızca o tarihten sonra eklediğiniz görünümler için geçerli olur.

Her kısıtlamayı temsil eden satırdaki sayıyı tıklayarak Özellikler penceresinde her görünümün kenar boşluğunu kontrol edebilirsiniz. Şekil 14'te, açıklama metni 4 alt kenar boşluğunun 16 dp olarak ayarlandığını gösterir.

Şekil 16. Araç çubuğunun Marj düğmesi.

Araç tarafından sunulan tüm kenar boşlukları, görünümlerinizin Material Design'ın 8 dp kare ızgara önerileriyle uyumlu hale gelmesini sağlamak için 8 dp'nin katlarıdır.

Doğrusal grupları zincirle kontrol etme

Zincir, iki yönlü konum kısıtlamalarıyla birbirine bağlı bir görünüm grubudur. Bir zincirdeki görünümler, dikey veya yatay olarak dağıtılabilir.

Zincirler aşağıdaki yöntemlerden biriyle biçimlendirilebilir:

1. Yayılım: Görüntüleme sayısı, kenar boşlukları hesaba katıldıktan sonra eşit olarak dağıtılır. Bu, varsayılan seçenektir.
2. İçeriye dağıt: İlk ve son görüntülemeler, zincirin her iki ucundaki kısıtlamalara sabitlenir ve geri kalanı eşit olarak dağıtılır.
3. Ağırlıklı: Zincir yaymak veya içine yaymak üzere ayarlandığında, bir veya daha fazla görünümü "eşleşme kısıtlamaları" (0dp) olarak ayarlayarak kalan alanı doldurabilirsiniz. Varsayılan olarak boşluk, "sınırlamaları eşleştir" olarak ayarlanmış her görünüm arasında eşit olarak dağıtılır ancak layout_constraintHorizontal_weight ve layout_constraintVertical_weight özelliklerini kullanarak her görünüme önem verilen bir ağırlık atayabilirsiniz. Bu, doğrusal düzendeki layout_weight ile aynı şekilde çalışır: En yüksek ağırlık değerine sahip görünüm en fazla alanı kaplar ve aynı ağırlığa sahip görünümler de aynı miktarda alana sahip olur.
4. Paketlenmiş: Marjlar hesaba katıldıktan sonra görüntülemeler birlikte paketlenir. Zincirin "başı" görünümünün önyargısını değiştirerek zincirin tamamının önyargısını (sol veya sağ, yukarı veya aşağı) ayarlayabilirsiniz.

Zincirin "baş" görünümü (soldan sağa düzende) yatay bir zincirde en soldaki görünüm ve bir dikey zincirde en üstten görünüm, XML'de zincirin stilini tanımlar. Ancak zincirdeki herhangi bir görünümü seçip görünümün altında görünen zincir düğmesini tıklayarak dağıtılmış, içeriye dağıtılmış ve paketlenmiş arasında geçiş yapabilirsiniz.

Zincir oluşturmak için video 4'te gösterildiği gibi aşağıdakileri yapın:

1. Zincire dahil edilecek tüm görünümleri seçin.
2. Görünümlerden birini sağ tıklayın.
3. Zincirler'i seçin.
4. Yatay olarak ortala veya Dikey olarak ortala'yı seçin.

Zincirleri kullanırken göz önünde bulundurmanız gereken birkaç nokta aşağıda belirtilmiştir:

• Görüntüler hem yatay hem de dikey zincirlerin parçası olabileceğinden esnek ızgara düzenleri oluşturabilirsiniz.
• Zincir yalnızca zincirin her ucu aynı eksendeki başka bir nesneye bağlıysa düzgün çalışır (Şekil 14'te gösterilmiştir).
• Zincirin yönü dikey veya yatay olsa da zincir kullanıldığında görünümler bu yönde hizalanmaz. Zincirdeki her bir görünüm için uygun konumu elde etmek üzere hizalama kısıtlamaları gibi diğer kısıtlamalar ekleyin.

Sınırlamaları otomatik olarak oluşturma

Her bir görünümü, düzene yerleştirirken kısıtlamalar eklemek yerine, düzen düzenleyicisinde istediğiniz konumlara taşıyabilir ve ardından kısıtlamaları otomatik olarak oluşturmak için Kısıtlamaları Tahmin Et'i tıklayabilirsiniz.

Kısıtlamaları Çıkar, tüm görünümler için en etkili kısıtlama grubunu belirlemek üzere düzeni tarar. Görünümleri mevcut konumlarıyla sınırlandırırken esneklik sağlar. Düzenin farklı ekran boyutları ve yönleriyle uyumlu olması için ayarlamalar yapmanız gerekebilir.

Ebeveyne otomatik bağlan, etkinleştirebileceğiniz ayrı bir özelliktir. Bu özellik etkinleştirildiğinde ve bir üst öğeye alt görünüm eklediğinizde, her görünümü düzene eklediğinizde otomatik olarak iki veya daha fazla kısıtlama oluşturur. Ancak bu özellik yalnızca görünümü üst öğeyle kısıtlamak uygun olduğunda çalışır. Otomatik bağlantı, düzendeki diğer görünümler için kısıtlama oluşturmaz.

Otomatik bağlantı özelliği varsayılan olarak devre dışıdır. Düzen Düzenleyici araç çubuğunda Ebeveynle Otomatik Bağlantıyı Etkinleştir'i tıklayarak etkinleştirin.

Animasyon karesi animasyonları

ConstraintLayout içinde, ConstraintSet ve TransitionManager öğelerini kullanarak öğelerin boyutu ve konumundaki değişiklikleri animasyonlu hale getirebilirsiniz.

ConstraintSet, bir ConstraintLayout içindeki tüm alt öğelerin kısıtlamalarını, kenar boşluklarını ve dolgusunu temsil eden hafif bir nesnedir. Görüntülenen bir ConstraintLayout öğesine ConstraintSet uyguladığınızda, düzen tüm alt öğelerinin kısıtlamalarını günceller.

ConstraintSet kullanarak bir animasyon oluşturmak için animasyon için başlangıç ve bitiş animasyon kareleri görevi gören iki düzen dosyası belirtin. Ardından, ikinci animasyon karesi dosyasından bir ConstraintSet yükleyip görüntülenen ConstraintLayout'e uygulayabilirsiniz.

Aşağıdaki kod örneğinde, tek bir düğmenin ekranın alt kısmına nasıl taşınacağı animasyonlu olarak gösterilmektedir.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ek kaynaklar

ConstraintLayout, Sunflower demo uygulamasında kullanılıyor.