ConstraintLayout'ta öğeler nasıl ortalanır


206

ConstraintLayoutUygulamamda uygulama düzeni yapmak için kullanıyorum . Bir bir ekran oluşturmak wheren birine ben çalışıyorum EditTextve Buttonmerkezde olmalı ve Buttonaşağıda olmalıdır EditTextbir marginTop sadece 16dp ile.

İşte benim düzeni ve ekran görüntüsü şu anda nasıl görünüyor.

activity_authenticate_content.xml

<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="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

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

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

resim açıklamasını buraya girin

Yanıtlar:


145

Güncelleme:

Zincir

Artık bu chainözelliği packed, Eugene'in cevabında açıklandığı gibi modda kullanabilirsiniz .


Yönerge

% 50 konumunda yatay bir kılavuz kullanabilir ve metni ve düğmeyi düzenlemek için alt ve üst (8dp) kısıtlamaları ekleyebilirsiniz:

<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="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

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

</android.support.constraint.ConstraintLayout>

Düzen Editörü


1
Teşekkürler @Pycpik Ne kullanıldığını anlayamadım <android.support.constraint.Guideline? Her kullandığımızda kullanmamız gerekir ConstraintLayoutmi?
N Sharma

Ne işe yarar layout_constraintGuide_percent?
N Sharma

1
Guidelineyalnızca görünümlerinizi sabitleyebileceğiniz görünmez bir öğedir. layout_constraintGuide_percentüst öğe içindeki yüzdedir. İşte 0.5% 50 yükseklik
Pycpik

Teşekkürler. Anladım. Şimdi iki TextInputEditTextve bir tane var Button. Onları ekranın ortasına yerleştirmek istiyorum. Ama şu andan itibaren pastebin.com/iXYtuXHg değil , ekran görüntüsü dropbox.com/s/k7997q2buvw76cp/q.png?dl=0
N Sharma

1
Ortadakii ortalayabilir ve bir yukarı ve bir aşağı ekleyebilir veya bir LinearLayoutve içine koyabilirsiniz .
Pycpik

336

Daha basit bir yol var. Düzen kısıtlamalarını aşağıdaki gibi ayarlarsanız ve EditText sabit boyutluysa, sınırlama düzeninde ortalanır:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

Sol / sağ çift görünümü yatay olarak orta / üst / alt çift dikey olarak ortalar. Bunun nedeni, sol, sağ veya üst, alt kısıtlamaları kendinden görünümden daha büyük olarak ayarladığınızda, görünüm iki sınırlama arasında ortalanır, yani sapma% 50'ye ayarlanır. Yanlılığı kendiniz ayarlayarak görünümü yukarı / aşağı veya sağa / sola da hareket ettirebilirsiniz. Onunla biraz oynayın ve görünümlerin konumunu nasıl etkilediğini göreceksiniz.


5
Bu, yönergeleri kullanmaktan çok daha iyi bir yaklaşımdır.
17'de ssand

48
app:layout_constraintCenter_in="parent"çok daha iyi olurdu. Ancak her zaman olduğu gibi Google bunu sağlamadı.
Gojir4

1
Bu daha uygun ve aynı zamanda bunu birçok görüşmede ve yetkililerin örneklerinde gördüm.
TapanHP

Basit, kolay anlaşılır.
Yohanes AI

2
Yönergeler daha iyidir, çünkü bir kez pazarlama onu ele geçirdiğinde gerçekleşecek karmaşık bir düzene sahip olduğunuzda, basit merkezleme artık çalışmaz. Yönergelere sahip olmak ve üst ve alt yönergelere
Nick Turner

58

Kılavuzlu çözüm, yalnızca tek satırlı EditText ile bu özel durum için çalışır. Çok satırlı EditText için çalışması için "paketlenmiş" zincir kullanmanız gerekir.

<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"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/authenticate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

İşte böyle görünüyor:

Nexus 5'te görünüm

Zincirleri kullanma hakkında daha fazla bilgiyi aşağıdaki yayınlarda okuyabilirsiniz:


Bu kesinlikle en iyi cevap. Diğer yanıtlar yalnızca bir veya iki görünüm için geçerlidir. Bu, bir, iki ve istediğiniz kadar görüntüleme için çalıştığı için daha ölçeklenebilir.
mdelolmo

22

Bir görünümü ekran boyutunun yüzdesi olarak ortalayabilirsiniz.

Bu örnek, genişlik ve yüksekliğin% 50'sini kullanı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">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Bu, ConstraintLayout sürüm 1.1.3 kullanılarak yapıldı. Sınıfta bağımlılıklarınıza eklemeyi ve yeni bir sürüm varsa sürümü artırmayı unutmayın:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

resim açıklamasını buraya girin


12

bu etiketi görünümünüze ekleyin

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

ve tasarım modunda sağ tıklayıp merkezi seçebilirsiniz.


8

ConstraintLayout içinde merkez görünümü için layout_constraintCircle öğesini kullanabilirsiniz.

<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:id="@+id/mparent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp"
            />
    </android.support.constraint.ConstraintLayout>

kısıtlama ile ana öğeye ve sıfır yarıçapa sahip görünümünüzü ana sayfanın merkezi haline getirebilirsiniz.


best.solution.ever. Tıpkı bir "app: layout_constraintCenter_in =" ebeveyn "" gibi (mevcut değil)
Bénédicte Lagouge
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.