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

Şekil 1. Düzenleyici, C görünümünü A'nın altında gösteriyor ancak dikey kısıtlaması yok.

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

Eksik bir kısıtlama, derleme hatasına neden olmasa da Düzen Düzenleyici, eksik kısıtlamaları araç çubuğunda hata olarak gösteriyor. diğer uyarıları görmek için Uyarıları ve Hataları Göster'i tıklayın. . Kısıtlamaları kaçırmamanıza yardımcı olmak için Düzen Düzenleyici otomatik olarak sizin için kısıtlayıcı durumlar Otomatik bağlanma ve çıkarım kısıtlamaları özellikleri.

Projenize ConstraintLayout ekleme

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

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

   Eski

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

   Kotlin

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

2. Kitaplığı modül düzeyinde bağımlılık olarak ekleyin build.gradle dosyası olmalıdır. En son sürümü, örnekte gösterilenden farklı olabilir.

   Modern

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

   Kotlin

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

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

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

Düzen dönüştürme

Şekil 3. Bir düzenin dönüştürüleceği menü ConstraintLayout

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 aşağıdaki sayfada Tasarım sekmesini tıklayın: düğmesini tıklayın.
2. Bileşen Ağacı penceresinde ilgili düzeni sağ tıklayın ve LineLayout'u ConstraintLayout'a dönüştürü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. Project (Proje) penceresinde modül klasörünü tıklayıp seçin Dosya > Yeni > XML > Düzen XML.
2. Düzen dosyası için bir ad girin ve "androidx.Restricttlayout.widget.ConstraintLayout" Root Etiketle.
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 her köşesinde kare yeniden boyutlandırma tutamaçları bulunan sınırlayıcı kutu ve dairesel her iki taraftaki kısıtlama tutamaçları yer alır.

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 aykırıdır. Kısıtlama tutamacını sürüklerken Düzen öğesinin Düzenleyici, olası bağlantı sabitlerini ve mavi yer paylaşımlarını gösterir.

   • Bağlantı oluşturun Özellikler penceresinin Düzen bölümündeki düğmeleri kullanarak görebilirsiniz.

     

     4.Şekil Düzen Özellikler penceresinin altındaki bölümden bağlantılar.

Kısıtlama oluşturulduğunda, düzenleyici, kısıtlamaya İki görünümü ayırmak için varsayılan kenar boşluğu.

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

• Her görünümde, biri yatay, diğeri yatay olmak üzere en az iki kısıtlama bulunmalıdır dikey.
• Yalnızca kısıtlama tutamacı ve bağlayıcı arasında kısıtlamalar oluşturabilirsiniz. bir nokta bulun. Dikey bir düzlem (sol ve sağ) bir görünüm yalnızca başka bir dikey düzlemle sınırlanabilir ve referans değerler yalnızca diğer temel değerlerle sınırlanabilir.
• Her kısıtlama tutamacı yalnızca bir kısıtlama için kullanılabilir. aynı sabitleme noktasına farklı görünümlerden birden çok 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.

• Control tuşuna basın ve ardından macOS'te Command tuşunu basılı tutarak tıklayın) kısıtlama bağlayıcısı. Kısıtlama, tıklayabileceğinizi belirtmek için kırmızı renge döner Şekil 5'te gösterildiği gibi silin.

  

  5. Şekil. Kırmızı bir kısıtlama, tıklayarak silebilirsiniz.

• Özellikler penceresinin Düzen bölümünde Şekil 6'da gösterildiği gibi bir sınırlama çapasına sahiptir.

  

  6. Şekil. Bir kısıtlamayı tıklayın sabit tıklayın.

Bir görünüme zıt kısıtlamalar eklerseniz kısıtlama çizgileri 2. videoda gösterildiği gibi rakip güçleri belirtmek için bir yay gibi sarmalanmış. İlgili içeriği oluşturmak için kullanılan efekti en çok, görüntüleme boyutu "sabit" olarak ayarlandığında görülür veya "içeriği sarmala" Bu durumda görünüm, kısıtlamaların arasında ortalanır. Google Ads'in görünümün kısıtları karşılayacak şekilde genişletilmesi, boyutu "kısıtlamalarla eşleştir" olarak değiştirin. Eğer geçerli boyutu korumak ancak görünümü ortalanmayacak şekilde taşımak istiyorsanız kısıt ağırlıklandırmasını ayarlayın.

Farklı düzen davranışı türlerine ulaşmak için kısıtlamalar kullanabilirsiniz. aşağıdaki bölümlerde açıklanmıştır.

Ü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ı, görünümün sol kenarına bağlanmıştır. üst düzeni kullanabilirsiniz. Kenar boşluğunu kullanarak kenardan uzaklığı tanımlayabilirsiniz.

Şekil 7. Yatay sınırlama ebeveyndir.

Sipariş konumu

İki görünüm için dikey veya dikey olarak görünüm sırasını tanımlayın. yerleştireceğiz.

Şekil 8'de B, her zaman A'nın sağında olacak şekilde sınırlanmıştır ve C A altında sınırlandırılmıştır. Ancak, bu kısıtlamalar hizalamayı ima etmez; bu nedenle B hareket eder.

8. Şekil. Yatay ve dikey kısıtlayın.

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. Şunu istiyorsanız: görüntü merkezlerini hizalamak için 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. Göreli konum: sınırlı 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 ardından Hizala hizalama türünü seçmek için araç çubuğunda görebilirsiniz.

9. Şekil. Yatay hizalama kısıtlayın.

Şekil 10. Yatay ofset hizalama kısıtlaması vardır.

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, ilgili metin görünümünü sağ tıklayın. kısıtlayın ve Referans Değeri Göster'i tıklayın. Ardından metni ve çizgiyi referans çizgisine sürükleyin ve çizgiyi başka bir taban çizgisine sürükleyin.

Şekil 11. Temel hizalama kısıtlayın.

Bir kuralla sınırla

Hedeflerinizi kısıtlamanıza olanak tanıyan dikey veya yatay bir kılavuz uygulamanızın kullanıcıları tarafından görülemez. Yönergeyi dp birimlerine veya kenarını sabitleyelim.

Kural oluşturmak için Kurallar'ı tıklayın. dokunun ve Dikey Kılavuz Ekle veya Ekle'yi tıklayın Yatay yönergeler.

Noktalı çizgiyi sürükleyerek yeniden konumlandırın ve kenarındaki daireyi tıklayın açma/kapatma düğmesini de kullanabilirsiniz.

Şekil 12. Belirli bir aykırıdır.

Bariyerle sınırla

Yönergelere benzer şekilde, bariyer de kısıtlayabileceğiniz görünmez bir çizgidir Ancak bir engel kendi konumunu tanımlamaz. Aksine bariyer konum, videonun içerdiği görüntülemelerin konumuna göre hareket eder. Bu Bir görünümü tek bir görünüm yerine bir dizi görünümle sınırlamak istediğinizde kullanışlıdır görebilirsiniz.

Örneğin, Şekil 13'te görünüm C, bir panelin sağ tarafıyla engel oluşturabilirsiniz. Bariyer “son” olarak ayarlanmıştır. (veya sağ tarafta, soldan sağa hem A hem de B görünümünde) yer alır. Bariyer, projenin A görünümünün sağ tarafı veya B görünümünün en sağ tarafıdır.

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

1. Kurallar'ı tıklayın. seçin ve Dikey Engelleri Ekle'yi tıklayın veya Yatay Bariyer Ekleyin.
2. Bileşen Ağacı penceresinde, bariyer bileşeninin içine sürükleyin.
3. Bileşen Ağacı'ndan engeli seçin, Özellikler penceresine dokunup barrierDirection'ı ayarlayın.

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

Bir engelin içinde yer alan görünümleri bariyer. Bu şekilde bariyerdeki tüm görünümleri birbirine hizalayabilir, tanımasanız bile görüntüleyebilir veya düzenleyebilirsiniz.

Bir bariyerin içine “minimum” değer sağlamak için bir kural da ekleyebilirsiniz. bariyer için daha iyi bir fırsattır.

Şekil 13. C Görünümü bir engelle sınırlıdır. hem A hem de B görünümünün konumuna ve boyutuna göre hareket eder.

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

