Basic iOS tutorial : Giới thiệu Auto Layout

Chào bạn,

Chúng ta lại tiếp tục với seri học iOS cho mọi người. Bài viết này liên quan tới việc xử lý giao diện của ứng dụng iOS trên nhiều kích cỡ màn hình khác khác nhau. Đó là Auto Layout huyền thoại. Bắt đầu thôi!

Chuẩn bị

• MacOS 10.14.4
• Xcode 11.0
• Swift 5.1

1. Lý thuyết

1.1. Định nghĩa

Auto Layout là hệ thống các ràng buộc (constraint) giữa các thành phần giao diện của chúng ta. Để với một giao diện có thể hiển thị đúng với thiết kế trên các thiết bị có kích thước màn hình khác nhau thì auto layout sẽ hỗ trợ việc đó.

Hiện tại thì đã có nhiều kích cỡ màn hình cho các thiết bị của Apple.

• iPhone 5/5s/SE
• iPhone 6/6s/7/8
• iPhone 6/6s/7/8 Plus
• iPhone X
• iPhone 4s
• iPad
• …

Chúng ta sẽ không quá tập trung nhiều về lý thuyết. Vì phần lý thuyết các bạn nên tìm đọc ở trang chủ của Apple.

1.2. Tại sao nên  dùng Auto Layout

• Lập trình đơn giản
• Dễ dàng bảo trì ứng dụng
• Đặc biệt rút ngắn được thời gian viết code khi ứng dụng của bạn chạy trên nhiều thiết bị có kích thước màn hình khác nhau
• Áp dụng được cho nhiều nền tảng khác nhau trong hệ sinh thái của Apple
• …

Mình thích thì mình xài thôi.

2.3. Constraint-based layout

• Theo như trên thì Auto Layout chính là 1 hệ thống ràng buộc bố cục của thành phần giao diện.
• Có nghĩa là có code Auto Layout bằng code được. Và bạn khỏi bất ngờ.
• Xem ví dụ sau:

Hai view này cách nhau 8px và được mô tả bằng phương trình như trên.

• Phân tích chút
  • Constraint : chính là sự ràng buộc 2 View trên
  • Item 1: Item đầu tiên trong phương trình, trong trường hợp này là RedView. Item phải là một View hoặc một layout guide
  • Attribute 1: Thuộc tính bị ràng buộc của item 1. Trong trường hợp này là view leading. (Điểm đầu tiên của view)
  • Relationship: Mối quan hệ giữa bên trái và bên phải của phương trình. Giá trị của relationship có thể thuộc 1 trong 3 giá trị: bằng, lớn hơn hoặc nhỏ hơn. Trong trường hợp này bên trái và bên phải bẳng nhau
  • Multipller: Hệ số – giá trị của attribute được nhân với hệ số này. Trong trường hợp này là 1.0, các bạn cũng có thể bỏ Multipller đi nếu hệ số bằng 1.0
  • Item 2: Item thứ 2 trong phương trình, trong trường hợp này là blue view. Không giống như item 1, item 2 có thể để trống
  • Attribute 2: Attribute bị ràng buộc trong item 2. Trong trường hợp này là điểm cuối của blue view. Nếu item thứ 2 để trống thì sẽ k có attribute 2 này.
  • Constant: Hằng số. Bù trừ hằng số. Trong trường hợp này là 8.0 points. Giá trị này đươc thêm vào cho Attribute 2.

Đọc tới đây nhiều bạn sẽ hỏi: “điều gì đang xãy ra với thế giới này vây? Tui học để kéo thả chứ code thêm nữa thì có ý nghĩa gì đây?”

Tất nhiên, bạn hãy yên tâm vì những thứ trên đều được Xcode hỗ trợ trong giao diện kéo thả thần thành của nó rồi.

1.4. Auto Layout Attributes

• Tham khảo hình sau để bạn có thể biết được có những thuộc tính nào Auto Layout.

2. Tương tác với Interface Builder

2.1. Interface Builder

• Mở Xcode > New iOS Project
• Mở file Main.storyboard
• Đây là màn hình đầu tiên mà bạn tiếp xúc
• Các chức năng kéo thả, Auto Layout đều ở đây hết.

Phần này bạn tự vọc để xem giao diện của mình thay đổi như thế nào trên từng loại thiết bị mà không cần phải build.

2.2. Auto Layout Bar

