Perbedaan antara ConstraintLayout dan RelativeLayout

Saya bingung tentang perbedaan antara ConstraintLayoutdan RelativeLayout. Bisakah seseorang tolong beri tahu saya perbedaan yang tepat di antara mereka?

Tujuannya ConstraintLayoutadalah untuk mengoptimalkan dan meratakan hierarki tampilan tata letak Anda dengan menerapkan beberapa aturan untuk setiap tampilan agar tidak bersarang.

Aturan mengingatkan Anda tentang RelativeLayout, misalnya mengatur kiri ke kiri dari beberapa tampilan lainnya.

app:layout_constraintBottom_toBottomOf="@+id/view1"

Tidak seperti RelativeLayout, ConstraintLayoutmenawarkan biasnilai yang digunakan untuk memposisikan tampilan dalam hal 0% dan 100% horizontal dan vertikal offset relatif terhadap pegangan (ditandai dengan lingkaran). Persentase ini (dan fraksi) menawarkan posisi tampilan yang mulus di seluruh kepadatan dan ukuran layar yang berbeda.

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

Pegangan dasar (pipa panjang dengan sudut bulat, di bawah pegangan lingkaran) digunakan untuk menyelaraskan konten tampilan dengan referensi tampilan lain.

Pegangan kotak (di setiap sudut tampilan) digunakan untuk mengubah ukuran tampilan dalam dps.

Ini sepenuhnya berdasarkan pendapat dan kesan saya tentang ConstraintLayout

Layout Relatif dan Constraint Layout yang setara dengan properti

(1) Tata Letak Relatif:

android:layout_centerInParent="true"    

(1) Setara Kendala setara:

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

(2) Tata Letak Relatif:

android:layout_centerHorizontal="true"

(2) Setara Kendala Setara:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3) Tata Letak Relatif:

android:layout_centerVertical="true"    

(3) Setara Kendala Setara:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4) Tata Letak Relatif:

android:layout_alignParentLeft="true"   

(4) Setara Kendala Setara:

app:layout_constraintLeft_toLeftOf="parent"

(5) Tata Letak Relatif:

android:layout_alignParentStart="true"

(5) Setara Kendala Setara:

app:layout_constraintStart_toStartOf="parent"

(6) Tata Letak Relatif:

android:layout_alignParentRight="true"

(6) Setara Kendala Setara:

app:layout_constraintRight_toRightOf="parent"

(7) Tata Letak Relatif:

android:layout_alignParentEnd="true"    

(7) Setara Kendala setara:

app:layout_constraintEnd_toEndOf="parent"

(8) Tata Letak Relatif:

android:layout_alignParentTop="true"

(8) Setara Kendala Setara:

app:layout_constraintTop_toTopOf="parent"

(9) Tata Letak Relatif:

android:layout_alignParentBottom="true" 

(9) Setara Kendala Setara:

app:layout_constraintBottom_toBottomOf="parent"

(10) Tata Letak Relatif:

android:layout_alignStart="@id/view"

(10) Setara Kendala Setara:

app:layout_constraintStart_toStartOf="@id/view"

(11) Tata Letak Relatif:

android:layout_alignLeft="@id/view" 

(11) Setara Kendala Setara:

app:layout_constraintLeft_toLeftOf="@id/view"

(12) Tata Letak Relatif:

android:layout_alignEnd="@id/view"  

(12) Setara Kendala Setara:

app:layout_constraintEnd_toEndOf="@id/view"

(13) Tata Letak Relatif:

android:layout_alignRight="@id/view"

(13) Setara Kendala Setara:

app:layout_constraintRight_toRightOf="@id/view"

(14) Tata Letak Relatif:

android:layout_alignTop="@id/view"  

(14) Setara Kendala Setara:

app:layout_constraintTop_toTopOf="@id/view"

(15) Tata Letak Relatif:

android:layout_alignBaseline="@id/view" 

(15) Setara Kendala Setara:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16) Tata Letak Relatif:

android:layout_alignBottom="@id/view"

(16) Setara Kendala Setara:

app:layout_constraintBottom_toBottomOf="@id/view"

(17) Tata Letak Relatif:

android:layout_toStartOf="@id/view"

(17) Setara Kendala setara:

app:layout_constraintEnd_toStartOf="@id/view"

(18) Tata Letak Relatif:

android:layout_toLeftOf="@id/view"  

(18) Setara Kendala Setara:

app:layout_constraintRight_toLeftOf="@id/view"

(19) Tata Letak Relatif:

android:layout_toEndOf="@id/view"

(19) Setara Kendala setara:

app:layout_constraintStart_toEndOf="@id/view"

(20) Tata Letak Relatif:

