Bagaimana cara membuat ConstraintLayout berfungsi dengan nilai persentase?


207

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?


3
Dukungan persentase untuk lebar atau tinggi ditambahkan di version 1.1ConstraintLayout. Lihat "Dimensi persen" di developer.android.com/reference/android/support/constraint/… atau beberapa jawaban yang lebih baru.
sunadorer

Jawaban:


225

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.


1
0 down vote Bisakah saya meminta tindak lanjut? Saya mencoba menetapkan ImageView menjadi lebar 60% tetapi mempertahankan rasio aspek 16: 9. Saya ingin lebarnya diperbaiki, tetapi ketinggian ImageView menjadi dinamis. Apakah itu mungkin dengan ConstraintLayout? Saya berjuang untuk membuatnya berfungsi - Saya berakhir dengan nilai lebar / tinggi tetap 0 kecuali saya menentukan dimensi hardcoded.
MattWilliams89

3
@ MattWilliams89 Ada parameter yang disebut layout_constraintDimensionRatio, saya kira itu mungkin berguna dalam kasus Anda, tulis "16: 9" di sana. Saya tidak berhasil mencoba membangun tata letak Anda dengan itu, gambar menjadi besar
Yury Fedorov

1
@RomainGuy bagaimana Anda mengubah posisi menjadi persentase pada tajuk pedoman? Saya telah mencoba klik kanan dan tidak ada yang muncul
Edijae Crusar

21
Bagi mereka yang bertanya-tanya apa sebenarnya tajuk pedoman itu, itu adalah lingkaran yang memiliki panah atas atau bawah atau simbol persentase. Mengklik itu beralih antara aplikasi: layout_constraintGuide_begin, app: layout_constraintGuide_end, dan aplikasi: layout_constraintGuide_percent dalam XML. Saya mengalami masalah kecil (pada ConstraintLayout versi 1.0.0-alpha8 di mana saya harus mengklik pedoman, tahan mouse saya, dan seret ke lingkaran untuk beralih ini di editor, tapi saya yakin bug ini akan segera diperbaiki .
Lustig

4
Anda juga dapat mengatur ini dalam XML layout menggunakanapp:layout_constraintGuide_percentage
piratemurray

215

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

3
mengapa lebar diatur ke 1dp?
user924

1
@ user924 Masuk akal untuk memberikan pedoman lebar 0dp, saya tidak tahu mengapa pengembang yang menerapkan ini memutuskan 1dp. Mungkin karena 0dp dianggap sebagai "peregangan" saat menggunakan beban.
Amir Uval

3
@ user924: 0dpdigunakan dalam ConstraintLayout untuk menunjukkan ukuran yang dinamis. Lihat developer.android.com/reference/android/support/constraint/…
serv-inc

1
@ serv-inc tapi di sini 1dp, bukan 0dp.. itu yang saya bicarakan
user924

3
@ user924: Anda perlu mengaturnya menjadi lebar. 0dpsudah disediakan, sehingga 1dptampaknya masuk akal.
serv-inc

109

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.


6
Dalam tata letak kendala 1.0.2 nilai persen untuk layout_constraintWidth_default tidak didukung. Saya pikir cara yang benar adalah dengan menggunakan Pedoman.
vovahost

1
itu bekerja dengan Android Studio 3.0 dibangun pada 20 Oktober 2017
douarbou

5
Seperti yang dinyatakan dalam jawaban ini ditambahkan di version 1.1ConstraintLayout. Tambahan _default="percent"tidak diperlukan lagi pada versi stabil! Lihat "Dimensi persen" di developer.android.com/reference/android/support/constraint/…
sunadorer

@hoford, untuk Tampilan yang berisi teks, yang ukurannya harus didefinisikan dalam spsatuan, bagaimana mungkin ukuran teks menjadi proporsional otomatis dengan ukuran tampilan (yang, dengan sendirinya, ditentukan secara proporsional dengan ukuran total tata letak, yaitu dalam 'persen') ?
Malcolm

77

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.


1
bagi saya bekerja hanya ketika saya berubah dari "android:" ke "app:" -> app: layout_constraintHeight_percent = "0,2"
Kirill Karmazin

Ini adalah suatu keharusan bagi saya ketika mengikuti tata letak cairan desain material. material.io/design/layout/…

@Adam, untuk Tampilan yang berisi teks, yang ukurannya harus didefinisikan dalam spsatuan, bagaimana mungkin ukuran teks menjadi proporsional otomatis dengan ukuran tampilan (yang, dengan sendirinya, ditentukan secara proporsional dengan ukuran total tata letak, yaitu dalam 'persen') ?
Malcolm

1
@ Bliss Kedengarannya seperti ini bisa membantu: developer.android.com/guide/topics/ui/look-and-feel/… Saya belum pernah menggunakannya sendiri.
Adam

43

Cara menggunakan Pedoman

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

Langkah

Pertama-tama tambahkan Pedoman.

masukkan deskripsi gambar di sini

Pilih Guidline atau pindahkan sedikit untuk membuat kendala terlihat.

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini


Di mana 'tajuk' harus terlihat? Itu tidak muncul dalam pandangan saya.
Marcel50506

@ Marcel50506, pastikan tampilan Design dan Blueprint ditampilkan. Itu akan memberi Anda kesempatan terbaik untuk bisa melihatnya. Jika Anda dapat melihat garis pedoman, coba klik untuk memilihnya. Jika Anda tidak dapat melihat garis, maka coba klik pada item pedoman dalam menu Pohon Komponen yang seharusnya berada di sebelah kiri (dengan asumsi Anda sudah menambahkan panduan).
Suragch

1
Saya tidak melihat lingkaran, tetapi ketika mengklik di sebelah kiri pedoman saya dapat mengubahnya menjadi persentase .. Masalah render saya pikir. Terima kasih.
Marcel50506

Ini adalah jawaban terbaik karena mengusulkan pendekatan tata letak yang lebih baik. Kami dapat menyelaraskan banyak tampilan pada pedoman dasar alih-alih menambahkan persentase hanya pada satu tampilan
Nguyen Minh Hien

33

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>

2
@ Plumbus - Bobot setara dengan persentase (persen apa pun dapat dikonversi secara matematis menjadi bobot dan sebaliknya). Dengan menjadi pemilih pada terminologi Anda kehilangan titik jawabannya.
Scott Biggs

11

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)


10

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.

masukkan deskripsi gambar di sini

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.


8

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

masukkan deskripsi gambar di sini


7

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"


5

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


3

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));

2

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.


2

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"
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.