Giải thích 1 chút

• Align – Tạo các ràng buộc căn chỉnh, chẳng hạn như căn chỉnh các cạnh trái của hai chế độ xem.
• Add new constraints – Tạo các ràng buộc khoảng cách, chẳng hạn như xác định độ rộng của điều khiển UI.
• Resolve auto layout issues – Giải quyết các vấn đề bố trí.
• Stack – Nhúng khung nhìn vào chế độ xem ngăn xếp.Thảo luận thêm về nó trong chương tiếp theo.
• Update frames – Cập nhật vị trí và kích thước của khung trong tham chiếu đến các ràng buộc bố cục đã cho.

Kích vào 1 cái thì sẽ thấy xuất hiện 1 cửa sổ có nhiều chức năng hơn

Có thể xem về chi tiết từng constraint bên Size inspector

2.3. Resolving Layout Constraint Issues

• Khi bạn lỡ tay lỡ chuột là kéo control của bạn đi ra vị trí khác thì Auto Layout sẽ báo lỗi
• Bình tĩnh và chúng ta có cách giải quyết
• Xcode sẽ thông báo cho bạn biết –> việc còn lại là kích next tới thôi. Mọi thứ sẽ được fix
• Lưu ý cho các trường hợp đơn giản mà thôi

3. An Alternative Way to Preview Storyboards

• Chọn chế độ xem Preview để có thể xem trực tiếp Auto Layout trên 1 lúc nhiều thiết bị
• Kích nút (+) để thêm thiết bị
  • Bạn có thể chỉnh được ngang dọc màn hình

Tới đây thì chúng ta tạm thời xong phần tìm hiểu và hướng dẫn sử dụng các tools liên quan tới Auto Layout rồi. Giờ chuyển sang luyện tập 1 xí để cho quen tay.

4. Luyện tập

4.1. Thêm 1 ImageView

• Yêu cầu
  • 1 UIImageView với kích thước hình vuông
  • Mỗi chiều có kích thước là 200px

• • Căn chỉnh ImageView ở chính giữa hàm hình
    • Chọn Horizontally = 0
    • Chọn VerticaVerticall = 0

• Tận hưởng kết quả với Preview nha

4.2 Safe Area

• Safe Area là 1 vùng được tạo ra mà giao diện của view sẽ được đảm bảo hiển thị đầy đủ nhất.
• Ra mắt từ Xcode 9
• Giao diện sẽ được giới hạn các thuộc tính liên quan sau
  • Trailing space
  • Leading space
  • Bottom space
  • Top space

• Quay lại ví dụ và thêm 1 UILable
  • Yêu cầu ở trên cùng của màn hình
  • Chúng ta chỉ cần xét constraint với Safe Area là OK

• Khi giao diện có thêm Navigation thì Safe Area sẽ đảm bảo

• Rất hiệu quả cho iPhone X các đời.

4.3. Thay đổi Constraints

• Khi bạn muốn thay đổi một chút nữa cho Label trên
• Yêu cầu
  • Label sẽ cách top 30px
• Thì thay đổi trực tiếp các constant của constraint

Kích đúp vào Constraint

Sử dụng tab Inspector

4.4 Auto Layout theo tỉ lệ

• Yêu cầu
  • ImageView sẽ có tỉ lệ với chiều ngang màn hình là 1:3
  • width & height của ImageView bằng nhau
• Bước 1: kéo thả ratio cho  width và height có tỉ lệ bằng nhau

• Bước 2: kéo thả cho  width của ImageView và width của View bằng nhau

• Bước 3: edit multiplier của bước 2 theo tỉ lệ 1:3

• Bước 4: xem trên Preview

Tới đây thì tạm thời xong cơ bản để biết và làm Auto Layout. Auto Layout thực sự không quá khó. Bạn cần nắm được các quy tắt như trên thì bạn có thể xác định được việc kéo thả các constraint cho hợp lý.

Tạm kết:

• Lý thuyết Auto Layout ở mức sơ lược
• Các tools trong Auto Layout
• Fix lỗi Auto Layout
• Safe Area
• Tỉ lệ các constraint

Lời khuyên cho bạn là: “Nếu gặp lỗi Auto Layout khi kéo thả và càng kéo nó càng lỗi thì nên bình tĩnh sống mà kéo tiếp.”

Cảm ơn bạn đã đọc bài viết này!

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!