Bir görünümün her iki tarafına da sınırlama eklediğinizde, iki boyutun da "sabit" olup olmadığını veya "içeriği kaydır"ı seçerseniz görüntü ortalanır. iki kısıtlama arasında varsayılan değer% 50 olur. Her bir Özellikler penceresindeki ağırlık kaydırma çubuğunu sürükleyerek veya (3. video'da gösterildiği gibi) görünüm.

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

Görünüm boyutunu ayarlama

Şekil 14. Bir görünüm seçerken, Özellikler penceresi, 1 boyut oranı, 2Kısıtlamaları silme, 3 yükseklik veya genişlik modu, 4 kenar boşluğu ve 5 Kısıt ağırlıklandırması. Ayrıca metinleri öne çıkarabilirsiniz Düzen Düzenleyicisi'nde istediğiniz sınırlamaları 6 kısıtlama listesi.

Bir görünümü yeniden boyutlandırmak için köşe tutamaçlarını kullanabilirsiniz, ancak bu işlem bir boyut kullanın: Görünüm, farklı içerikler veya ekran boyutları için yeniden boyutlandırılmaz. Alıcı: farklı bir boyutlandırma modu seçin, bir görünümü tıklayın ve Özellikler sağ tarafında bulunan bir penceredir.

Özellikler penceresinin üst tarafına yakın yerde bulunan görünüm inceleyicisi Şekil 14'te gösterildiği gibi çeşitli düzen özelliklerine ilişkin denetimler içerir. Bu yalnızca kısıtlama düzenindeki görünümler için kullanılabilir.

Yükseklik ve genişliğin hesaplanma şeklini değiştirmek için Şekil 14'te 3 açıklama metni ile belirtilen simgeler. Bu semboller, beden modunu aşağıdaki gibi temsil eder. Geçiş yapmak için simgeyi tıklayın şu ayarlar arasında geçiş yapın:

• . Sabit: Aşağıdaki metin kutusunda veya görünüm düzenleyicide yeniden boyutlandırılıyor.
• . İçeriği Sar: görünüm yalnızca sığması için gereken kadar genişler içerik.
• layout_restrictededWidth

Yatay boyutun şu şekilde değişmesine izin vermek için bunu true olarak ayarlayın: ve kısıtlara uyar. Varsayılan olarak WRAP_CONTENT seçeneğine ayarlanmış bir widget sınırlı olmadığını ifade eder.

• . Eşleme Kısıtlamaları: Görünüm, mevcut şartları karşılamak için her iki tarafta da kısıtlar olduğunu unutmayın. Ancak, aşağıdaki özellikler ve değerlerle bu davranışı değiştirebilir. Bu özellikleri, yalnızca görünüm genişliğini "eşleşme 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 sınırlama varsa görünüm genişler. Bu modun yükseklik veya genişlikte de kullanılması bir boyut oranı belirlemenize olanak tanır.

Boyutu oran olarak ayarla

Şekil 15. Görünüm 16:9 en boy oranında yüksekliğin oranına göre genişliği.

Görünüm boyutunu 16:9 gibi bir orana (örneğin, görünüm boyutlarının "eşleşme kısıtlamaları" olarak ayarlanması (0dp). oranında, En boy oranı kısıtlamasını aç/kapat'ı (açıklama metni) tıklayın. 1'i tıklayın) ve Görüntülenen girişteki width:height oranı.

Hem genişlik hem de yükseklik "kısıtlamalarla eşleşecek" değerine ayarlanırsa bu rapora En boy oranı kısıtlamasını aç/kapat seçeneğiyle hangi boyutun temel oranıdır. Görünüm inceleyici, hangi boyutun en-boy oranı ikiye katlanabilir.

Örneğin, her iki tarafı da "eşleşme kısıtlamaları" Geçiş yap En Boy Oranı Kısıtlaması'nı seçerek genişliği, yüksekliğin oranı olacak şekilde ayarlayın. Tüm boyut, görünümün yüksekliğine göre belirlenir; bu boyut şekilde değiştirin.

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

Görünümlerinizin eşit aralıklı olarak gösterilmesi için Kenar boşluğu'nu tıklayın. eklediğiniz her görünüm için varsayılan kenar boşluğunu kullanır. Varsayılan kenar boşluğunda yaptığınız değişiklikler yalnızca bu seçimi yaptığınız ekleme yapabilirsiniz.

Özellikler penceresindeki her görünümün kenar boşluğunu her bir kısıtlamayı temsil eden satırdaki sayıyı tıklayın. Şekil 14'te 4 açıklama metni, alt kenar boşluğunun 16dp.

Şekil 16. Araç çubuğunun Kenar boşluğu düğmesini tıklayın.

Aracın sunduğu tüm kenar boşlukları, görünümlerinizin hizalanmasına yardımcı olmak için 8 dp faktörleridir. önerilerine göz atacağız.

Zincirle doğrusal grupları kontrol etme

Şekil 17. Yatay bir zincirle iki görünüm.

Zincir, birbirine çift yönlü bir bağlı görünüm grubudur. ve konum sınırlamalarına Bir zincirdeki görünümler, bir şablondur.

Şekil 18. Her zincire ait örnekler stiline sahip.

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

1. Yayıl: Görüntülemeler, kenar boşlukları ayarlandıktan sonra eşit olarak dağıtılır yardımcı olur. Bu, varsayılan ayardır.
2. Dağılım: İlk ve son görünümler Zincirin her iki ucunda da kısıtlamalar olur, geri kalanlar da eşit olarak dağıtıldı.
3. Ağırlıklı: Zincir yaygın olarak ayarlandığında veya içine yayıldıysa bir veya daha fazla ayar yaparak kalan alanı doldurabilirsiniz görüntülemeleri "eşleme kısıtlamaları"na (0dp). Alan varsayılan olarak "eşleme kısıtlamaları"na ayarlanmış her bir görünüm arasında eşit olarak dağıtılır. ama her görünüme önem derecesini atayarak layout_constraintHorizontal_weight ve layout_constraintVertical_weight özellikleri. Bu, bir dildeki layout_weight ile aynı şekilde çalışır. doğrusal düzen: 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ümlerde aynı miktarda alan olur.
4. Paketlenmiş: Görüntüleme sayısı, kenar boşlukları hesaplandıktan sonra bir araya getirilir. . Tüm zincirin önyargısını sol veya sağ ya da yukarı veya zincirin "başını" değiştirerek görünüm ön yargısı.

Zincirin "head"i görünüm: yatay bir zincirde en soldan görünüm (soldan sağa düzende) ve en üstte yer alan görünüm: XML'de zincirin stilini tanımlar. Ancak yaygın, içine yayılmış ve Zincirdeki herhangi bir görünümü seçip zincir düğmesini tıklayarak paketlenmiş bir düğme görürsünüz.

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. Dolayısıyla, esnek ızgara düzenleri oluşturabilirsiniz.
• Bir zincirin düzgün çalışması için zincirin her bir ucu aynı eksende başka bir nesne görmek için aşağıdaki şemalardan birini seçin.
• Zincirin yönü dikey veya yatay olsa da uyumlu hale getirebilirsiniz. Ekip için uygun konumu elde etmek üzere her görünümün feed'i olduğu gibi, Hizalama kısıtlamaları hakkında daha fazla bilgi edinin.

Otomatik olarak kısıtlamalar oluştur

Kısıtlamaları düzene yerleştirdiğinizde 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 ardından Kısıtlamaları Çıkar'ı tıklayın. otomatik olarak kısıtlar oluşturun.

Kısıtlamaları Çıkar seçeneği, en etkili grubu belirlemek için düzeni tarar. kısıtlanmasını sağlayabilirsiniz. Görünümleri mevcut konumlarıyla sınırlar bir yandan da esneklik sağlar. Müşterilerinizin daha etkili bir şekilde çalışmasını sağlamak için ekran boyutları ve yönleri ile uyumlu olmasını sağlayın.

Ebeveyne otomatik bağlan, etkinleştirebileceğiniz ayrı bir özelliktir. Zaman etkinleştirilirse ve bir ebeveyne alt görüntüleme eklerseniz bu özellik otomatik olarak siz her görünüm için iki veya daha fazla sınırlama oluşturur. düzen (yalnızca görünümün üst öğe ile kısıtlanması uygun olduğunda) kullanır. 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. Bu seçeneği etkinleştirmek için Etkinleştir'i Ebeveyn ile otomatik bağlantı tıklayın.

Animasyon karesi animasyonları

ConstraintLayout içinde, boyutta yapılan değişikliklere animasyon uygulayabilirsiniz öğelerin konumunu belirlemek için ConstraintSet ve TransitionManager.

ConstraintSet, öğesini temsil eden hafif bir nesnedir ve dolguları, boşlukları ve dolguları ConstraintLayout. Bir ConstraintSet yönergesini ConstraintLayout görüntülenirse düzen, sorumlu olduğunu söyleyebilir.

ConstraintSet kullanarak animasyon oluşturmak için iki düzen belirtin animasyon için başlangıç ve bitiş animasyon kareleri görevi gören dosyaları. Ardından, ikinci animasyon karesi dosyasından bir ConstraintSet ve bunu ConstraintLayout gösteriliyor.

Aşağıdaki kod örneğinde, tek bir düğmenin dokunun.

// 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, Yayçiçeği demo uygulama.