ConstraintLayout kullanarak görünümleri eşit aralıklarla yerleştirme

174

Yaygın bir kullanım LinearLayoutalanı, görünümleri eşit bir şekilde boşluk (ağırlık) yapmaktır, örneğin:

Yenisini kullanarak böyle eşit aralıklı görünümleri nasıl uygularsınız ConstraintLayout?

ConstraintLayoutreferans için bağlantılar: blog yazısı , G / Ç oturum videosu

android android-layout android-constraintlayout

— AdamK
kaynak

323

Bunu kullanarak iki yol vardır ConstraintLayout: Zincirler ve Kılavuzlar . Zincirleri kullanmak için ConstraintLayoutBeta 3 veya daha yenisini kullandığınızdan ve Android Studio'da görsel düzen düzenleyicisini kullanmak istiyorsanız Android Studio 2.3 Beta 1 veya daha yenisini kullandığınızdan emin olun.

Yöntem 1 - Zincir Kullanma

Düzen düzenleyiciyi açın ve widget'larınızı normal şekilde ekleyin, gerektiği şekilde üst sınırlamalar ekleyin. Bu durumda, üst öğenin altına ve üst öğenin yanına (Kaydet düğmesi için sol taraf ve Paylaş düğmesi için sağ taraf) kısıtlamalı iki düğme ekledim:

Bu durumda, yatay görünüme geçersem görünümlerin üst öğeyi doldurmadığını ancak köşelere tutturulduğunu unutmayın:

Ctrl / Cmd tıklatarak veya görünümlerin etrafına bir kutu sürükleyerek her iki görünümü de vurgulayın:

Ardından görünümlere sağ tıklayın ve "Yatay Olarak Ortala" yı seçin:

Bu görünümler arasında iki yönlü bir bağlantı kurar (bir Zincir bu şekilde tanımlanır). Varsayılan olarak, zincir stili "yayılmadır"; XML özniteliği eklenmediğinde bile uygulanır. Bu zincir stiline bağlı kalmak, ancak 0dpgörünümlerimizin mevcut alanı doldurmasını sağlamak için görünümlerimizin genişliğini ayarlamak ve ana öğeye eşit bir şekilde yaymak:

Bu, manzara görünümünde daha belirgindir:

Düzen düzenleyiciyi atlamayı tercih ederseniz, sonuçta ortaya çıkan XML şöyle görünür:

<android.support.constraint.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/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Detaylar:

her öğenin genişliğini görünümlerin üst öğeye doldurmasına 0dpveya bu öğenin görüntülemesine MATCH_CONSTRAINTizin vermesine (isteğe bağlı)
görünümler çift yönlü olarak birbirine bağlanmalıdır (paylaşım düğmesine düğme bağlantılarını kaydetme hakkı, kaydet düğmesi için paylaş düğmesi bağlantılarının solu), "Yatay Olarak Ortala" seçildiğinde bu düzen düzenleyici aracılığıyla otomatik olarak gerçekleşir
zincirdeki ilk görünüm, zincir stilini belirtebilir, çeşitli zincir stilleri layout_constraintHorizontal_chainStyleiçin belgelere bakın , zincir stili atlanırsa, varsayılan "yayılır"
zincirin ağırlığı ayarlanabilir layout_constraintHorizontal_weight
bu örnek yatay bir zincir içindir, dikey zincirler için karşılık gelen özellikler vardır

Yöntem 2 - Kılavuz Kullanma

Düzeninizi düzenleyicide açın ve kılavuz düğmesini tıklayın:

Ardından "Dikey Kılavuz Ekle" yi seçin:

Varsayılan olarak, büyük olasılıkla sola göreli değerlerde (sola bakan okla gösterilir) sabitlenecek yeni bir kılavuz görünecektir:

Yüzde değerine geçmek için sola bakan oku tıklayın, ardından kılavuzu% 50 işaretine sürükleyin:

Kılavuz şimdi diğer görünümler için bir tutturucu olarak kullanılabilir. Örneğimde, kaydet düğmesinin sağını ve paylaş düğmesinin solunu kılavuza ekledim:

Görünümlerin kullanılabilir alanı doldurmasını istiyorsanız, kısıtlama "Herhangi Bir Boyut" olarak ayarlanmalıdır (dalgalı çizgiler yatay olarak çalışır):

(Bu ayarı ile aynıdır layout_widthTo 0dp).

XML'de düzen düzenleyiciyi kullanmak yerine bir kılavuz da kolayca oluşturulabilir:

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

— AdamK
kaynak

1

Kısıtlı bir kılavuz oluşturmanın bir yolunu bulamadım. Yatay bir kılavuzun iki görünümün ortasında olmasını istiyorum. Üstte 100dp yükseklikte ve altta 50dp yükseklikte daha küçük bir görüntü düşünün. Aralarındaki boşluğun ortasına bir kılavuz yerleştirmek istiyorum.

— headsvk

3

Kılavuzun kendisine kısıtlamalar ekleyebileceğinizi düşünmüyorum. Birden çok yönerge ekleyebilir ve ardından görünümleri bu yönergelere sınırlayabilirsiniz. Neyi başarmaya çalıştığınızla ilgili ayrıntıları içeren yeni bir soru göndermek isteyebilirsiniz. Buraya da yapıştırmaktan çekinmeyin.

— AdamK

Teşekkürler, sevgili efendim. Zamanında ve etkili bir yardımdı.

— iSofia

Görünümlere orantılı genişlik vermek istiyorum. Örneğin, paylaş düğmesinin kaydet düğmesinin genişliğinin iki katı olmasını istiyorum. Kılavuzları kullanmadan görüşlerim bu örnekte olduğu gibi yan yana konumlandırılmadığından. mümkün mü?

— Shubham Naik

Yönergeler tarafından verilen değerleri gerçek kenar boşluklarına veya dolgulara dönüştürmeniz gerekir. Yönergeler yalnızca tasarım modunda çalışır.

— Abhinav Saxena

49

Aynı satırda 2 görünüm oluşturmak için eşit genişlikte,

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

Not

genişlik = 0dp ( MATCH_CONSTRAINT)
Kısıtlaması button1ve button2yukarıdaki gibi olmalıdır

Sonuç

DAHA FAZLA
isterseniz View1daha büyük veya View2kullanabilirsiniz . Örnek, genişlik = 2 * genişlik kullanım ağırlığıweightpercent
View1View2

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

Sonuç

Örnek, View1genişlik = 2 * View2genişlik kullanım yüzdesi

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

Sonuç

— Phan Van Linh
kaynak

23

Birine yardım ederse

anahtar burada app:layout_constraintHorizontal_weight="1"ve
kısıt düzeni hakkında en iyi şey, döngüsel bağımlılığı desteklediğini ve burada bu ben buna pek de kullanarak yapmış budur.

İlk çocuk için
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

İkinci çocuk için

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

işte tam demo

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

— rookieDeveloper
kaynak

9

Ağırlıklı zincirleri okumalısın. Kod örneği burada.

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

Yani, set android:layout_width="0dp", app:layout_constraintHorizontal_weight="1"ve benzeri komşuları ile her görünüm bağlantısı:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

— CoolMind
kaynak

iki yıl önce yayınlanan bir başka cevap gibi bir cevap daha yayınlamanın anlamı nedir?

@Subzero, birçok kez yüksek oranda eşit cevaplar gördüm. Kod satırları bile aynıydı. Bazı yazarların benden kopyalandığını ve hatta daha fazla artıları olduğunu düşünüyorum. Bu durumda cevaplar farklıdır, ağırlıkların nasıl çalıştığını anlamak için başka kaynaklar da kullandım ConstraintLayoutve yukarıda ilk resmi almak için sadece ilk cevap yeterli değildi.

— CoolMind

3

Zincirleme eşyalarınızı aldıktan sonra, eşit aralıklı tutmak için ağırlıklarını göreli düzen gibi kullanabilirsiniz. Aşağıdaki örnek, farklı boyutlarda textViews ile eşit aralıklarla nasıl tutulacağını gösterir.

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />

— tzg
kaynak