Dengan Preview 1 dari Android Studio 2.2 Google merilis layout baru di perpustakaan dukungannya: ConstraintLayout. Dengan ConstraintLayout lebih mudah menggunakan alat Desain di Android Studio, tapi saya tidak menemukan cara untuk menggunakan ukuran relatif (persen atau 'bobot' seperti di LinearLayout). Apakah ada cara untuk mendefinisikan kendala berdasarkan persen? Misalnya, membuat Tampilan mengambil 40% layar, membuat margin 20% di antara tampilan, mengatur lebar Tampilan hingga 50% dari lebar Tampilan lainnya?

Saat ini Anda dapat melakukan ini dalam beberapa cara.

Salah satunya adalah membuat pedoman (klik kanan area desain, lalu klik tambahkan pedoman vertikal / horizontal). Anda kemudian dapat mengklik "header" pedoman untuk mengubah posisi menjadi berbasis persentase. Akhirnya, Anda dapat membatasi pandangan ke pedoman.

Cara lain adalah memposisikan tampilan menggunakan bias (persentase) dan untuk kemudian jangkar tampilan lain ke tampilan itu.

Karena itu, kami telah memikirkan cara menawarkan dimensi berdasarkan persentase. Saya tidak bisa membuat janji apa pun, tetapi itu adalah sesuatu yang ingin kami tambahkan.

Mungkin bermanfaat untuk memiliki referensi cepat di sini.

Penempatan tampilan

Gunakan panduan dengan app:layout_constraintGuide_percentseperti ini:

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

Dan kemudian Anda bisa menggunakan pedoman ini sebagai titik jangkar untuk tampilan lain.

atau

Gunakan bias dengan app:layout_constraintHorizontal_biasdan / atau app:layout_constraintVertical_biasuntuk mengubah lokasi tampilan ketika ruang yang tersedia memungkinkan

<Button
    ...
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.25"
    ...
    />

Ukuran tampilan

Nilai berdasarkan persen lainnya adalah tinggi dan / atau lebar elemen, dengan app:layout_constraintHeight_percentdan / atau app:layout_constraintWidth_percent:

<Button
    ...
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.5"
    ...
    />

Pada "ConstraintLayout1.1.0-beta1" Anda dapat menggunakan persen untuk menentukan lebar & tinggi.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

Ini akan menentukan lebar menjadi 40% dari lebar layar. Kombinasi dari ini dan pedoman dalam persen memungkinkan Anda untuk membuat tata letak berbasis persen yang Anda inginkan.

Dengan rilis baru ConstraintLayout v1.1 Anda sekarang dapat melakukan hal berikut:

<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.65" />

Ini akan membatasi tombol menjadi 20% tinggi dan 65% dari lebar tampilan induk.

Cara menggunakan Pedoman

Jawaban yang diterima sedikit tidak jelas tentang cara menggunakan pedoman dan apa "header" itu.

Langkah

Pertama-tama tambahkan Pedoman.

Pilih Guidline atau pindahkan sedikit untuk membuat kendala terlihat.

Kemudian klik lingkaran bundar ("header") hingga menjadi persentase. Anda kemudian dapat menyeret persentase ini ke 50% atau apa pun yang Anda inginkan.

Setelah itu, Anda dapat membatasi tampilan ke Pedoman untuk menjadikannya persentase dari orang tua (gunakan match_constraintpada tampilan).

Pedoman ini sangat berharga - dan aplikasi: layout_constraintGuide_percent adalah teman yang hebat ... Namun terkadang kita menginginkan persentase tanpa pedoman. Sekarang mungkin menggunakan bobot :

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

Berikut ini adalah contoh yang lebih lengkap yang menggunakan pedoman dengan bobot tambahan :

<?xml version="1.0" encoding="utf-8"?>
<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:padding="16dp"
    tools:context="android.itomerbu.layoutdemo.MainActivity">

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

    <Button
        android:id="@+id/btnThird"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/btnThird"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/btnTwoThirds"
        app:layout_constraintHorizontal_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/btnTwoThirds"
        app:layout_constraintBottom_toBottomOf="@+id/btnThird"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
