Chào mừng các bạn đã đến với bài viết về ConstraintLayout – Phần 2. Đây là bài viết trong các bài bổ sung cho chương trình học Android của Yellow Code Books.

Như mình có nói ở phần 1, ConstraintLayout tuy dài (bị tách ra làm hai phần lận), nhưng nó không khó. Qua bài viết đó bạn đã nắm được ý nghĩa và cách sử dụng các công cụ cơ bản nhất mà Android Studio cung cấp để thiết kế kéo-thả cho layout mới mẻ này. Phần tiếp theo này bạn sẽ biết thêm các chức năng hay ho khác của ConstraintLayout, giúp bạn có thể thiết kế được tất cả các layout mà bạn muốn.

Và chắc chắn chúng ta sẽ cùng nhau thử thực hành xây dựng một layout hoàn thiện ở cuối bài hôm nay.

Chức Năng Autoconnect (Tạo Constraint Tự Động)

Nếu như ở phần trước, bạn phải kéo kéo, neo neo thì mới có được các constraint ưng ý. Thì với một cú click chuột ở phần này, bạn đã có thể nói cho hệ thống biết nên tự tạo các constraint ngay khi bạn thả một view từ palette vào design view hoặc blueprint view.

Đó là bạn hãy nhấn vào icon toolbar được khoanh đỏ như hình trên để kích hoạt nó. Ở phần trước bạn đã thấy chức năng này bị tắt, khi đó bạn chú ý icon này sẽ có một đường gạch chéo . Khi được kích hoạt thì đường gạch chéo này sẽ biến mất.

Việc tự tạo các constraint một cách tự động như thế này theo mình thấy vẫn chưa hoàn hảo lắm, một số điểm neo chưa tạo được đúng theo ý mình. Nhưng nếu bật nó lên, thì mình không phủ nhận một điều rằng nó sẽ giúp thiết kế nhanh hơn trong một số trường hợp. Sử dụng nó hay không là tùy bạn nhé,

Bạn hãy xem sự so sánh giữa việc tắt (hình động bên trái) và bật (hình động bên phải) chức năng Autoconnect này như sau.

Chức Năng Infer Constraints (Tự Suy Luận Các Constraint)

Nghĩa tiếng Việt là do tự mình đặt. Mà nghĩ cũng đúng thôi. Vì chức năng này khi được kích hoạt sẽ tự nó tính toán, suy luận ra các constraint để khớp với bố cục hiện thời của layout. Để sử dụng tính năng này, bạn hãy tìm đến icon toolbar được khoanh đỏ như trên.

Sự khác nhau giữa tính năng Infer Constraints và Autoconnect trên kia là, Infer Constraints sẽ suy luận ra tất cả các constraint cho tất cả các view trong layout, để đạt được một bố cục như ý muốn của lập trình viên, còn Autoconnect thì sẽ tạo các constraint cho bản thân view đang được tương tác.

Chức Năng Pack

Ý nghĩa của chức năng này là Đóng gói. Nhưng không hẳn như nghĩa của nó. Theo mình thấy thì chức năng này thực chất giúp bạn kéo dãn hết không gian của view theo chiều ngang hay dọc, sự kéo dãn này không đẩy các view khác đi khỏi vị trí của chúng. Bạn sẽ dễ dàng kiểm chứng chức năng này dựa theo minh họa sau.

Chức Năng Ratio (Điều Chỉnh Kích Cỡ View Theo Tỷ Lệ)

Theo lẽ mình đã có thể nói đến chức năng này ở mục Attribute của phần trước. Nhưng ratio quá xuất sắc khiến mình tách nó ra làm một phần riêng để bạn dễ nhớ.

Chức năng này cho phép bạn tạo các view bên trong ConstraintLayout với kích thước theo tỉ lệ ngang-dọc. Chẳng hạn 16:9, hay 4:3. Khi bạn đã chỉ định ratio cho view, thì bạn sẽ phải phó mặc sự tính toán về kích thước của view cho hệ thống.

Để có thể thiết lập ratio cho view, bạn buộc phải chỉ định một trong hai giá trị (hoặc cả hai) layout_width và layout_height của view thành match_constraint (hoặc là 0dp), bạn có thể xem lại mục này ở phần trước để nhớ lại thiết lập match_constraint cho view là như thế nào.

Sau khi bạn thiết lập một trong hai hướng (hoặc cả hai) của view là match_constraint, thì ở view inspector, chỗ hình vuông đại diện cho view trong cửa sổ này, sẽ xuất hiện một hình tam giác báo hiệu cho bạn biết bạn có thể click vào đó để thiết lập ratio cho view.

Bạn có thể xem minh họa bên dưới (minh họa này có thực hiện việc kéo thả ImageView vào blueprint view, sau khi kéo các view liên quan đến image bạn phải chỉ định ngay cho nó một resource image ở cửa sổ xuất hiện sau đó, lát nữa vào phần thực hành bạn sẽ được kiểm chứng).

Có một lưu ý cho tính năng này là. Nếu như ví dụ trên, bạn chỉ định match_constraint theo một phương ngang, thì ratio chỉ giúp bạn điều chỉnh chiều ngang của view, chiều cao của view vẫn được giữ cho cố định. Tức là nếu bạn chỉ định tỷ lệ 16:9, thì hệ thống sẽ lấy chiều cao hiện tại và xem giá trị ứng với tỷ lệ 9 là bao nhiêu, sau đó sẽ tính toán cho ra chiều ngang tương ứng với tỷ lệ 16, chính vì vậy, nếu nhìn kỹ bạn sẽ thấy chiều ngang của image ở trên dường như vượt ra khỏi chiều ngang của màn hình.

Nếu chưa rõ bạn hãy xem ví dụ dưới đây, khi mà layout_width và layout_height đều được thiết lập match_constraint, thì nếu bạn nhấn nhiều lần lên hình tam giác ở góc, bạn có thể chọn được phương nào (ngang hay dọc) được hệ thống tinh chỉnh lại so với phương còn lại. Bạn chú ý phương được vẽ bằng đường thẳng đậm bên trong hình vuông của view inspector chính là phương bị tinh chỉnh so với phương gốc nhé. Nếu không có đường thẳng đậm thì hoặc là tính năng ratio đã tắt, hoặc là cả hai phương đều bị điều chỉnh. Chà nhức đầu nhỉ.

Chức Năng Guideline (Neo Constraint Vào Đường Biên)

Nếu bạn có nhiều view được canh chỉnh theo một trật tự thẳng hàng nào đó (thẳng hàng ngang hay thẳng hàng dọc), bạn có thể cân nhắc sử dụng guideline. Các guideline này là các đường thẳng không hề hiển thị lên giao diện khi bạn thực thi ứng dụng, nó chỉ được nhìn thấy khi thiết kế mà thôi, và nhờ vào các đường guideline ẩn này, bạn có thể neo các view vào nó, để tạo ra một trật tự thẳng hàng nhất định.

Chi tiết guideline hoạt động như thế nào thì bạn có thể nhìn vào ví dụ sau. Ở ví dụ dưới đây mình chỉ dùng các đường guideline theo chiều dọc (Vetical Guideline), nhưng việc sử dụng với guideline theo chiều ngang (Horizontal Guideline) cũng sẽ tương tự.

Ngoài việc canh chỉnh guideline theo biên trái như trên, bạn còn có thể nhấn vào hình tròn ở đầu guideline để thay đổi cách canh chỉnh theo biên phải, hay theo phần trăm.

Chức Năng Barrier (Neo Constraint Vào Đường Biên Động)

Nếu như guideline giúp chúng ta tạo ra các đường biên, và canh chỉnh view dựa trên các đường biên đó. Mặc dù bạn có thể di chuyển được guideline như ví dụ trên. Nhưng guideline vẫn mang một công dụng “cứng”, tức là bạn chỉ có thể chỉnh sửa các guideline khi nó còn đang ở dạng thiết kế, khi thực thi ứng dụng rồi thì guideline ở đâu view sẽ ở đó, mặc cho có sự chồng lấp giữa các view với nhau, vì ai mà biết được các kích cỡ màn hình thực tế như thế nào để mà thiết lập các guideline hợp lý.

Để giải quyết vấn đề cần phải có sự dịch chuyển động giữa các guideline với nhau, bạn nên dùng chức năng hay hơn, đó là barrier.

Bạn có thể thêm bất kỳ barrier theo hướng ngang hay dọc vào màn hình bằng cách chọn trên toolbar theo hình ảnh trên, rồi thực hiện như minh họa dưới đây.

Do ảnh động trên khá là dài nên có thể gây khó khăn cho bạn khi muốn xem lại quy trình sử dụng barrier, nên mình viết lại các bước sau.

– Như đã nói, đầu tiên bạn thêm barrier (dọc hay ngang) bằng cách chọn trên toolbar như hình trên kia. Hoặc click chuột phải vào blueprint view thì bạn cũng sẽ thấy tùy chọn tương tự.
– Sau đó bạn phải kéo các view muốn “chặn” lại một cách cơ động, bằng cách kéo thả các view đó vào barrier vừa tạo ở component tree.
– Bạn nhớ chỉ định thuộc tính barrierDirection là right, đây chính là phía mà barrier sẽ “chặn động” các view.
– Cuối cùng, bạn có thể neo các view khác, như các EditText ở ví dụ trên, vào barrier này,.
– Xong. Bạn có thể thử nghiệm tính hiệu quả của barrier bằng cách thay đổi text của các TextView. Bạn sẽ thấy barrier chạy động theo biên phải của các thành phần con của nó như thế nào. Và các view khác khi neo vào barrier cũng sẽ tự dịch chuyển như thế nào.

Chức Năng Chain (Xâu Chuỗi Các View Lại, Hay Xích Các View Lại)

Chức năng này mình cũng khá thích. Nó giúp bạn canh chỉnh vị trí của nhiều view một cách tự động. Việc canh chỉnh này giống như hệ thống đã dùng dây xích để cột chúng lại vậy, và sau đó hệ thống sẽ dàn các view đó ra hoặc co chúng lại tùy thuộc vào kích cỡ màn hình và các thiết lập của bạn. Hệ thống gọi đây là chain.

Để gom các view vào trong một chain, bạn chỉ cần chọn hết các view muốn gom bằng cách nhấn giữ phím Shift trong lúc click chọn từng view. Rồi click phải lên bất kỳ view nào trong số chúng, và chọn Chain > Create Horizontal Chain (hay Create Vertical Chain). Bạn hãy xem minh họa sau.

Bạn cũng thấy đó, sau khi gia nhập vào một chain, sẽ có một sợi xích ràng buộc các view lại với nhau, và khi đó vị trí các view sẽ dàn đều không gian của chúng.

Công dụng của chain chưa dừng lại ở đó. Bạn có thể chỉ định nhiều thể loại chain khác nhau. Các loại chain đó là.

1. Spread: Đây là kiểu dàn đều các view dựa vào không gian của chúng theo phương ngang hoặc dọc. Đây là kiểu sắp xếp mặc định khi bạn tạo mới một chain. Bạn có thể xem lại minh họa kiểu chain này ở trên kia.
2. Spread inside: Kiểu này cũng sẽ dàn đều các view, nhưng nó sẽ tôn trọng constraint của view đầu và cuối trong một chain. Như bạn thấy trên hình, nếu các view A và C đều set margin ở các biên là 0dp thì chúng sẽ dính chặt vào biên như vậy.
3. Weight: Cách này tương tự như bạn chỉ định trọng số layout_weight trong LinearLayout vậy. Để sử dụng được weight trong ConstraintLayout thì bạn phải chỉ định các view trong chain về match_constraint, rồi tìm đến thuộc tính horizontal_weight hoặc vertical_weight để thiết lập trọng số này cho từng view. Bạn sẽ hiểu rõ hơn ở minh họa phía dưới đây.
4. Packed: Kiểu “đóng gói” các view lại thành một “cục” sát vào nhau. Sau khi đóng gói các view lại xong, bạn có thể sử dụng bias để thay đổi độ lệch theo chiều ngang hoặc dọc cho các gói này (bạn nhớ để ý xem minh họa cho việc thay đổi bias với kiểu packed này ở dưới đây).

Để thay đổi từng loại chain đã nói đến trên đây, rất đơn giản, bạn hãy đưa trỏ chuột vào bất kỳ một view nào trong chain, khi thấy xuất hiện nút  ở dưới view, bạn hãy nhấn vào nó để lần lượt thay đổi qua các loại chain.

Minh họa dưới đây cho thấy chuyển đổi qua lại giữa các loại chain thứ 1 (Spread), 2 (Spread inside) và 4 (Packed). Vì loại số 3 (Weight) cần phải thay đổi chút giá trị match_constraint và weight nên mình sẽ minh họa ở sau.

Còn đây là minh họa cho chain ở loại thứ 3 (weight). Với chain này mình sẽ set trọng số cho các view lần lượt là 1-2-1. Bạn xem.

Chức Năng Group (Gom Nhóm)

Chức năng cuối cùng mà mình nói đến hơi kém quan trọng xíu. Nó không phải ViewGroup mà chúng ta từng biết. Bởi vì nó chẳng chứa đựng view nào bên trong cả. Group ở ConstraintLayout chỉ chứa địa chỉ các view, để bạn dễ dàng thiết lập một số tham số chung cho các view mà nó đang chứa đựng mà thôi, như tham số ẩn hiện như ví dụ này.

Đến đây thì các bạn đã nắm được tất cả các công cụ để tạo nên một giao diện hoàn chỉnh bằng ConstraintLayout rồi đó. Giờ thì chúng ta cùng vận dụng những điều đã biết ở hai phần của bài viết để xây dựng một giao diện hoàn chỉnh nhé.