Saturday, June 25, 2016

Viết Auto Layout bằng code và cách viết UnitTest để kiểm tra giao diện - Phần 3

Trước đây mình có 2 bài viết hướng dẫn cách dùng Auto Layout và Size Class bằng cách thiết lập trên storyboard hay file xib. Nếu các bạn chưa xem có thể xem qua AutoLayout và Size Class Phần 1, Phần 2.

Nếu các bạn làm project từ iOS 9 trở lên thì nên dùng UIStackView để thiết kế giao diện cho dễ, ngược lại từ iOS 8.4 trở xuống thì bạn phải dùng view và những constraint để giả như StackView, để có thể thiết kế giao diện 1 cách đơn giản nhất, vì khi trên 1 màn hình có nhiều thành phần nhỏ nếu bạn liên kết theo từng nhóm trong view thì dễ quản lý hơn. Hoặc bạn có thể dùng thư viện OAStackView, ý tưởng viết thư viện này từ UIStackView.

Viết giao diện nếu bạn muốn trực quan thì nên dùng storyboard hay xib, nhưng nhiều khi có những trường hợp bạn cần viết giao diện bằng code. Nếu bạn nắm được cách viết giao diện bằng code bạn có thể hiểu sâu hơn những vấn đề khi làm giao diện.

Khi làm autolayout trên iOS bằng constraint, có những khái niệm bạn cần phải hiểu như:

* Pin, Align và Ratio:

- Pin: bạn gắn 1 đối tượng giao diện (view, label, button...) vào 1 vị trí cố định nào đó (ví dụ như góc trên bên trái, góc trên bên phải, hay canh giữa...). Cố định chiều cao và chiều rộng với con số mong muốn.
- Align: bạn canh chỉnh từ 2 đối tượng trở lên, đối tượng này sẽ canh chỉnh theo đối tượng kia bằng những thuộc tính như trái, phải, trên, dưới, canh giữa, hay baseline.
- Ratio:  tỷ lệ chiều cao và chiều rộng của 1 đối tượng, nếu bạn muốn tỷ lệ giữ đối tượng này và đối tượng kia thì dùng chức năng Equal Widths/Heights.
  + Nếu bạn dùng storyboard thì sau khi thiết lập chiều rộng và chiều cao mong muốn rồi thì chọn thêm chức năng Aspect Ratio trong phần Pin để đối tượng đó luôn giữ đúng tỷ lệ đó, như hình bên dưới:

  + Equal Heights/Widths: mặc định là chiều cao/chiều rộng của đối tượng này bằng với chiều cao/chiều rộng của đối tượng kia, vì giá trị multiplier là 1. Bạn có thể dùng chức năng này để thiết lập tỷ lệ của đối tượng này với đối tượng khác bằng cách chỉnh giá trị của thuộc tính multiplier trong NSLayoutConstraint hay NSLayoutAnchor.

* Constraint: