[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ì ?
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 :
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
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ị.
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
Để 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