Lời mở đầu
Như các bạn đã biết, để giỏi một kĩ năng nào đó trước hết chúng ta phải biết nó là gì và cách sử dụng của nó như thế nào. Và luyện tập nó nhiều sẽ giúp các bạn nâng cao kỹ năng đó.
Bài viết này mình sẽ giới thiệu tới các bạn cách tương tác với Interface Builder và sử dụng chúng trong Auto layout sao cho hiệu quả. Hi vọng nó sẽ giúp ích cho mọi người :v
- iOS/Auto Layout – Phần 1: Auto layout là gì?
- iOS/Auto Layout – Phần 3: Anatomy of a Constraint, cách để tạo constraints bằng code
- iOS/Auto Layout – Phần 4: Làm sao để viết constraint dễ dàng hơn? Giới thiệu Snapkit
- iOS/Auto Layout – Phần 6: Những trường hợp đặc biệt trong Auto Layout
- iOS/Auto Layout – Phần 7: UI Debugging
1. Interface Builder
Interface builder là một phần trong ứng dụng XCode, nó giúp các nhà phát triển phần mềm iOS xây dựng giao diện trên đó.
2. Tương tác với Interface Builder
Dưới đây là hình ảnh về giao diện của nó
1.2 View as …
• Các thiết bị khác nhau từ kích thước lớn nhất tới nhỏ nhât, từ iphone đến iPad
• Các Interface Style khác nhau như Dark mode, light mode
• Các orientation(Chiều xem màn hình) khác nhau
Cái này để kiểm tra trước xem việc auto layout của các bạn đã theo ý muốn hay chưa.
1.3 Auto layout bar
- Update Frames: Nút này sẽ được hiển thị khi mà một hoặc nhiều View đang không nằm đúng vị trí so với constraints nó đang có. Khi bấm vào chúng ta sẽ được giúp các view đó trở về đúng vị trí so với constraints của nó đang có.
- Align: Để tạo các constraint căn chỉnh giữa các view, chẳng hạn như căn giữa, trái, phải, trên dưới …
- Add new constraints: Để tạo các các constraint thông thường như trên, dưới, trái, phải, chiều rộng, chiều cao và tỉ lệ (aspect ratio)
- Resolve AutoAuto Layout Issues: Để giải quyết các vấn đề về auto layout như:
– Update constraint constants: Để cập nhật giá trị mới cho constraint đó theo đúng vị trí mà nó đang nằm trên SupperView.
– Add missing Constraints: tự động thêm các constraint còn thiếu (Không nên dùng vì rất dễ dẫn đến việc thêm các constraint không mong muốn.
– Clear constraint: Bỏ hết constraint - Embed In: Tạo 1 view mới và đưa hết các view được chọn vào trong đó. Mà có thể sẽ không mất đi các constraint hiện tại của các view được chọn.
1.3.1 Align
Ở đây chúng ta thấy giao diện thêm các constraints về căn chỉnh được hiển thị
Vertical in Container và Horizontally in container
Vertically in container: giúp tạo constraint của các View được chọn gắn với super view. Trong đó các connstraint được tạo sẽ giúp các view đó căn giữa theo chiều dọc với super view của nó. Ở đây chúng ta có thể thay đổi constant của nó(mặc định là 0)
Horizontally in container: Tương tự như trên nhưng theo chiều ngang.
First Baselines
Khác với 2 thằng ở trên, các thằng còn lại cần phải có 1 thằng “A” đã xác đinh được vị trí của nó(đầy đủ contraint). Thằng “A” này làm nhiệm vụ là cái mỏ neo giúp cho các thằng khác bám vào.
Thằng này dùng để làm cho nhiều View( UILabel, UIButton …) có text nằm trên cùng hàng, không bị lệch lẹo.
Để enable tính năng này lên chúng ta cần phải chọn ýt nhất 2 Views.
NOTE: Nó căn theo đáy của text trong các views
Vertical center
Tạo constraints giúp các views căn giữa theo chiều dọc
Lưu ý: Nó căn theo frame size nên nó sẽ căn theo các frame của các views được thêm constraint
Để hiểu rõ hơn chúng ta theo dõi hình dưới đây
Horizontal center
Tương tự như Vertical center nhưng theo chiều ngang.
Bottom edges
Dùng khi cần gắn constraint cho viewA luôn nằm ở đáy của viewB.
Mặc định sẽ là viewA.bottom to viewB.bottom
Top edges
Dùng khi cần gắn constraint cho viewA nằm ở trên đầu của viewB.
Mặc định sẽ là viewA.top to viewB.top
Trailing edges
Dùng khi cần gắn contraint cho viewA cùng căn trái 1 khoảng bằng căn trái của viewB
Măc định sẽ là viewA.trailing to viewB.trailing
Leading edges
Dùng khi cần gắn constraints cho viewA cùng căn phải 1 khoảng bằng với căn phải của viewB.
Mặc định sẽ là viewA.leading to viewB.leading
1.3.2 Add new constraints
Thường dùng để thêm các constraints cho view được chọn như: trên, dưới, trái, phải, chiều rộng, chiều cao, tỉ lệ. Phần này thì mọi người dùng nhiều rồi nên mình không nói nhiều về nó.
NOTE: Thông thường khi chọn XCode sẽ gợi ý gắn constraint với view gần với các cạnh của nó nhất(không tính view đè lên nhau)
Tuy nhiên chúng ta có thể thay đổi constraint tới view đích bằng cách chọn mũi tên như hình dưới.
- width: tạo constraint độ rộng của view
- height: tạo constraint độ cao của view
- equal width: Tạo constraints cho các view có cùng độ rộng (Chọn 2 view trở lên)
- equal height: Tạo constraints cho các view có cùng độ cao (chọn 2 view trở lên)
- Aspect ratio: tạo constraint tỉ lệ. Thường sử dụng cho những view sử dụng hình ảnh.
NOTE: Bạn có thế chọn nhiều view rồi set equal width, height để set cho tất cả các view được chọn có cùng size.
1.3.3 Embed In
Embed In View
Dùng khi bạn muốn gom các view được chọn vào 1 view lớn, để quản lý layout đễ hơn. Tính năng này sẽ tự tạo 1 một view lớn chứa và cách các view bên trong với inset cố định, mặc định là 20 points
Embed In View Without Inset
Khác với tính năng Embed In View tính năng này sẽ tạo với Inset = 0, cách dùng như Embed In View
Embed In ScrollView
Tự động tạo 1 scrollview và đưa tất cả các view được chọn vào bên trong nó.
Embed In Stack View
Tạo ra 1 stack view và đưa các view được chọn vào trong nó. Thằng này thường được dùng khi bạn có nhiều View có cùng kích thước. Mình sẽ viết 1 bài đi sâu vào thằng này sau.
1.4 Add constraints bằng Chuột và bàn phím.
Bạn có thể add constraint bằng cách:
– Sử dụng chuột phải để kéo ViewA constraint với ViewB.
– Bấm giữ phím control + chuột trái để kéo ViewA constraint với ViewB
Khi đó 1 popup sẽ hiển thị cho chúng ta thêm Constraint một cách nhanh chóng.
Lúc này bạn có thể chọn 1 constraint mà bạn muốn hoặc giữ Shift để chọn tạo nhiều constraint.
Giữ phím Option để nhìn thấy chỉ số và tạo constraint với chỉ số đó.
1.5 Thanh Menu
Đối với mỗi người sẽ có sở thích khác nhau khi chọn hiển thị cái gì trên màn hình Interface Builder.
Nhưng theo mình các bạn nên chọn hiển thị các mục như mình đã chọn :D, đặc biệt có mục
Bounds Rectangles: Nó tạo ra các border xung quanh các View giúp các bạn dễ hình dung hơn khi thêm constraints.
Preview mode
Giúp các bạn có thể nhìn thấy Layout của mình hoạt động như nào mà không cần phải build app. Tính năng này Cực Kỳ hữu dụng khi các bạn muốn test layout. Nó còn tiết kiệm thời gian khi bạn đang làm trong 1 dự án lớn vì thời gian build app nó khá lâu.
Ở chế độ preview bạn có thế bấm vào Layout để chỉnh lại bố cục của chế độ xem trước
Hiện tại có 2 lựa chọn: Bên phải và xem ở dưới.
Assistant
Tính năng này chia đôi màn hình và tự động hiển thị file swift đang được kết nối với nó.
Để chuyển qua tính năng này chúng ta mở thanh menu lên và chọn Assistant
Hoặc dùng tổ hợp phím Option + Control + Command + Enter để mở nhanh.
1.6 Xem và thay đổi các constraint trên 1 view
Bạn có thể chọn 1 view và xem được tất cả các constraint liên quan tới nó ở tab Show The Size Inspector bên trên góc trái màn hình.
Nếu muốn chỉnh sửa nhanh constant, priority và multiplier của constraint đó thì hãy bấm vào nút edit ở mỗi constraint.
Nếu muốn xem và chỉnh sửa 1 constraint cụ thể thì các bạn có thể dùng chuột chon constraint đó và sửa nó. Ở Mục này ta có thể sửa được nhiều thông tin hơn, ta có thể thay đổi được constraint với 1 vị trí khác. Thậm chí cả 1 view khác luôn. Cụ thể xem dưới hình.
- iOS/Auto Layout – Phần 1: Auto layout là gì?
- iOS/Auto Layout – Phần 3: Anatomy of a Constraint, cách để tạo constraints bằng code
- iOS/Auto Layout – Phần 4: Làm sao để viết constraint dễ dàng hơn? Giới thiệu Snapkit
- iOS/Auto Layout – Phần 6: Những trường hợp đặc biệt trong Auto Layout
- iOS/Auto Layout – Phần 7: UI Debugging
Tổng kết
Hi vọng bài viết của mình giúp các bạn sử dụng Xcode/Interface Builder dễ dàng hơn.
Cảm ơn các bạn đã theo dõi bài viết.