(Kinh nghiệm) Auto layout và Size classes trong iOS - Phần 2

Ở phần 1 mình đã hướng dẫn căn bản về Auto Layout và Size Classes, nếu bạn chưa biết gì về Auto Layout trên iOS xin hãy xem qua phần 1 tại đây. Phần 2 này mình xin đi chi tiết về cách dùng những constraint khi làm Auto Layout.

• Tab thứ 1 (Align): Tab này giúp chúng ta canh chỉnh đối tượng này theo đối tượng kia, vì thế ta phải chọn từ 2 đối tượng này trở lên thì mình mới có thể sử dụng được. Lưu ý: Trước tên có icon để minh hoạ từng chức năng. 

- Leading Edges: Dùng để canh 2 đối tượng đó theo cạnh bên trái.

- Trailing Edges: Dùng để canh 2 đối tượng đó theo cạnh bên phải.

- Top Edges: Dùng để canh 2 đối tượng đó theo cạnh ở trên.

- Bottom Edges: Dùng để canh 2 đối tượng đó theo cạnh ở dưới.

- Horizontal Centers: Dùng để canh 2 đối tượng đó ở chính giữa theo chiều ngang.

- Vertical Centers: Dùng để canh 2 đối tượng đó ở chính giữa theo chiều dọc.

- Baselines: Dùng để canh 2 đối tượng đó theo đường cố định. Mình thường dùng cái này để canh chỉnh Label. Để xem thêm thông tin Baseline xin xem thêm tại đây.

- Horizontal Centers in Container: Dùng để canh 1 hoặc 2 đối tượng đó ở chính giữa đối tượng cha chứa nó, theo chiều ngang.

- Vertical Centers in Container: Dùng để canh 1 hoặc 2 đối tượng đó ở chính giữa đối tượng cha chứa nó, theo chiều dọc.

Khi nhấn vào checkbox của Update Frames sẽ ra màn hình như bên dưới: 

Chức năng này dùng để chúng ta update lại frame theo những thông số constraint mà mình sẽ tạo.

- None: Không cập nhật

- Items of New Constraints: Chỉ cập nhật những frame có liên quan đến đối tượng này và những đối tượng khác có liên quan đến đối tượng sắp được thêm vào.

- All Frames in Contrainer: Cập nhật tất cả những frame trong khung chứa này luôn.

• Tab thứ 2 (Pin): Tab này giúp chúng ta cố định những đối tượng vào những đối tượng khác ( ví dụ như view cha, hoặc những đối tượng con nằm kế bên,...). Bạn nên ưu tiên pin đối tượng từ trên xuống dưới hay từ dưới lên trên.

- 4 ô textfields ở mỗi hướng chỉ vị trí hiện tại đang cách đối tượng gần nó bao nhiêu, nếu ta muốn khoảng cách bao nhiêu thì ta có thể nhập số vào từng ô tương ứng và chọn những hướng mình muốn pin nó vào (hiện tại chưa chọn nên màu nhạt).
- Constrain to margins: Checkbox này dùng để pin đối tượng này so với đường margin của đối tượng, mặc định đường margin này có giá trị là 16 ppi. Vì thế mặc dù mình đang cách bên trái là 20 ppi nhưng trên hình hiển thị chỉ có 4 ppi.
Lưu ý: Theo mình mọi người không nên dùng chức năng này để canh chỉnh vì có thể sẽ bị crash ứng dụng khi chạy trên iOS 7 và iOS 8, ngoài ra chúng ta sẽ dễ bị lẫn lộn khoảng cách padding giữa đối tượng hiện tại và cạnh margin hoặc cạnh của view cha. Có người giải thích không dùng UIView.layoutMargins và UIView.preservesSuperviewLayoutMargins  thì sẽ không bị crash ứng dụng, nguồn tại đây. Nếu ứng dụng của bạn viết từ iOS 8 trở lên thì bạn có thể dùng chức năng này, và bạn có thể dễ dàng thiết lập lại giá trị mặc định của margin.
- Width: sẽ cố định chiều rộng của đối tượng này theo giá trị trong ô.
- Height: sẽ cố định chiều cao của đối tượng này theo giá trị trong ô.

- Equal Widths: chỉ tác dụng khi bạn chọn từ 2 đối tượng trở lên, thuộc tính này quan trọng vì thế các bạn nên chú ý. Thuộc tính này sẽ cố định chiều rộng của 2 đối tượng theo tỷ lệ, mặc định tỷ lệ giữa 2 đối tượng là bằng nhau. Chúng ta có thể thay đổi tỷ lệ của 2 đối tượng đó như sau:
Ví dụ: Giả sử mình có Label A (W:100 ppi) có chiều rộng bằng một nửa chiều rộng của Label B (W:200 ppi) thì ban đầu mình chọn 2 đối tượng này và mình dùng thuộc tính 'Equal Widths' nó sẽ hiển thị như hình bên dưới:

Những báo hiệu màu cam của từng đối tượng là nó báo bạn đã config sai chiều rộng của 2 đối tượng này là 100 ppi, vì thế bạn chọn vào constraint của thuộc tính này nó sẽ hiển thị thông tin như trên tab Size Inspector. Trong đây bạn nên chú ý những thuộc tính như First Item, Relation, Second Item, và Multiplier. First Item của mình là Label A, và Second Item là Label B, vì thế mình sẽ chọn quan hệ (Relation) theo quan hệ nhỏ hơn hoặc bằng (Less Than or Equal) và tỷ lệ của nó là một nửa vì thế trong ô Multiplier mình sẽ đánh giá trị là 0.5. Sau khi mình config xong thì XCode sẽ không báo warning nữa và hình như sau:

Tuỳ theo First Item và Second Item là gì mình sẽ chỉnh những thông số thích hợp. Priority cũng rất quan trọng cho việc sắp xếp thứ tự ưu tiên giữa những constraint với nhau, bạn thiết lập sao cho uyển chuyển và làm chính xác giao diện mình mong muốn là được. Priority có 3 mức độ là 1000 là Required, 750 là High và 250 là Low.

- Equal Heights: chỉ tác dụng khi bạn chọn từ 2 đối tượng trở lên, thuộc tính này quan trọng. Thuộc tính này sẽ cố định chiều cao của 2 đối tượng theo tỷ lệ, mặc định tỷ lệ giữa 2 đối tượng là bằng nhau.
- Aspect Ratio: thuộc tính này sẽ canh tỷ lệ giữa chiều cao và chiều rộng của 1 đối tượng hoặc chiều cao của đối tượng này với chiều rộng của đối tượng kia. Để khi kích thước đối tượng cha thay đổi thì sẽ tăng giảm theo tỷ lệ này.
- Align: giống như tab Align.
- Update Frame: tương tự trong tab Align.

• Tab thứ 3 (Resolve Auto Layout Issues): Tab này giúp chúng ta sửa những lỗi trên layout. Tab này rất quan trọng, vì thế các bạn cũng nên chú ý những phím tắt để có thể thao tác chỉnh sửa cho nhanh.

Tại đây có 2 phần là 'Selected Views': chỉ tác động trên những view mình đang chọn. Và 'All Views in View Controller' sẽ tác động tất cả những view trong ViewController.
- Update Frames: khi bạn thay đổi giá trị Constaint của constraint thì bạn để ý XCode sẽ cảnh báo kích thước những đối tượng không đúng và sai bao nhiêu, bạn muốn chỉnh sửa những đối tượng đó chính xác theo những constraint bạn đã sửa lại thì bạn dùng chức năng này sẽ tự động canh chỉnh những đối tượng đó.
- Update Constraints: sẽ thay đổi lại giá trị Constaint theo vị trí hiện tại của đối tượng đó. Thuộc tính này ngược so với thuộc tính Update Frames.
- Add Missing Constraints: sẽ thêm những constraints còn thiếu để đảm bảo tính chính xác giữa những đối tượng và XCode sẽ không báo error hay warning về constraints.
- Resert to Suggested Constraints: sẽ xoá những constraints được thêm khi bạn dùng chức năng 'Add Missing Constraints'
- Clear Constraints: xoá tất cả những constraints hiện tại. Khi bạn muốn thiết lập lại toàn bộ thì nên dùng chức năng này để xoá cho nhanh.

Công cụ dùng để viết: XCode 6.3, iOS 8.3

Tài liệu tham khảo:
- Cconstrain-to-margin-in-storyboard-in-xcode-6
- What's new in Interface Builder in WWDC 2014.