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

"Oluştur" yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle nasıl çalışacağınızı öğrenin.

ConstraintLayout, iç içe yerleştirilmiş görünüm grupları olmadan düz görünüm hiyerarşisiyle büyük ve karmaşık düzenler oluşturmanıza olanak tanır. Tüm görünümlerin eşdüzey görünümler ve üst düzen arasındaki ilişkilere göre düzenlenmesi RelativeLayout'e benzer, ancak RelativeLayout'dan daha esnektir ve Android Studio'nun Düzen Düzenleyici ile kullanımı daha kolaydır.

Layout API ve Layout Editor birbiri için özel olarak tasarlandığından, ConstraintLayout işlevinin tüm gücünden doğrudan Düzen Düzenleyici'nin görsel araçlarından yararlanabilirsiniz. Düzeninizi XML'i düzenlemek yerine sürükleyerek tamamen ConstraintLayout ile oluşturabilirsiniz.

Bu sayfada, Android Studio 3.0 veya sonraki sürümlerde ConstraintLayout ile nasıl düzen oluşturulacağı gösterilmektedir. Düzen Düzenleyici hakkında daha fazla bilgi için Düzen Düzenleyici ile kullanıcı arayüzü oluşturma konusuna bakın.

ConstraintLayout ile oluşturabileceğiniz çeşitli düzenleri görmek için GitHub'daki Sınırlama Düzeni Örnekleri projesine bakın.

Kısıtlamalara genel bakış

ConstraintLayout ürününde bir görünümün konumunu tanımlamak için, görünüm için en az bir yatay ve bir dikey sınırlama ekleyin. Her kısıtlama başka bir görünümle, üst düzenle veya görünmez bir yönergeyle bağlantıyı ya da hizalamayı temsil eder. Her kısıtlama, görünümün dikey veya yatay eksendeki konumunu tanımlar. Her görünümde, her eksen için en az bir kısıtlama bulunmalıdır ancak genellikle daha fazlası gereklidir.

Bir görünümü Düzen Düzenleyici'ye bıraktığınızda, sınırlama olmasa bile bıraktığınız yerde kalır. Bu özelliğin amacı yalnızca düzenlemeyi kolaylaştırmaktır. Düzeninizi bir cihazda çalıştırdığınızda herhangi bir kısıtlama yoksa görünüm [0,0] konumunda (sol üst köşe) çizilir.

Şekil 1'de, düzen düzenleyicide sorunsuz bir şekilde görünse de C görünümünde dikey kısıtlama yoktur. Bu düzen bir cihaz üzerinde çizim yaparken, C görünümü, A görünümünün sol ve sağ kenarlarıyla yatay olarak hizalanır, ancak dikey sınırlaması olmadığından ekranın üst kısmında görünür.

Şekil 1. Düzenleyici, C görünümünü A'nın altında gösterir ancak dikey sınırlama yoktur.

Şekil 2. C Görünümü artık A görünümünün altında dikey olarak sınırlanmıştır.

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.

    Groovy

    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

Şekil 3. Bir düzeni ConstraintLayout biçimine dönüştürecek menü.

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. video. Görünümün sol tarafı, üst öğenin sol tarafıyla sınırlıdır.

  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.

2. video. Mevcut bir kısıtlamaya karşılık gelen bir kısıtlama ekleme.

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

Bir görünümün kenarını düzenin karşılık gelen kenarıyla sınırlandırın.

Şekil 7'de, görünümün sol tarafı üst düzenin sol kenarına bağlanmıştır. Kenar boşluğunu kullanarak kenardan uzaklığı tanımlayabilirsiniz.

Şekil 7. Üst öğe için yatay bir kısıtlama.

Sipariş konumu

İki görünüm için dikey veya yatay olarak görünüm sırasını tanımlayın.

Şekil 8'de B, her zaman A'nın sağında ve C de A'nın altında olacak şekilde kısıtlanır. Ancak, bu kısıtlamalar hizalamayı ima etmediğinden B yine de yukarı veya aşağı hareket edebilir.

8. Şekil. Yatay ve dikey kısıtlama.

Hizalama

Bir görünümün kenarını, başka bir görünümün aynı kenarına hizalayın.

Şekil 9'da, B'nin sol tarafı, A'nın sol kenarına hizalanmıştır. Görüntü merkezlerini hizalamak isterseniz her iki tarafta bir sınırlama oluşturun.

Görünümü sınırlamadan içeri sürükleyerek hizalamayı uzaklaştırabilirsiniz. Örneğin, Şekil 10'da B'yi 24 dp ofset hizalamasıyla gösterilmektedir. Ofset, kısıtlanmış görünümün kenar boşluğuna göre belirlenir.

