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

Eksik bir kısıtlama, derleme hatasına neden olmasa da Düzen Düzenleyici, araç çubuğunda eksik kısıtlamaları bir 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. Düzen Düzenleyici, kısıtlamaları kaçırmamanıza yardımcı olmak amacıyla Otomatik bağlanma ve çıkarım kısıtlamaları özellikleriyle 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.

   Modern

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

   Kotlin

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

3. Araç çubuğunda veya senkronizasyon bildiriminde 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 şu 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 > Düzen XML seçeneğini belirleyin.
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 bir görünüm eklediğinizde, bu görünüm her köşesinde kare yeniden boyutlandırma tutamaçları ve her iki tarafında dairesel kısıtlama tutma yerleri bulunan bir sınırlayıcı kutu içinde gösterilir.

2. Görünümü tıklayarak seçin.
3. Aşağıdakilerden birini yapın:
   • Sınırlama tutamaçlarından birini tıklayın ve onu kullanılabilir 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 çizgisi olabilir. Kısıtlama tutamacını sürüklerken Düzen Düzenleyici'nin olası bağlantı noktalarını ve mavi yer paylaşımlarını gösterdiğine dikkat 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.

     

     4.Şekil Özellikler penceresinin Düzen bölümü, bağlantı oluşturmanıza olanak tanır.

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

Kısıtlamalar oluştururken aşağıdaki kuralları unutmayın:

• Her görünümde, biri yatay, diğeri dikey olmak üzere en az iki kısıtlama bulunmalıdır.
• 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 sınırlandırılabilir ve referans çizgiler yalnızca diğer temel çizgilerle kısıtlanabilir.
• Her kısıtlama tutamacı yalnızca bir sınırlama için kullanılabilir. Ancak farklı görünümlerden aynı sabitleme noktasına birden fazla kısıtlama oluşturabilirsiniz.

Bir kısıtlamayı, aşağıdakilerden birini yaparak silebilirsiniz:

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

• Bir kısıtlama sabitini Control tuşunu basılı tutarak tıklayın (macOS'te Command tuşunu basılı tutarken tıklayın). Şekil 5'te gösterildiği gibi, kısıtlama, tıklayarak silebileceğinizi belirtmek için kırmızı renge 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 sınırlama sabitini tıklayın.

  

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

Bir görünüme zıt kısıtlamalar eklerseniz kısıtlama çizgileri, video 2'de gösterildiği gibi karşıt kuvvetleri göstermek için bir yay gibi sarmalanır. Etki, en çok görüntüleme boyutu "sabit" veya "içeriği kaydır" olarak ayarlandığında görülür. Bu durumda görünüm, kısıtlamaların arasında ortalanır. Bunun yerine, görünümün kısıtlamaları karşılayacak şekilde boyutunu genişletmesini isterseniz boyutu değiştirerek "kısıtlamalarla eşleşme"yi seçin. Geçerli boyutu korumak ancak görünümü ortalanmayacak şekilde taşımak istiyorsanız kısıtlama yanlılığı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.

Üst konum

Sipariş konumu

Hizalama

Temel hizalama

Bir kuralla sınırla

Bariyerle sınırla

Kısıtlama ağırlıklandırmasını ayarlayın

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. Video 3'te gösterildiği gibi, Özellikler penceresindeki ağırlıklandırma kaydırma çubuğunu veya görünümü sürükleyerek ön yargıyı ayarlayabilirsiniz.

Bunun yerine, görünümün kısıtlamaları karşılayacak şekilde boyutunu genişletmesini isterseniz boyutu değiştirerek "kısıtlamalarla eşleştirme" yapın.

Görünüm boyutunu ayarlama

Bir görünümü yeniden boyutlandırmak için köşe tutma yerlerini kullanabilirsiniz, ancak bu işlem boyutu sabit tutar. Görünüm, farklı içerikler 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 tarafına yakın yerde, Şekil 14'te gösterildiği gibi çeşitli düzen özelliklerine ilişkin denetimleri içeren görünüm denetleyicisi bulunur. Bu özellik, 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. Bu 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ığacak kadar genişler.
• layout_restrictededWidth

Yatay boyutun, kısıtlamalara uyacak şekilde değişmesine izin vermek için bunu true olarak ayarlayın. WRAP_CONTENT değerine ayarlanan bir widget, varsayılan olarak kısıtlamalarla sınırlandırılmaz.

• Eşleşme Kısıtlamaları: Görünüm, kenar boşlukları hesaba katıldıktan sonra 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ünüm genişliğini "eşleme kısıtlamaları" olarak ayarladığınızda geçerli olur:
  • layout_RestricttGenişliği_min

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

  • layout_restrictiontGenişliği_maks

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

  Ancak, belirtilen boyutta yalnızca bir kısıtlama varsa görünüm, içeriğine sığacak şekilde genişletilir. Bu modu yükseklik veya genişlikte kullanmanız da boyut oranı ayarlamanıza olanak tanır.

Boyutu oran olarak ayarla

Görünüm boyutlarından en az biri "eşleme kısıtlamaları" (0dp) olarak ayarlanmışsa görüntüleme boyutunu 16:9 gibi bir orana ayarlayabilirsiniz. Oranı etkinleştirmek için En boy oranı kısıtlamasını değiştir'i (şekil 14'te açıklama metni 1) tıklayın ve görüntülenen girişe width:height oranını girin.

Hem genişlik hem de yükseklik "eşleşme kısıtlamaları" olarak ayarlanmışsa hangi boyutun diğerinin oranına bağlı olduğunu seçmek için En Boy Oranı Kısıtlamasını Aç/Kapat'ı tıklayabilirsiniz. Görünüm inceleyici, karşılık gelen kenarları düz bir çizgiyle birleştirerek 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üleme kenar boşluklarını ayarlama

Görünümlerinizi eşit aralıklı hale getirmek için düzene eklediğiniz her görünüm için varsayılan kenar boşluğunu seçmek üzere araç çubuğundaki Kenar boşluğu'nu tıklayın. Varsayılan kenar boşluğunda yaptığınız değişiklikler yalnızca o andan itibaren ekleyeceğ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, 4 numaralı açıklama metninde alt kenar boşluğunun 16 dp olarak ayarlandığı gösterilmektedir.

Şekil 16. Araç çubuğundaki Kenar boşlukları düğmesi.

Aracın sunduğu tüm kenar boşlukları, görünümlerinizin Materyal Tasarım'ın 8 dp kare ızgara önerileriyle uyumlu olmasını sağlamak için 8 dp faktörleridir.

Zincirle doğrusal grupları kontrol etme

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

Zincirlerin stilini belirlemek için şu yöntemlerden birini kullanabilirsiniz:

1. Yayı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 ayardır.
2. İçeriye yay: İlk ve son görünümler, zincirin her bir ucundaki kısıtlamalara yapıştırılır ve diğerleri 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ı, aynı ağırlığa sahip görünümler ise aynı miktarda alanı alır.
4. Paketlenmiş: Görüntüleme sayısı, kenar boşlukları hesaba katıldıktan sonra bir araya getirilir. Zincirin "baş" görünümü ön yargısını değiştirerek tüm zincirin yanlılığını (sol veya sağ ya da yukarı veya aşağı) ayarlayabilirsiniz.

Zincirin "baş" görünümü, yani yatay bir zincirde (soldan sağa düzende) en soldaki ve bir dikey zincirde en üstte bulunan görünüm, XML'de zincirin stilini tanımlar. Bununla birlikte, zincirdeki herhangi bir görünümü seçip görünümün altında görünen zincir düğmesini tıklayarak yayılmış, içine yayılmış ve paketlenmiş durumları 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:

• Bir görünüm hem yatay hem de dikey bir zincirin parçası olabilir. Böylece esnek ızgara düzenleri oluşturabilirsiniz.
• Bir zincir yalnızca zincirin her bir ucu, şekil 14'te gösterildiği gibi aynı eksendeki başka bir nesneyle sınırlandığında düzgün çalışır.
• Zincirin yönü dikey veya yatay olsa da bir zincir kullanılması, görünümleri bu yönde hizalamaz. 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.

Otomatik olarak kısıtlamalar oluştur

Düzene yerleştirdiğiniz her görünüme kısıtlamalar eklemek yerine, her görünümü Düzen Düzenleyicisi'nde istediğiniz konumlara taşıyabilir ve sonra otomatik olarak sınırlamalar oluşturmak için Kısıtlamaları Çıkar seçeneğini 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. Etkinleştirildiğinde ve bir üst öğeye alt görünümler eklediğinizde, bu özellik siz düzene ekledikçe her görünüm için otomatik olarak iki veya daha fazla kısıtlama oluşturur. Ancak, yalnızca görünümün üst düzenle sınırlandırılması uygun olduğunda bu özellik geçerli olur. Otomatik bağlanma, düzendeki diğer görünümler için kısıtlama oluşturmaz.

Otomatik bağlanma 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ı

Bir ConstraintLayout içinde, öğelerin boyutu ve konumundaki değişiklikleri ConstraintSet ve TransitionManager kullanarak canlandırabilirsiniz.

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 ConstraintLayout öğesine bir 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. Daha sonra, ikinci animasyon karesi dosyasından bir ConstraintSet yükleyebilir ve bunu görüntülenen ConstraintLayout öğesine uygulayabilirsiniz.

Aşağıdaki kod örneğinde, tek bir düğmeyi ekranın alt kısmına taşıma animasyonu 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.