android:layout_toRightOf="@id/view"

(20) Setara Kendala setara:

app:layout_constraintLeft_toRightOf="@id/view"

(21) Tata Letak Relatif:

android:layout_above="@id/view" 

(21) Setara Kendala setara:

app:layout_constraintBottom_toTopOf="@id/view"

(22) Tata Letak Relatif:

android:layout_below="@id/view" 

(22) Setara Kendala setara:

app:layout_constraintTop_toBottomOf="@id/view"

Dilaporkan oleh kinerja @davidpbr ConstraintLayout

Saya membuat dua layout 7-anak yang sama, masing-masing dengan orangtua ConstraintLayoutdan RelativeLayout. Berdasarkan alat penelusuran metode Android Studio, tampaknya ConstraintLayoutmenghabiskan lebih banyak waktu di onMeasure dan melakukan pekerjaan tambahan di onFinishInflate.

Perpustakaan yang digunakan ( support-v4, appcompat-v7...):

com.android.support.constraint:constraint-layout:1.0.0-alpha1

Perangkat / versi Android direproduksi pada: Samsung Galaxy S6 (SM-G920A. Maaf, tidak ada atm Nexus). Android 5.0.2

Perbandingan penelusuran metode cepat:

Contoh repo Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

Berikut ini perbedaan / keunggulannya:

1. Constraint Layout memiliki kekuatan ganda, baik Relative Layout maupun Linear Layout: Mengatur posisi relatif tampilan (seperti Layout Relative) dan juga mengatur bobot untuk UI dinamis (yang hanya mungkin dalam Linear Layout).

2. Penggunaan yang sangat kuat adalah pengelompokan elemen dengan membentuk rantai. Dengan cara ini kita dapat membentuk sekelompok tampilan yang secara keseluruhan dapat ditempatkan dengan cara yang diinginkan tanpa menambahkan lapisan hierarki lain hanya untuk membentuk kelompok tampilan lain.

3. Selain bobot, kita dapat menerapkan bias horizontal dan vertikal yang tidak lain adalah persentase perpindahan dari pusat. (Bias 0,5 berarti sejajar terpusat. Nilai apa pun yang kurang atau lebih berarti gerakan yang sesuai dalam arah masing-masing).

4. Fitur lain yang sangat penting adalah menghormati dan menyediakan fungsionalitas untuk menangani tampilan GONE sehingga tata letak tidak pecah jika beberapa tampilan diatur ke GONE melalui kode java. Lebih banyak dapat ditemukan di sini: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5. Memberikan kekuatan penerapan kendala otomatis dengan menggunakan cetak biru dan alat Editor Visual yang membuatnya mudah untuk merancang halaman.

Semua fitur ini mengarah pada perataan hierarki tampilan yang meningkatkan kinerja dan juga membantu dalam membuat UI yang responsif dan dinamis yang dapat lebih mudah beradaptasi dengan berbagai ukuran dan kepadatan layar.

Inilah tempat terbaik untuk belajar dengan cepat: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

Perbedaan besar adalah bahwa ConstraintLayout menghargai kendala bahkan jika tampilan hilang. Jadi tidak akan merusak tata letak jika Anda memiliki rantai dan Anda ingin membuat tampilan menghilang di tengah.

Selain jawaban @ dhaval-jivani.

Saya telah memperbarui proyek github project ke versi terbaru dari layout kendala v.1.1.0-beta3

Saya telah mengukur dan membandingkan waktu metode onCreate dan waktu antara dimulainya onCreate dan akhir pelaksanaan metode preformDraw terakhir yang terlihat di monitor CPU. Semua tes dilakukan pada Samsung S5 mini dengan Android 6.0.1 Di sini hasil:

Awal baru (pembukaan layar pertama setelah peluncuran aplikasi)

Tata Letak Relatif

OnCreate: 123ms

Waktu preformDraw terakhir - Waktu OnCreate: 311.3ms

Tata Letak Kendala

OnCreate: 120,3ms

Waktu preformDraw terakhir - Waktu OnCreate: 310ms

Selain itu, saya telah memeriksa tes kinerja dari artikel ini , di sini kode dan menemukan bahwa pada loop menghitung kurang dari 100 varian tata letak kendala lebih cepat selama pelaksanaan menggembungkan, mengukur, dan tata letak kemudian varian dengan Relative Layout. Dan pada perangkat Android lama, seperti Samsung S3 dengan Android 4.3, perbedaannya lebih besar.

Sebagai kesimpulan saya setuju dengan komentar dari artikel :

Apakah perlu untuk mengubah tampilan lama beralih dari RelativeLayout atau LinearLayout?

