Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

ConstraintLayout, iç içe yerleştirilmiş görüntü grupları olmadan düz bir görüntü hiyerarşisi içeren büyük ve karmaşık düzenler oluşturmanıza olanak tanır. Tüm görünümlerin, kardeş görünümler ile üst öğe arasındaki ilişkilere göre düzenlenmesi bakımından RelativeLayout'a benzer ancak RelativeLayout'dan daha esnektir ve Android Studio'nun Layout Editor'ı ile kullanımı daha kolaydır.

ConstraintLayout'ün tüm gücü doğrudan Layout Editor'ın görsel araçlarından kullanılabilir. Bunun nedeni, layout API ve Layout Editor'ın birbirine özel olarak tasarlanmış olmasıdır. 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 başlıklı makaleyi inceleyin.

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üme, üst düzene veya görünmez bir kılavuza bağlantı veya hizalama gösterir. Her kısıtlama, görünümün dikey veya yatay eksen üzerindeki konumunu tanımlar. Her görünümde her eksen için en az bir kısıtlama olmalıdır ancak genellikle daha fazlası gerekir.

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

Şekil 1'de düzen, düzenleyicide iyi görünüyor ancak C görünümünde dikey kısıtlama yok. 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, A'nın altında C görünümünü gösterir ancak dikey kısıtlaması yoktur.

Şekil 2. C görünümü artık A görünümünün altında dikey olarak kısıtlanmıştı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:

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

Eski

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

Kotlin

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

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")
}

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

Ş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 aşağıdaki adımları uygulayın:

Düzeninizi Android Studio'da açın ve düzenleyici penceresinin alt kısmındaki Tasarım sekmesini tıklayın.
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:

Proje penceresinde modül klasörünü tıklayın ve Dosya > Yeni > XML > XML'i Düzenle'yi seçin.
Düzen dosyası için bir ad girin ve Kök Etiket için "androidx.restrictedtlayout.widget.ConstraintLayout" yazın.
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ına kısıtlanır.

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.
Görünümü tıklayarak seçin.
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.

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

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

Bir görünümün tarafını düzenin ilgili kenarıyla sınırlayın.

Şekil 7'de, görünümün sol tarafı üst öğe düzeninin sol kenarına bağlanmıştır. Kenardan mesafeyi kenar boşluğuyla tanımlayabilirsiniz.

Şekil 7. Üst öğeye uygulanan yatay bir kısıtlama.

Sipariş konumu

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

8. şekilde B, her zaman A'nın sağında olacak şekilde kısıtlanmıştır ve C, A'nın altında olacak şekilde kısıtlanmıştır. Ancak bu kısıtlamalar hizalama anlamına gelmez. Bu nedenle B, hâlâ yukarı ve aşağı hareket edebilir.

8. Şekil. Yatay ve dikey bir 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.

9. şekilde B öğesinin sol tarafı A öğesinin sol tarafına hizalanmıştır. Görüntü merkezlerini hizalamak isterseniz her iki tarafta bir sınırlama oluşturun.

Görünümü kısıtlamadan içe doğru sürükleyerek hizalamayı kaydırabilirsiniz. Örneğin, Şekil 10'da B'yi 24 dp ofset hizalamasıyla gösterilmektedir. Ofset, sınırlanmış görünümün kenar boşluğu tarafından tanımlanır.

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.

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

Şekil 10. Yatay hizalama için ofset kısıtlaması.

Temel çizgi hizalama

Bir görünümün metin taban çizgisini başka bir görünümün metin taban çizgisiyle hizalayın.

Şekil 11'de B'nin ilk satırı A'daki metinle hizalanmıştır.

Temel çizgi kısıtlaması oluşturmak için, kısıtlamak istediğiniz metin görünümünü sağ tıklayın ve ardından Temel Çizgiyi Göster'i tıklayın. Ardından metin temel çizgisini tıklayın ve çizgiyi başka bir temel çizgiye sürükleyin.

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

Bir kuralla sınırla

Görünümlerinizi kısıtlamanıza olanak tanıyan ve uygulamanızın kullanıcıları tarafından görülemeyen dikey veya yatay bir kılavuz ekleyebilirsiniz. Kılavuzu, dp birimlerine veya düzenin kenarına göre bir yüzdeye göre düzen içinde konumlandırabilirsiniz.

Kılavuz oluşturmak için araç çubuğunda Kılavuzlar'ı tıklayın, ardından Dikey Kılavuz Ekle veya Yatay Kılavuz 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.

Bir engele sınırlama

Bir kurala benzer şekilde, bariyer de görünümleri kısıtlayabileceğiniz görünmez bir çizgidir. Bununla birlikte, 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 görünüm grubuyla sınırlamak istediğinizde kullanışlıdır.

Örneğin, 13. şekilde C görünümü bir engelin sağ tarafına sınırlanmıştır. Engel, hem A hem de B görünümünün "sonuna" (veya soldan sağa düzende sağ tarafına) ayarlanır. Engel, A görünümünün sağ tarafının mı yoksa B görünümünün sağ tarafının mı en sağda olduğuna bağlı olarak hareket eder.

Engel oluşturmak için aşağıdaki adımları uygulayın:

Araç çubuğunda Kurallar'ıtıklayın ve ardından Dikey Engel Ekle veya Yatay Engel Ekle'yi tıklayın.
Bileşen Ağacı penceresinde, engelleme içinde istediğiniz görünümleri seçin ve engelleme bileşenine sürükleyin.
Bileşen Ağacı'ndan bariyeri seçin, Özellikler penceresini açın ve barrierDirection'ı 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 sayede, en uzun veya en yüksek görünümü bilmeseniz bile bariyerdeki tüm görünümleri birbirine 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 hem de B görünümünün konumuna ve boyutuna göre hareket eden bir engele bağlıdır.

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.

3.video Kısıtlama önyargısını ayarlama.

Görüntü 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 tıklayarak düzen düzenleyicisinde ayrı ayrı kısıtlamaları vurgulayabilirsiniz.

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.

Not: ConstraintLayout içindeki hiçbir görünüm için match_parent kullanamazsınız. Bunun yerine "eşleme kısıtlamaları"nı (0dp) kullanın.

Boyutu oran olarak ayarlama

Ş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ü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

Şekil 17. İki görünüme sahip yatay bir zincir.

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.

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

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

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.
İç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.
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.
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:

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

4.video Yatay zincir oluşturma.

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.

Not: ConstraintSet animasyonlarında yalnızca alt öğelerin boyutu ve konumu animasyonlu olur. Renk gibi diğer özellikler animasyonlu değildir.

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>

Not: Android Studio 3.6 ve sonraki sürümlerde, görünüm bağlama özelliği findViewById() çağrılarının yerini alabilir. Ayrıca, görünümlerle etkileşime giren kodlar için derleme zamanı türü güvenliği sağlar. findViewById() yerine görünüm bağlamayı kullanabilirsiniz.

Ek kaynaklar

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