By

Auto layout trên storyboard cho swift

IOS - Tìm hiểu về auto layout cho swift

Tại sao lại dùng auto layout?

Khi xây dựng một ứng dụng, chúng ta sẽ xây dựng trên storyboard với simulator là iphone 6. Lúc chạy ứng dụng trên simulator của iphone 6 thì UI hiện lên giống như lúc chúng ta layout, nhưng khi ứng dụng đó cho xoay ngang thì UI của app lúc này sẽ bị thiếu, bị lệch hoặc tràn ra 2 bên, khi đó chúng ta sẽ set frame lại cho từng control, việc set lại như vậy sẽ tốn nhiều thời gian và phải thực thi nhiều lần khi ứng xoay dọc rồi xoay ngang. Với những thiết bị khác nhau, chúng ta phải tìm những thiết bị đó và tuỳ chỉnh layout cụ thể. Auto layout sẽ giúp chúng ta làm việc này mà không cần phải set frame nhiều lần, sử dụng auto layout sẽ giúp rút ngắn code lại, làm cho việc layout trở nên dễ dàng hơn.

Sử dụng auto layout canh giữa cho uibutton

Xcode cung cấp 2 cách để định nghĩa auto layout

  1. Auto layout bar

  2. Control drag

Layout bar

  • Align: Tạo alignment contraints

  • Pin: Tạo spacing contraints,

  • Issue: Giải quyết các vần đề về layout như update frame, update contraints, clear contraints

Khi add một button vào view, mục đích muốn button đó luôn nằm giữa màn hình thì chúng ta sẽ thao tác như sau

Sử dụng Pin để tạo các spacing contraint, chúng ta sẽ tạo 2 button có kích thướt bằng nhau, các khoảng cách sẽ co giãn theo từng kích thướt màn hình

Kết quả chúng ta được layout như thế này

Trong ví dụ trên, chúng ta có sử dụng control drag cho button thứ 2, kéo contraint cho button 2 bằng top của button 1, width và height của button 2 cũng bằng với button 1.

Issue

  • Update frame

Update UI đúng vị trí mà chúng ta đã tạo contraint, khi click vào control nhìn thấy viền màu cam thì control đó chưa nằm đúng vị trí của nó, chúng ta cần update lại frame để có có thể nằm đúng vị trí.

  • Update contraints

Khi control đã có contraint, nhưng bạn muốn update lại contraint đó, có 2 cách:

  • Thứ nhất chúng ta có thể duy chuyển control trên storyboard tới vị trí cần update và click vào update contraints

  • Thứ 2 sẽ update control trên ở list contraint của control, ta chỉ việc thay đổi constant hoặc các thuộc tính mà mình mong muốn.

  • Clear contraints

Clear contraints: xoá tất cả các contraint hiện có trên control

Tổng kết

Bài viết này tổng hợp sử dụng auto layout cơ bản, giúp các bạn mới vào làm ios app có thể hiểu cơ bản về auto layout là như thế nào và cách sử dụng ra sao. Bài tiếp theo chúng ta sẽ tìm hiểu cách auto layout bằng code, một số app chúng ta sẽ viết layout bằng code không sử dụng storyboard vì thế việc sử dụng auto layout cũng bằng code sẽ như thế nào. Cảm ơn các bạn và hẹn gặp hướng dẫn auto layout bằng code tiếp theo.