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>

android android-layout android-constraintlayout

— N Sharma
kaynak

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>

— Pycpik
kaynak

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.

— binW
kaynak

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:

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

— Eugene Brusov
kaynak

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'
}

— aşkı yaşa
kaynak

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.

— behrad
kaynak

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.

— Enakhi
kaynak

best.solution.ever. Tıpkı bir "app: layout_constraintCenter_in =" ebeveyn "" gibi (mevcut değil)

— Bénédicte Lagouge

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

Güncelleme: