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

Oluşturma yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle çalışma hakkında bilgi edinin.

ConstraintLayout, iç içe geçmiş 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ümler, aynı görünüm ve üst öğe düzeni arasındaki ilişkilere göre düzenlendiği için RelativeLayout'e benzer, ancak RelativeLayout uygulamasından daha esnektir ve Android Studio'nun Layout Editor'ı ile kullanımı daha kolaydır.

Layout API'si ve Layout Editor, birbirleri için özel olarak tasarlandığından ConstraintLayout, doğrudan Layout Editor'ın görsel araçlarından yararlanır. XML'i düzenlemek yerine düzeninizi 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 bölümüne bakın.

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

Sınırlamalara genel bakış

ConstraintLayout içinde 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 eklersiniz. Her kısıtlama başka bir görünümle olan bağlantıyı veya hizalamayı, üst düzene ya da görünmez bir kuralı temsil eder. Her sınırlama, görünümün dikey veya yatay eksendeki konumunu tanımlar. Her görünümde her eksen için en az bir sınırlama olmalıdır ancak genellikle daha fazlası gereklidir.

Bir görünümü Düzen Düzenleyici'ye bıraktığınızda, hiçbir sınırlama olmasa bile görünüm kaldığınız yerden devam eder. Bunun amacı düzenlemeyi kolaylaştırmaktır. Bir cihazda düzeninizi çalıştırdığınızda görünümde herhangi bir kısıtlama yoksa [0,0] konumunda (sol üst köşe) çizilir.

Şekil 1'de, düzen, düzenleyicide iyi görünmektedir, ancak C görünümünde herhangi bir dikey sınırlama yoktur. Bu düzen bir cihazda çizildiğinde, 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ırlama 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 sınırlama yoktur.

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

Eksik bir kısıtlama derleme hatasına neden olmasa da, Düzen Düzenleyici, araç çubuğunda eksik kısıtlamaları hata olarak belirtir. Hataları ve diğer uyarıları görüntülemek için Uyarıları ve Hataları Göster'i tıklayın. Kısıtlamaların eksikliğini önlemenize yardımcı olmak için Düzen Düzenleyici, Otomatik bağlanma ve kısıtlamaları çıkarma ö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 deposunun tanımlandığından emin olun:

    Modern

        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üzeni dönüştürme

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

Mevcut bir düzeni bir sınırlama düzenine dönüştürmek için şu adımları izleyin:

  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 Line Layout'u ConstraintLayout'a Dönüştür'ü tıklayın.

Yeni düzen oluşturma