</android.support.constraint.ConstraintLayout>

Dengan v1.1.2 ConstraintLayout, dimensi harus di set ke 0dpdan kemudian mengatur layout_constraintWidth_percentatau layout_constraintHeight_percentatribut ke nilai antara 0 dan 1 seperti:

<!-- 50% width centered Button -->
<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent=".5" />

(Anda tidak perlu mengatur app:layout_constraintWidth_default="percent"atau app:layout_constraintHeight_default="percent"menggunakan ConstraintLayout 1.1.2 dan versi-versi berikut)

Constraint Layout 1.0 membuat tampilan mengambil persentase layar yang diperlukan membuat dua panduan. Di Constraint Layout 1.1, ini dibuat lebih sederhana dengan memungkinkan Anda untuk membatasi tampilan dengan persentase lebar atau tinggi dengan mudah.

Bukankah ini fantastis? Semua tampilan mendukung atribut layout_constraintWidth_percent dan layout_constraintHeight_percent. Ini akan menyebabkan kendala diperbaiki pada persentase ruang yang tersedia. Jadi membuat Tombol atau memperluas TextView untuk mengisi persen layar dapat dilakukan dengan beberapa baris XML.

Misalnya, jika Anda ingin mengatur lebar tombol ke 70% layar, Anda bisa melakukannya seperti ini:

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

Harap dicatat bahwa Anda harus meletakkan dimensi yang harus digunakan sebagai persentase ke 0dp seperti yang telah kami tentukan android: layout_width ke 0dp di atas.

Demikian pula, jika Anda ingin mengatur ketinggian tombol ke 20% layar, Anda dapat melakukannya seperti ini:

<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_constraintHeight_percent="0.2" />

Lihat! kami telah menentukan android: layout_height hingga 0dp saat ini karena kami ingin tombol menggunakan tinggi sebagai persentase.

Coba kode ini. Anda dapat mengubah persentase tinggi dan lebar dengan aplikasi: layout_constraintHeight_percent dan aplikasi: layout_constraintWidth_percent.

<?xml version="1.0" encoding="utf-8"?>
<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="#FF00FF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".4"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Gradle:

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

Anda dapat menggunakannya app:layout_constraintVertical_weightsama seperti layout_weightdilinearlayout

<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">

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button5"
    app:layout_constraintVertical_weight="1"/>

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/button4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>

CATATAN: app:layout_constraintVertical_weight( app:layout_constraintHorizontal_weight) akan bekerja dengan android:layout_width="0dp"(android:layout_height="0dp"

Untuk seseorang yang mungkin berguna, Anda dapat menggunakan layout_constraintDimensionRatioim tampilan anak apa pun di dalam a ConstraintLayoutdan kami dapat menentukan Tinggi atau Lebar rasio dari dimensi lain (setidaknya satu harus 0dp baik lebar atau tinggi) contoh

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

dalam hal ini rasio aspek 16: 9 app:layout_constraintDimensionRatio="16:9" Anda dapat menemukan lebih banyak info DI SINI

Saya tahu ini bukan secara langsung apa yang awalnya diminta OP tetapi ini banyak membantu saya dalam situasi ini ketika saya memiliki pertanyaan serupa .. Menambahkan ini untuk orang yang ingin mengubah ukuran jendela tata letak (yang saya gunakan secara teratur), melalui kode . Tambahkan ini ke onCreate Anda dalam aktivitas pertanyaan. (Mengubahnya menjadi 80%)

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

int width = dm.widthPixels;
int height = dm.heightPixels;

getWindow().setLayout((int)(width * 0.8), (int)(height * 0.8));

Cukup, ganti saja, dalam tag pedoman Anda

app:layout_constraintGuide_begin="291dp"

dengan

app:layout_constraintGuide_percent="0.7"

di mana 0,7 berarti 70%.

Juga jika sekarang Anda mencoba untuk menyeret pedoman, nilai yang diseret sekarang akan muncul di% age.

Menggunakan Pedoman, Anda dapat mengubah posisi menjadi berbasis persentase

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

Anda juga bisa menggunakan cara ini

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"