Ayrıca, hizalamak istediğiniz tüm görünümleri seçebilir ve ardından hizalama türünü seçmek için araç çubuğundaki Hizala seçeneğini tıklayabilirsiniz.

9. Şekil. Yatay hizalama kısıtlaması.

Şekil 10. Ofset yatay hizalama kısıtlaması.

Temel hizalama

Bir görünümün metin referans çizgisini başka bir görünümün metin temel çizgisine hizalayın.

Şekil 11'de, B'nin ilk satırı A'daki metinle hizalanır.

Temel sınırlama oluşturmak için sınırlandırmak istediğiniz metin görünümünü sağ tıklayıp Referans Değeri Göster'i tıklayın. Ardından metin temel çizgisini tıklayın ve çizgiyi başka bir taban çizgisine sürükleyin.

Şekil 11. Temel hizalama kısıtlaması.

Bir kuralla sınırla

Uygulamanızın kullanıcıları tarafından görülmeyen, görünümlerinizi kısıtlamanızı sağlayan dikey veya yatay bir kılavuz ekleyebilirsiniz. Yönergeyi, dp birimlerine veya düzenin kenarına göre bir yüzdeye göre düzen içinde konumlandırabilirsiniz.

Kural oluşturmak için araç çubuğunda Yönergeler'i ve ardından Dikey Kılavuz Ekle veya Yatay Kural Ekle'yi tıklayın.

Noktalı çizgiyi sürükleyerek yeniden konumlandırın ve ölçüm modunu değiştirmek için kılavuzun kenarındaki daireyi tıklayın.

Şekil 12. Bir kuralla sınırlı görünüm.

Bariyerle sınırla

Yönergelere benzer şekilde, bariyer de görünümleri sınırlayabileceğiniz görünmez bir çizgidir ancak bir bariyer kendi konumunu tanımlamaz. Bariyer konumu, bunun yerine videonun içerdiği görüşlerin konumuna göre hareket eder. Bu, bir görünümü belirli bir görünüm yerine bir grup görünümle sınırlamak istediğinizde kullanışlıdır.

Örneğin, Şekil 13'te görünüm C, bir bariyerin sağ tarafıyla sınırlandırılmıştır. Bariyer, hem A görünümünün hem de B görünümünün "sonuna" (veya soldan sağa düzende sağ tarafa) ayarlanmıştır. Bariyer, A veya B görünümünün sağ tarafının en sağ tarafta mı olduğuna bağlı olarak hareket eder.

Bariyer oluşturmak için aşağıdaki adımları izleyin:

  1. Araç çubuğunda Yönergeler'i ve ardından Dikey Engelleri Ekle veya Yatay Engelleme Ekle'yi tıklayın.
  2. Bileşen Ağacı penceresinde, bariyer içinde olmasını istediğiniz görünümleri seçin ve bunları bariyer bileşenine sürükleyin.
  3. Bileşen Ağacı'ndan bariyeri seçin, Özellikler penceresini açın ve ardından barrierDirection değerini ayarlayın.

Artık başka bir görünümden engele yönelik bir sınırlama oluşturabilirsiniz.

Bariyerin içindeki görünümleri de sınırlayabilirsiniz. Bu şekilde, hangi görünümün en uzun veya en yüksek olduğunu bilseniz bile, bariyerdeki tüm görünümleri birbirlerine hizalayabilirsiniz.

Bariyer için “minimum” bir konum belirlemek için bir bariyerin içine bir kılavuz da ekleyebilirsiniz.

Şekil 13. C Görünümü, hem A görünümünün hem de B görünümünün konumuna ve boyutuna göre hareket eden bir engelle sınırlandırılmıştır.

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.

3. video. Kısıtlama ağırlıklandırmasını ayarlama.

Görünüm boyutunu ayarlama

Şekil 14. Özellikler penceresi, bir görünüm 1 boyut oranı, 2 kısıtlamaları silme, 3 yükseklik veya genişlik modu, 4 kenar boşlukları ve 5 kısıtlama ağırlıklandırması için denetimler içerir. Ayrıca, 6 kısıtlama listesinde bunları tıklayarak Düzen Düzenleyici'de kısıtlamaları tek tek vurgulayabilirsiniz.

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

Şekil 15. Görünüm, yükseklik oranına bağlı olarak genişlik ve 16:9 en boy oranına ayarlanır.

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

Şekil 17. İki manzaralı yatay zincir.

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.

Şekil 18. Her zincir stiline ilişkin örnekler.

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.

4. video. Yatay zincir oluşturuluyor.

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.