GUIDELINES, BARRIERS, CHAINS AND GROUPS trong CONSTRAINTLAYOUT

ContraintLayout hẳn đã còn còn lạ lẵm đối với mỗi ta, dù có thể các bạn chưa dùng nó lần nào nhưng tôi chắc rằng bạn đã đã có lần thấy hoặc nghe qua về nó. Tôi sẽ chỉ nói qua về nó như sau. ContraintLayout nằm trong gói thư viện android support thân thiện với API level 9 trở lên, loại viewgroup này được đưa ra nhằm giải quyết việc giản thiểu sự phức tạp hóa khi làm layout, giới hạn kiểu làm cấp bậc trong layout, từ đó performent của app sẽ tốt hơn.
Trong phạm vi bài viết này tôi sẽ giới thiệu cho các bạn một vài chức năng mới có trong ConstraintLayout với tên GuideLines, Barriers, Chains, Groups
quan tâm các chức năng này chỉ có mặt trên Android Studio 3.0 beta 5 và version beta của ConstraintLayout, đảm bảo sắp tới trong bản phát hành chính thức của Android Studio 3.0 sẽ có những chức năng này.
Để dùng bản beta của ConstraintLayout này thì hãy đảm bảo rằng bạn đã thêm dependency sau vào *build.gradle ở app level

    implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta1' 

GuideLines

GuideLines là một giao diện trực quan nhỏ giúp đỡ cho việc design của bạn. Các View có thể được sắp xếp trong guidelines 1 cách dễ hiểu.
Guildelines có thể quy định dp start hoặc end của màn hình hoặc chúng có thể hiển thị ra phần trăm của chiều dài màn hình. GuildeLines có nhiều chế độ hiển thị cho bạn để căn chỉnh tốt hơn layout của mình.
Để tạo 1 guidelines thì làm như sau:


Guildelines trong ConstraintLayout

Nếu bạn hiếu kì xem guidelines trong xml nó như thế nào thì nó sẽ như sau:

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

Barriers

Barriers là một ntrong những chức năng ưa thích của tôi trong ConstraintLayout. 1 barrier là một view vô hình nó có thể chứa tham chiếu đến các view khác. Nếu các view trong barrier đổi khác kích thước thì barrier sẽ điều chỉnh kích thước của nó sao cho chiều dài và chiều rộng lớn nhất có thể. Barriers có thể theo chiều ngang hoặc chiều dọc và nó có thể tạo ra ở top, bottom, left, right của view mà nó tham chiếu đến, các view khác có thể rằng buộc bản thân chúng đến barrier.
sau đây là ví dụ về việc tạo barrier từ 2 view và rằng buộc chúng. Như bạn thấy, khi điều chỉnh kích cỡ của TextView thì barrier đổi khác kích thước của chúng theo view mà nó đã rằng buộc.

Đây là những gì bạn thấy khi nó ở trong xml:

    <android.support.constraint.Barrier         android:id="@+id/barrier"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         app:barrierDirection="right"         app:constraint_referenced_ids="button_example,text_view_status" /> 

Thuộc tính app:constraint_referenced_ids chứa list các id của view mà barrier tham chiếu đến

Chains

Chains cấp quyền bạn điều khiển khoảng trống giữa các thành phần và cách mà các thành phần dùng khoảng trống đó. Để tạo chains , chọn thành phần mà bạn muốn là 1 thành phần của chains , tiếp theo chuột phải chon "Chains" để tạo theo chiều ngang hoặc chiều dọc

Chains có 4 chế độ: spread_inside, packed, spread vaf weighted. sau đây là hình ảnh ví dụ:

Trong XML 1 view nếu có dùng chains thì sẽ như sau:

    <Button         android:id="@+id/button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         app:layout_constraintEnd_toStartOf="@+id/button_two"         app:layout_constraintHorizontal_chainStyle="packed"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toBottomOf="@+id/textView"         tools:text="1" /> 

Groups

Với groups bạn có thể nhóm các view lại với nhau một cách logic. Đừng nhầm lẫn với các GroupView thông thường của Android nhé. Group trong ConstraintLayout chỉ chứa các tham chiếu đến các view ids và sẽ không chứa các view bên trong nó. Với group, bạn có thể set việc hiển thị cho tất cả view mà group chứa đến . Nó sẽ hữu dụng khi mà bạn dùng để hiển thị màn hình lỗi hoặc loading khi mà 1 vài thành phần của view cần ẩn hiện.

Hãy cùng xem cách dùng nó trong XML nhé:

    <android.support.constraint.Group         android:id="@+id/group"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         app:constraint_referenced_ids="button_load,text_view_status" /> 

Thuộc tính app:constraint_referenced_ids chưa list id của view mà group tham chiếu đến

Như vậy là tôi vừa giới thiệu qua 1 vài chức năng mới trong ConstraintLayout , rất hữu dụng phải không nào, mong rằng qua bài viết này các bạn thể tìm hiểu thêm và dùng thuần thục ConstraintLayout để áp dụng vào công việc hiểu quả hơn. Mong sớm gặp lại các bạn vào bài viết sau.
Tham khảo: CONSTRAINTLAYOUT – GUIDELINES, BARRIERS, CHAINS AND GROUPS

Nguồn viblo.asia