Yeni bir sınırlama düzen dosyası başlatmak için şu adımları uygulayın:

  1. Proje penceresinde, modül klasörünü tıklayın ve File > New > XML > Layout XML'i (Dosya > Yeni > XML > Düzen XML) seçin.
  2. Düzen dosyası için bir ad girin ve Kök Etiket için "androidx.restrictiontlayout.widget.ConstraintLayout" girin.
  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. Bir görünümün sol tarafı, üst öğenin sol tarafıyla kısıtlanır.

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

    ConstraintLayout içine bir görünüm eklediğinizde söz konusu görünüm, her köşesinde kare yeniden boyutlandırma tutamaçları ve her iki tarafında dairesel sınırlama tutamaçları bulunan bir sınırlayıcı kutuda görüntülenir.

  2. Görünümü tıklayarak seçin.
  3. Aşağıdakilerden birini yapın:
    • Bir kısıtlama tutma yerini tıklayın ve 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 yönerge olabilir. Sınırlama tutamacını sürüklerken, Düzen Düzenleyici'nin olası bağlantı çapalarını ve mavi yer paylaşımlarını gösterdiğine dikkat edin.
    • Özellikler penceresinin Düzen bölümündeki Bağlantı oluştur düğmelerinden birini tıklayın (Şekil 4'te gösterildiği gibi).

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

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ı göz önünde bulundurun:

  • Her görünümde, biri yatay ve diğeri dikey olmak üzere en az iki sınırlama olmalıdır.
  • Yalnızca aynı düzlemi paylaşan bir kısıtlama noktası ve 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üzlemde ve referans değerler yalnızca diğer referans değerlerle sınırlanabilir.
  • Her kısıtlama tutamacı yalnızca bir kısıtlama için kullanılabilir ancak aynı sabitleme noktasına farklı görünümlerden 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, ardından Sil'i tıklayın.
  • Bir kısıtlama bağlantısını Control tuşunu basılı tutarak tıklayın (macOS'te Command tuşunu basılı tutarken tıklayın). Kısıtlama, Şekil 5'te gösterildiği gibi, tıklayarak silebileceğinizi belirtmek için kırmızı renge döner.

    5. Şekil. Kırmızı renkli kısıtlama, ilgili etiketi silmek için tıklayabileceğinizi gösterir.

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

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

2.Video: Mevcut bir kısıtlamaya karşı çıkan bir kısıtlama eklemek.

Bir görünüme zıt kısıtlamalar eklerseniz, video 2'de gösterildiği gibi sınırlama çizgileri, zıt kuvvetleri belirtmek için bir yay gibi kıvrılır. Bu etki, en çok görünüm boyutu "sabit" veya "içeriği sarmala" olarak ayarlandığında görülür. Bu durumda, görünüm kısıtlamalar arasında ortalanır. Bunun yerine, boyutunun kısıtlamaları karşılayacak şekilde genişletilmesini istiyorsanız boyutu "kısıtlamaları eşleştir" olarak değiştirin. Geçerli boyutu korumak ancak görünümü ortalanmayacak şekilde taşımak istiyorsanız sınırlama ağırlığı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ı ana düzenin sol kenarına bağlanmıştır. Kenardan mesafeyi kenar boşluğu ile tanımlayabilirsiniz.

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

Sipariş konumu

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

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

8. Şekil. Yatay ve dikey sınırlama.

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 istiyorsanız her iki tarafta da bir sınır oluşturun.

Görünümü sınırlamadan içe sürükleyerek hizalamanın ofsetini alabilirsiniz. Örneğin, Şekil 10'da B 24 dp ofset hizalamasıyla gösterilmektedir. Göreli konum, sınırlandırılmış görünümün kenar boşluğuyla tanımlanır.

Ayrıca, hizalamak istediğiniz tüm görünümleri seçip hizalama türünü seçmek için araç çubuğundaki Hizala simgesini tıklayabilirsiniz.

9. Şekil. Yatay hizalama sınırlaması.

Şekil 10. Göreli yatay hizalama sınırlaması.

Referans 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.

Referans kısıtlaması oluşturmak için sınırlandırmak istediğiniz metin görünümünü sağ tıklayın, ardından Referans Değeri Göster'i tıklayın. Ardından metin referansını tıklayın ve çizgiyi başka bir referans değere sürükleyin.

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

Bir yönergeyle 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ülmeyen dikey veya yatay bir yönerge ekleyebilirsiniz. Yönergeyi, 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 Yönergeler simgesini ve ardından Dikey Kılavuz Ekle veya Yatay Kılavuz Ekle'yi tıklayın.

Yeniden konumlandırmak için noktalı çizgiyi sürükleyin ve ölçüm modunu değiştirmek için kılavuzun kenarındaki daireyi tıklayın.

Şekil 12. Bir yönergeyle sınırlandırılmış görünüm.

Bir bariyerle sınırla

Yönergeye benzer şekilde, bariyer de görünümleri sınırlayabileceğiniz görünmez bir çizgidir. Tek fark, bariyerin kendi konumunu tanımlamamasıdır. Bunun yerine, bariyer konumu, içinde bulunan görünümlerin konumuna göre hareket eder. Bu, bir görünümü belirli bir görünüm yerine bir dizi görünümle sınırlamak istediğinizde kullanışlıdır.

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

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

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

Artık başka bir görünümden bariyere bir kısıtlama 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 bilmeseniz bile engeldeki tüm görünümleri birbiriyle hizalayabilirsiniz.

Bariyer için "minimum" konumu garantilemek amacıyla bariyerin içine bir kural da ekleyebilirsiniz.

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

Sınırlama yanlılığını ayarlama

Bir görünümün her iki tarafına da kısıtlama eklediğinizde ve aynı boyut için görünüm boyutu "sabit" veya "içerik sarmal" olduğunda, görünüm varsayılan olarak% 50'lik bir ağırlıkla iki kısıtlama arasında ortalanır. 3. videoda gösterildiği gibi, ön yargıyı, ağırlık kaydırma çubuğunu Özellikler penceresinde sürükleyerek veya görünümü sürükleyerek ayarlayabilirsiniz.

Bunun yerine görünümün, kısıtlamaları karşılayacak şekilde genişletilmesini istiyorsanız boyutu "kısıtlamaları eşleştir" olarak değiştirin.

3.Video: Sınırlama yanlılığını ayarlama.

Görünüm boyutunu ayarlama

Şekil 14. Bir görünüm seçerken, Özellikler penceresinde 1 boyut oranı, 2 kısıtlamaları silme, 3 yükseklik veya genişlik modu, 4 kenar boşlukları ve 5 kısıtlama eğilimiyle ilgili denetimler bulunur. Ayrıca, 6 sınırlama listesinden kısıtlamaları Düzen Düzenleyici'de tıklayarak ayrı ayrı kısıtlamaları vurgulayabilirsiniz.

Bir görünümü yeniden boyutlandırmak için köşe tutma yerlerini kullanabilirsiniz, ancak bu işlem boyutu sabit bir şekilde 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, Şekil 14'te gösterildiği gibi, çeşitli düzen öznitelikleri için denetimler içeren görünüm denetleyicisi bulunur. Bu özellik, yalnızca kısıtlama düzenindeki görünümlerde kullanılabilir.

Şekil 14'te 3 numaralı açıklamada belirtilen simgeleri tıklayarak yüksekliğin ve genişliğin hesaplanma şeklini değiştirebilirsiniz. Bu simgeler, aşağıdaki gibi boyut modunu 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 Sarmala: Görünüm, yalnızca içeriğini sığdırmak için gerektiği kadar genişler.
    • layout_restrictionedWidth
    • Yatay boyutun kısıtlamalara uymak üzere değişmesi için bunu true olarak ayarlayın. Varsayılan olarak, WRAP_CONTENT değerine ayarlanmış bir widget kısıtlamalarla sınırlı değildir.

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

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

    • layout_restrictiontWidth_maks

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

    Ancak, belirtilen boyutta yalnızca bir sınırlama varsa görünüm, içeriğine sığacak şekilde genişler. Yükseklik veya genişlik için bu modun kullanılması, bir boyut oranı ayarlamanıza da olanak tanır.

Boyutu oran olarak ayarla

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

Görünüm boyutlarından en az biri "kısıtlamaları eşleştir" (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 1'de gösterilmiştir) tıklayın ve görüntülenen 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 dayalı olduğunu seçmek için En Boy Oranı Kısıtlamasını Değiştir'i tıklayabilirsiniz. Görünüm denetleyicisi, karşılık gelen kenarları düz bir çizgiyle birleştirerek oran olarak hangi boyutun ayarlandığını gösterir.

Örneğin, her iki tarafı da "kısıtlamaları eşleştir" olarak ayarlarsanız genişliği yüksekliğin 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, Şekil 15'te gösterildiği gibi herhangi bir şekilde tanımlanabilen görünümün yüksekliğine göre belirlenir.

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

Görünümlerinizi eşit aralıklarla düzenlemek için araç çubuğundaki Kenar simgesini tıklayarak düzene eklediğiniz her görünüm için varsayılan kenar boşluğunu seçin. Varsayılan kenar boşluğunda yaptığınız herhangi bir değişiklik, yalnızca o andan itibaren eklediğiniz görünümlere uygulanır.

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

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

Aracın sunduğu tüm kenar boşlukları, görüntülemelerinizin Materyal Tasarım'ın 8 dp kare ızgara önerileriyle uyumlu olmasına yardımcı olmak için 8 dp faktörüdür.

Doğrusal grupları zincirle kontrol edin

Şekil 17. İki görünümü olan yatay bir zincir.

Zincir, çift yönlü konum sınırlamalarıyla birbirine bağlanmış bir görünüm grubudur. Zincir içindeki görüntülemeler dikey veya yatay olarak dağıtılabilir.

Şekil 18. Her zincir stiline dair örnekler.

Zincirlere şu şekillerde stil eklenebilir:

  1. Yayın: Görüntülemeler, kenar boşlukları dikkate alındıktan sonra eşit olarak dağıtılır. Bu, varsayılan ayardır.
  2. İçine yay: İlk ve son görünümler, zincirin her bir ucundaki kısıtlamalara yapıştırılır, geri kalanı ise eşit şekilde dağıtılır.
  3. Ağırlıklı: Zincir, yay: veya içine yay olarak ayarlandığında, bir veya daha fazla görünümü "kısıtlamaları eşleştir" (0dp) şeklinde ayarlayarak kalan alanı doldurabilirsiniz. Varsayılan olarak, alan "kısıtlamaları eşleştir" olarak ayarlanmış her görünüm arasında eşit bir şekilde dağıtılır ancak layout_constraintHorizontal_weight ve layout_constraintVertical_weight özelliklerini kullanarak her bir görünüme önem ağırlığı atayabilirsiniz. Bu işlem, doğrusal düzende layout_weight ile aynı şekilde işler: 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. Gruplandırılmış: Görünümler, kenar boşlukları hesaba katıldıktan sonra toplanır. Zincirin "baş" görünümü ön yargısını değiştirerek tüm zincirin önyargısını (sola veya sağa ya da yukarı veya aşağı) ayarlayabilirsiniz.

Zincirin "baş" görünümü, yani yatay bir zincirde (soldan sağa düzende) en soldaki görünüm ve dikey bir zincirde, en üstteki görünüm, XML biçiminde zincirin stilini tanımlar. Ancak, zincirde herhangi bir görünümü seçip görünümün altında görünen zincir düğmesini tıklayarak yaygın, içine yay ve paketlenmiş seçenekleri arasında geçiş yapabilirsiniz.

Zincir oluşturmak için 4. videoda 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 Ortala veya Dikey Olarak Ortala'yı seçin.

4.Video: Yatay zincir oluşturuluyor.

Zincir kullanımında dikkat edilmesi gereken birkaç nokta vardır:

  • Bir görünüm hem yatay hem de dikey bir zincirin parçası olabilir. Böylece esnek ızgara düzenleri oluşturabilirsiniz.
  • Zincir, yalnızca zincirin her bir ucu Şekil 14'te gösterildiği gibi aynı eksendeki başka bir nesneyle sınırlanmışsa düzgün şekilde çalışır.
  • Zincirin yönü dikey veya yatay olsa da zincirin yönü o yöndeki görünümleri hizalamaz. Zincirdeki her bir görünüm için uygun konumu elde etmek üzere hizalama kısıtlamaları gibi başka kısıtlamalar ekleyin.

Kısıtlamaları otomatik olarak 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üzenleyici'de istediğiniz konumlara taşıyabilir ve ardından otomatik olarak kısıtlamalar oluşturmak için Kısıtlamaları Anlaşılır tıklayabilirsiniz.

Kısıtlamaları Çıkar, tüm görünümler için en etkili kısıtlama kümesini belirlemek üzere düzeni tarar. Görüntüleme sayısını mevcut konumlarıyla sınırlandırırken esneklik de sağlar. Farklı ekran boyutları ve yönleri kullanmak istediğiniz için düzenin yanıt vermesi için ayarlamalar yapmanız gerekebilir.

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

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

Animasyon karesi animasyonları

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

ConstraintSet, ConstraintLayout içindeki tüm alt öğelerin kısıtlamalarını, kenar boşluklarını ve dolgularını 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 animasyonun 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ükleyip bunu görüntülenen ConstraintLayout öğesine uygulayabilirsiniz.

Aşağıdaki kod örneğinde, tek bir düğmenin ekranın altına nasıl taşınacağı 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

Sunflower demo uygulamasında ConstraintLayout kullanılır.