[Android Cơ Bản] ConstraintLayout trong Android – Phần 1

Hi các em, thầy có kênh youtube để các em xem lại các video livestream, đừng quên like and subcribe để nhận thông báo về video mới nhất nhé. 🙂

http://bit.ly/VideosAndroidCoBan

Trong bài ngày hôm nay, thầy giới thiệu tới các em layout để kéo thả trong thiết kế giao diện Android là “ConstraintLayout”

ConstraintLayout là gì ?

Các thành phần giao diện trong CL được liên kết với nhau

Tương tự như RelativeLayout , các thành phần giao diện nằm trong CL (ConstraintLayout) đều có các mối quan hệ ràng buộc với nhau, tuy nhiên với CL chúng ta có thể dễ dàng kéo thả, tùy chỉnh các thuộc tính của các Views 1 cách dễ dàng và tiện lợi – kéo thả theo đúng nghĩa đen 😀

Thêm ConstraintLayout vào dự án

Trên phiên bản Android Studio hiện tại CL được tự động thêm vào dự án nên các em không cần thêm nữa nhé 🙂

Chuyển đổi layout khác thành ConstraintLayout

Android Studio hỗ trợ chuyển đổi 1 layout bất kì sang ConstraintLayout với 1 vài thao tác đơn giản sau :

Mở file xml giao diện, tìm tới mục Design / Component Tree click chuột phải chọn “Convert XXX to ConstraintLayout”

Thêm và xóa liên kết hoặc “neo” các views trong ConstraintLayout

Khi các em kéo thả 1 view bất kì vào trong ConstraintLayout, view đó sẽ được hiển thị với 1 hình chữ nhật có 4 điểm liên kết hình tròn đại diện cho 4 phía TOP, BOTTOM, RIGHT và LEFT, click chuột vào kéo tới View cần liên kết

Hoặc chúng ta có thể click vào view đó rồi truy cập Attribute / Create a connection (+)

Khi liên kết được tạo, chương trình sẽ tự động gán margin (căn lề ngoài) cho 2 views được liên kết với nhau

Để xóa liên kết giữa 2 views, chỉ cần click vào ô tròn
Hoặc muốn xóa tất cả liên kết của 1 view, chúng ta chỉ cần click vào view đó vào lựa chọn icon phía trên thanh công cụ của tab design

Thiết lập vị trí giữa 2 views

Chúng ta có thể thiết lập liên kết giữa 2 views hoặc vị trí hiển thị thông qua liên kết như hình

Căn lề

Tương tự như thuộc tính Align ở RelativeLayout, chúng ta có thể căn lề thẳng nhau cho 2 views trở lên và có hỗ trợ “offset” – tức là vừa căn lề bằng nhau + thêm 1 khoảng nữa . Các em xem số 24 trong hình trên

Để sử dụng căn lề – Align chúng ta có thể kéo liên kết hoặc bôi đen nhiều views và sử dụng công cụ sau : (công cụ tương tự như Photoshop 😀 )

Left Edges : Căn theo lề trái

Horizontal Center : Căn các views thẳng nhau theo trục dọc

Right Edges : Căn theo lề phải

Top Edges : Căn theo lề trên cùng

Vertical Center : Căn các views thẳng nhau theo trục ngang

Bottom Edges : Căn theo lề dưới cùng

Baselines : Căn theo nội dung là view hiển thị.

Căn lề theo baselines

Guidelines

là tính năng tuyệt vời trong ConstraintLayout, giúp tạo 1 đường kẻ nét đứt theo chiều ngang hoặc dọc trên màn hình có vị trí được thiết lập theo đơn vị dp hoặc %, đường kẻ này ko có tác dụng để hiển thị giao diện mà chỉ dùng để liên kết, căn lề cho các view

Để sử dụng Guidelines, các em truy cập công cụ như sau :

Chúng ta có thể lựa chọn thêm Guideline theo chiều dọc hoặc ngang, nếu bạn nào đã từng sử dụng photoshop sẽ rất quen thuộc với Guideline này

Barrier

Tương tự như Guidelines, barrier là 1 đường kẻ nét đứt ko dùng để hiển thị và sử dụng như 1 view để căn lề, liên kết cho các view khác

Barrier tạo ra 1 đường nét đứt để căn lề giữa các views hoặc 1 nhóm các view

Để sử dụng Barrier, các em dùng nút trên thanh công cụ của tab design

Sau đó kéo các views muốn căn lề thông qua Component Tree, lựa chọn barrierDirection ở bên ô Atributes

Constraint bias

1 chức năng tuyệt vời nữa của ConstraintLayout đó là chỉnh vị trí tương đối theo % theo chiều ngang hoặc dọc của 1 view

Như vậy thầy đã giới thiệu tới các em 60% các tính năng của ConstraintLayout rồi. phần cơ bản còn lại thầy sẽ viết tiếp trong bài thứ 2 nhé . Ngoài ra còn 1 bài nâng cao với ConstraintLayout, các em nhớ like fanpage hoặc tham gia nhóm học Android để nhận thông tin nhé. Chúc các em 1 ngày học tập, làm việc vui vẻ 🙂

Fanpage : https://fb.me/HuyNguyenAndroid/
Youtube : http://bit.ly/VideosAndroidCoBan
Website : http://www.dotplays.com
Group hỗ trợ của thầy : http://bit.ly/GroupHoTroHocAndroid

Website : http://www.dotplays.com Group hỗ trợ của thầy : http://bit.ly/GroupHoTroHocAndroid