[Xcode] Cách Confirm UI Design mà không cần build trên từng simulator khác nhau.

Trong quá trình phát triển IOS app trên xcode, việc support nhiều kích cỡ màn hình trên các devices rõ ràng là hết sức quan trọng, mặc dù đã sử dụng AutoLayout để settings nhưng đôi khi UI Design vẫn hiển thị không theo ý muốn của mình . Do đó việc confirm về UI Design trên các màn hình theo tác giả vẫn là một công việc cần thiết trong quá trình phát triển app. Bài viết này mình muốn giới thiệu đến các bạn một thao tác trên Xcode giúp chúng ta xác thực giao diện trên các màn hình mà không cần phải bât các simulator lên.

Công đoạn xác thực giao diện (Design)

Có phải chúng ta thường hay dùng cách này để xác thực giao diện??

1. Đầu tiên là việc đặt các button, label vào màn hình
2. Bật simulator lên -> build để xác thực hiển thị
3. Bật simulator của thiết bị có kích thước khác lên để xác thực thêm
4. cứ như vậy ...
5. Thay đổi các vị trí, thiết lập AutoLayout , bật simulator lên để xác thực
6. các simulator khác cũng cần xác thực thay đổi này
7. Cứ theo các vòng lặp như vậy ...

Vâng , nếu chúng ta ai đang sử dụng cách xác thực như trên thì sau khi đọc bài viết này chắc chắn hiệu quả làm việc sẽ được cải thiện ^^

Trình tự

1. Đầu tiên ở phần ViewController chúng ta chỉ định size cho màn hình

Ở đây mình chỉ định size là 4 inch

2. thiết lập vị trí các button, label ... lên màn hình

Ví dụ như mình đã add một số thứ vào như sau

3. Ở góc phải phía trên có nút hai vòng tròn lồng vào nhau (assistant editor button), nhấn vào nút đó, chúng ta sẽ thấy màn hình chia ra làm 2

Màn bên phải là màn hình nào cũng đc, miễn là đã chia đôi ra 2 màn cho ta ^^

4. Ở phía trên của màn hình bên phải , các bạn click vào icon có màu xanh da trời -> chọn Preview(1) -> Main.storyboard(Preview)

5. Add Size

sau khi settings như ở bước 4 chúng ta sẽ có màn hình như bên dưới (vì hơi khó nhìn nên mình tạm ẩn phần utinity ở bên phải ^^)

Ở màn hình này các bạn đã có đc cái preview mà mình mong muốn, khi thay đổi vị trí ... ở storyboard bên trái thì màn bên phải phần design cũng sẽ hiển thị thay đổi theo, chúng ta có thể dễ dàng confirm được ^^

Thêm nữa đó là ở Màn phải phần góc trái dưới chúng ta để ý có nút +. Khi nhấn nút này chúng ta có thể add thêm các loại màn hình khác vào phần preview để confirm nữa. Tuyệt vời

Lời kết

Các bạn thấy thế nào? Mình khi biết được tính năng này thật sự là khá sốc về sự tuyệt vời của nó. Xcode có rất nhiều tiện ích vì vậy, biết và không biết những tiện ích đó ảnh hưởng đến hiệu suất công việc rất nhiều. Do vậy mình viết tips này để chia sẻ với các bạn. Chào thân ái và quyết thắng!!! Nguồn: Qiita