Konsep Dasar ConstraintLayout di Android: Bagian 1

Dengan rilisnya Android 7 (Nougat), Google memperkenalkan sebuah ViewGroup baru untuk membantu mengatasi berbagai batasan yang dihadapi oleh layout yang sudah ada. Dengan nama ConstralntLayout, sistem ini menawarkan layout yang fleksibel, simple dan terintegrasi dengan Layout Editor milik Android Studio.

Artikel ini akan membahas konsep dasar ConstraintLayout sebelum kita membahas bagaimana implementasinya dalam mendesain layout XML di artikel mendatang.

Cara Kerja ConstraintLayout

ConstraintLayout merupakan sebuah ViewGroup yang mengatur posisi atau ukuran View di dalamnya secara dinamis menggunakan constraint connection.

Ada banyak konsep yang perlu dipahami untuk menguasai ConstraintLayout. Artikel ini akan membahas sebagian diantaranya yaitu:

  • Constraint
  • Margin
  • Opposing Constraint
  • Bias
  • Chain
  • Chain Style
  • Guideline

Constraint

Constraint adalah konsep yang mengatur bagaimana sebuah View diposisikan relatif terhadap View yang lain, parent, atau komponen yang disebut dengan guideline. Constraint juga bisa mengatur bagaimana layout dari sebuah tampilan merespon perubahan orientasi layar atau saat ditampilkan di ukuran layar yang berbeda.

Setiap View yang berada di dalam ConstraintLayout akan memiliki empat titik constraint di atas, kanan, bawah dan kiri.

Margin

Margin merupakan cara untuk memeberikan jarak pada suatu suatu constraint yang mengarah ke View atau ViewGroup yang lain. Bila sisi VIew tersebut tidak memiliki constriant, maka margin yang diberikan menjadi tidak berlaku.

Seperti pada gambar di atas, button Login akan selalu berjarak 100dp dari layar dan 16dp di bawah button Register berapapun ukuran layarnya.

Margin berguna saat kita ingin memberikan jarak tertentu, tapi kurang baik bila digunakan untuk memposisikan UI karen ukuran margin bisa berbeda-beda tergantung ukuran layar. Oleh karena itu agar untuk memberikan posisi yang bisa beradaptasi terhadap ukuran layar, gunakan opposing contraint.

Opposing Constraint

Dua constraint yang saling berlawanan arah diberi nama opposing constraint. Bila bagian kiri dan kanan suatu View terdapat constraint, artinya ia memiliki horizontal constraint. Bila bagian atas dan bawahnya terdapat constraint, artinya ia memiliki vertical constraint.

Yang perlu di perhatikan, saat terjadi opposing constriant, posisi dari suatu View akan menjadi persentase. Pada contoh di atas, vertical constraint memiliki bias 90% dan horizontal constriant memiliki bias 50%.

Chain

Chain merupakan konsep ConstraintLayout untuk mengelompokkan dua View atau lebih sebagai sebuah grup. Chain kemudian dapat diatur untuk menentukan ukuran maupun jarak antar View di dalam grup tersebut.

Sekelompok View dinyatakan sebagai sebuah chain apabila terhubung oleh bi-directional constriant alias constriant dua arah.

Sumber: Google Developer
Sumber: Google Developer

View pertama di sebut sebagai chain header (paling kiri atau paling atas). Pengaturan untuk keseluruhan chain dapat dilakukan dengan mengubah value dari chain header.

Chain Style

Setelah sekelompok VIew tergabung menjadi chain, selanjutnya kita bisa mengatur chain style-nya.

Sumber: Google Developer
Sumber: Google Developer
  1. Spread: Semua View didistribusikan secara merata.
  2. Spread Inside: View pertama dan terkahir akan menempel dengan ujung constriant-nya, sementara View yang lain didistribusikan secara merata diantara keduanya.
  3. Weighted: Atribut weight dapat diberikan kepada satu atau lebih View agar mengambil ruang kosong yang ada sesuai dengan persentase yang diberikan.
  4. Packaged: Semua View dimepetkan bersama.

Guideline

Constraint bisa diarahkan tidak hanya kepada View atau ViewGroup lain. Terdapat sebuah helper untuk membantu memerikan komponen yang tidak terlihat sebagai patokan untuk mengatur constraint. Patokan ini diberi nama guideline.

Guideline bisa berbentuk vertical atau horizontal dan bisa diatur untuk memiliki posisi berdasarkan ukuran fixed (seperti margin),

Comments

One response to “Konsep Dasar ConstraintLayout di Android: Bagian 1”

  1. […] Artikel ini akan melanjutkan pembahasan pada artikel sebelumnya. […]

Leave a Reply

Your email address will not be published. Required fields are marked *