Seperti biasa: Tergantung 🙂

Saya tidak akan melakukan refactor apa pun kecuali Anda memiliki masalah kinerja dengan hierarki tata letak saat ini atau Anda ingin tetap membuat perubahan signifikan pada tata letak. Meskipun saya belum mengukurnya akhir-akhir ini, saya belum menemukan masalah kinerja di rilis terakhir. Jadi saya pikir Anda harus aman menggunakannya. tetapi - seperti yang saya katakan - jangan hanya bermigrasi untuk bermigrasi. Lakukan saja, jika ada kebutuhan dan manfaat darinya. Untuk tata letak baru, saya hampir selalu menggunakan ConstraintLayout. Ini jauh lebih baik dibandingkan dengan apa yang kita miliki sebelumnya.

Secara resmi, ConstraintLayoutadalah jauh lebih cepat

Dalam rilis N Android, ConstraintLayoutkelas menyediakan fungsionalitas yang mirip RelativeLayout, tetapi dengan biaya yang jauh lebih rendah.

Pertanyaan sebenarnya adalah, apakah ada alasan untuk menggunakan tata letak selain tata letak kendala? Saya yakin jawabannya mungkin tidak.

Bagi mereka yang bersikeras bahwa mereka ditujukan untuk programmer pemula atau sejenisnya, mereka harus memberikan beberapa alasan bagi mereka untuk lebih rendah daripada tata letak lainnya.

Layout kendala lebih baik dalam segala hal (harganya sekitar 150 ribu dalam ukuran APK.). Mereka lebih cepat, mereka lebih mudah, mereka lebih fleksibel, mereka bereaksi lebih baik terhadap perubahan, mereka memperbaiki masalah ketika barang hilang, mereka menyesuaikan diri lebih baik untuk jenis layar yang sangat berbeda dan mereka tidak menggunakan banyak loop bersarang dengan panjang itu ditarik struktur pohon untuk semuanya. Anda dapat meletakkan apa saja di mana saja, sehubungan dengan apa pun, di mana saja.

Mereka agak kacau pada pertengahan 2016, di mana editor tata letak visual tidak cukup baik, tetapi mereka sampai pada titik bahwa jika Anda memiliki tata letak sama sekali, Anda mungkin ingin serius mempertimbangkan menggunakan tata letak kendala, bahkan ketika melakukan hal yang sama dengan RelativeLayout, atau bahkan sederhana LinearLayout. FrameLayoutsjelas masih punya tujuan. Tapi, saya tidak bisa melihat membangun apa pun pada saat ini. Jika mereka mulai dengan ini, mereka tidak akan menambahkan yang lain.

Kesimpulan yang bisa saya buat adalah

1) Kita dapat melakukan desain UI tanpa menyentuh bagian kode xml , sejujurnya saya merasa google telah menyalin bagaimana UI dirancang di aplikasi iOS , masuk akal jika Anda terbiasa dengan pengembangan UI di iOS, tetapi dalam tata letak yang relatif sulit untuk mengatur kendala tanpa menyentuh desain xml .

2) Kedua memiliki hierarki tampilan datar tidak seperti tata letak lainnya, demikian juga kinerja yang lebih baik daripada tata letak relatif yang mungkin Anda lihat dari jawaban lain

3) Ia juga memiliki hal-hal tambahan selain dari tata letak relatif yang dimiliki, seperti penentuan posisi relatif melingkar di mana kita dapat memposisikan tampilan lain relatif terhadap yang ini pada radius tertentu dengan sudut tertentu yang tidak dapat dilakukan dalam tata letak relatif

Saya mengatakannya lagi, mendesain UI menggunakan layout kendala sama dengan mendesain UI di iOS, jadi di masa depan jika Anda bekerja di iOS Anda akan merasa lebih mudah jika Anda telah menggunakan layout kendala

Satu-satunya perbedaan yang saya perhatikan adalah bahwa hal-hal yang diatur dalam tata letak relatif melalui seret dan lepas secara otomatis memiliki dimensinya relatif terhadap elemen-elemen lain yang disimpulkan, jadi ketika Anda menjalankan aplikasi apa yang Anda lihat adalah apa yang Anda dapatkan. Namun dalam tata letak kendala bahkan jika Anda menarik dan melepas elemen dalam tampilan desain, ketika Anda menjalankan aplikasi hal-hal yang mungkin bergeser. Ini dapat dengan mudah diperbaiki dengan secara manual mengatur kendala atau, langkah yang lebih berisiko adalah dengan mengklik kanan elemen di pohon komponen, memilih sub menu tata letak kendala, lalu mengklik 'menyimpulkan kendala'. Semoga ini membantu