Cài đặt UIScrollView với Auto Layout trong Interface Builder
TutorialsContents
Chào bạn đến với Fx Studio! Bài viết hôm nay sẽ hướng dẫn bạn thao tác Auto Layout cho UIScrollView. Giải quyết bài toán hack não mọi thời đại của dev iOS đó là Auto layout với content của UIScrollView.
Chuẩn bị
-
- Xcode 11
- Swift 5
- iOS 13
Bài viết này bạn không cần quá cầu kì trong công tác chuẩn bị, chỉ cần tạo 1 project và kéo thả vào file *.xib
hoặc *.storyboard
. Ngoài ra, bạn cần phải nắm được một ít kiến thức về Auto Layout. Nếu bạn chưa biết gì về nó thì có thể ghé link dưới đây để đọc qua.
1. Cấu tạo và hoạt động của UIScrollView
Chắc trong giới dev iOS thì hầu như 90% đều gặp vấn đề khi thiết kế giao diện mà sử dụng UIScrollView. Thời đại, trước Auto Layout thì mọi thứ rất đơn giản. Bạn chỉ cần 1 việc đơn giản như sau:
scrollView.contentSize = ???
Phương pháp này được xem là chuẩn mực đạo đức và được sử dụng trong một khoảng thời gian rất dài. Tới khi triều đại Auto layout xuất hiện, nó vẫn được sử dụng. Vì tính cơ động và đơn giản và hiệu quả của nó. Nhưng mọi thứ chỉ là …
Vậy đâu là nguyên nhân cho vấn đề mang tính chất thời đại như thế này:
- Dev iOS học nhanh quá chưa hiểu được bản chất của UIScrollView
- Auto Layout thần thánh không phải vài đường kéo thả cơ bản là xong
Vì vậy mình cũng nhân tiện đây bổ túc kiến thức thêm cho bạn đọc nếu rơi vào trường hợp trên, thì cũng được giải thoát khỏi u mê lưới tình.
1.1. Cấu tạo
UIScrollView nó là một UI Control được cung cấp trong UIKit. Nó được sử dụng khá là phổ biến và được nhiều class khác kế thừa, đại diện như UITableView & UICollectionView. Nhiệm vụ chính của nó là giúp hiển thị những nội dung có kích thước lớn hơn màn hình điện thoại của bạn.
Chính vì vậy bạn cần phải nắm được một số khái niệm cơ bản sau:
Frame:
- Thuộc tính bao gồm toạ độ và kích thước của UIScrollView so với View chứa nó.
- Vì UIScrollView cũng là một UIView nên nó mang đầy đủ tính chất của 1 UIView.
- Bạn phải xác định
frame
của nó trong View chứa nó thông qua 2 phương pháp.- Code chay xét frame
- Auto layout
Content Size:
- Nó là thuộc tính đại diện cho kích thước của nội dung mà UIScrollView chưa trong nó.
- Như theo định nghĩa thì UIScrollView sẽ hiển thị nội dung với kích thước lớn hơn kích thước màn hình. Nên thuộc tính
bounds
hoàn toàn vô tác dụng trong trường hợp này. - Trong vấn đề code, thì dev phải xác định rõ được kích thước này để tiến hành
addSubView
vào UIScrollView.
Content Offset:
- Đây là thuộc tính nhằm xác định được phần nội dung nào sẽ hiển thị được của toàn bộ nội dung mà UIScrollView chứa.
- Nó là toạ độ (kiểu
CGPoint
) và kết hợp với 2 thuộc tínhwidth
&height
củaframe
UIScrollView. Xác định vùng nội dung nhìn thấy trên toàn bộ nội dung.
1.2. Hoạt động
Với frame
thì UIScrollView sẽ được xác định và cố định trên View chứa nó, nó mang tính chất quy luật trong lập trình iOS. Khi người dùng dùng tay vuốt hoặc kéo thả trên UIScrollView.
- Nếu như nội dung của UIScrollView có kích thước bé hơn kích thước
frame
của nó, bạn sẽ không thấy sự thay đổi gì. - Nếu như nội dung quá dài, bạn sẽ thấy từng phần nội dung sẽ trượt qua mắt bạn.
Nhưng bạn cần nhớ một điều
UIScrollView vẫn đứng im đó. Chỉ có nội dung của nó di chuyển.
Do nội dung của nó di chuyển, nên thuộc tính contentOffset
cũng sẽ bị thay đổi theo. Hướng cho việc di chuyển này:
- Theo chiều ngang (horizontal) nếu kích thước chiều ngang của nội dung lớn hơn kích thước chiều ngang của
frame
- Theo chiều dọc (vertical) tương tự trên, nhưng mà cho chiều dài của nội dung.
- Với 2 kích thước đều lớn hơn thì scroll được cả 2 chiều
Bạn có thể sử dụng code để scroll tới phần nội dung muốn hiển thị như sau:
scrollView.setContentOffset(CGPoint(x: ???, y: ???), animated: true)
Có thêm biến animated
cho xịn xò, nhìn chạy mượt mà hơn nhiều.
Qua trên là cơ bản cấu tạo và hoạt động của UIScrollView. Bây giờ, chúng ta quay lại chủ đề của bài viết.
Giải quyết bài toán Auto Layout cho UIScrollView một cách hoàn toàn triệt để bằng kéo thả Interface Builder.
2. Cách cài đặt truyền thống
Qua bao nhiều đời dev iOS thì sẽ truyền miệng qua lại với nhau nhiều cách để có thể Auto Layout thành công trên UIScrollView. Việc này đôi khi được xem là cảnh giới kéo thả Auto Layout vậy… Nhiều trường hợp dùng để loại trừ các ứng viên iOS lúc phỏng vấn … vâng vâng và mây mây …
Và cũng có rất nhiều dị bản khác nhau cho việc này. Nhưng mình sẽ đi vào cách chung nhất, còn các cách biến tướng khác bạn sẽ phải tự tìm hiểu để phù hợp với project của bạn.
- Bước 1: kéo thả UIScrollView vào file giao diện
- Bước 2: thiết lập
constraint
của UIScrollView- Bao gồm: top, bottom, leading và trailing
- Tuỳ theo yêu cầu của bạn mà làm
- Bài viết sẽ cho nó full màn hình nên tất cả
constraint
sẽ bằngo
- Ngoài ra, bạn phải chú ý việc xét này, là của ScrollView so với View chứa nó (trường hợp demo chính là Safe Area của ViewController)
- Bước 3: tạo Content View
- Kéo thả thêm 1 UIView vào trong UIScrollView
- Đổi tên nó lại thành
ContentView
- Bước 4: thiết lập
constraint
của ContentView so với UIScrollView- Vẫn là top, bottom, leading và trailing
- Các giá trị sẽ bằng
0
hết - Chú ý là so với ScrollView
- Bước 5: Xác định kích thước của ContentView (quan trọng)
-
- Đây là bước quan trọng
- Xét equal width and equal height của ContentView với View chứa UIScrollView
- Chọn ContentView, nhấn giữ chuột và kéo thả tới View chứa UIScrollView
- Nhấn giữ
Command
để chọn 2 thuộc tính trên
- Bước 6: Xác định
height
cho ContentView- Tạm thời cho bằng
1500
, nếu muốn nhiều hơn hay ít hơn thì tuỳ ý bạn.
- Tạm thời cho bằng
- Bước 7: Xét lại độ ưu tiên của thuộc tính đang bị xung đột
- Vì
height
của ContentView đang bị xung đột bởi 2 giá trị là- Bằng với
height
của View chứa UIScrollView - Bằng với giá trị được xét ở bước trên
- Bằng với
- Do ta sẽ ưu tiên giá trị được xét ở bước 6
- Vì vậy sẽ giảm độ ưu tiên của constraint (bước 5) xuống
- Vì
- Bước 8: Thiết kế giao diện cho ContentView
- Tới đây thì nhẹ nhàn rồi, bạn chỉ cần kéo thả các View con.
- Auto Layout với ContentView
Cách để bạn kéo thả tốt hơn cho các View con của Content View và nhất là các phần mà ContentView bị che mất. Bạn chỉ cần:
- Kích vào UIScrollView
- Dùng chuột hoặc trackpad để scroll
- Bạn sẽ thấy ContentView của bạn di chuyển theo
- Sau đó thoả mái mà kéo thả
Build và cảm nhận kết quả nha. Nếu như mọi thứ đã ổn thì chúng ta sang cách mới nào!
3. Cách cài đặt theo Xcode 11
Đôi lúc bạn nên sống chậm lại một chút và quan sát thế giới này nhiều hơn. Bạn sẽ phát hiện biết bao nhiêu điều kì diệu. Trong phạm vi bài viết này thì bạn hãy sử dụng Xcode 11 và kéo thả 1 UIScrollView lại từ đầu và bạn sẽ thấy có điều đặc biệt sau.
Với Xcode 11 có thêm 2 nhân vật mới:
- Frame Layout guide: nó có mối liên hệ với toạ độ và kích thước của chính UIScrollView với View chứa nó.
- Content Layout guide: nó lại có mối liên hệ với content của UIScrollView.
Để kích hoạt nó thì bạn mở phần Size inspector và tích chọn thôi.
Tiến hành kéo thả Auto Layout cho nó nào. Vẫn là các bước như sau:
- Bước 1 đến bước 3 thì như cách trên
- Bước 4: xác định
constraint
của ContentView
-
- Thay vì xác định với UIScrollView, bạn hãy kéo nó tới content layout guide
- Edit lại 4 chỉ số leading / top / trailing / bottom constraint
- Cho tất cả chúng bằng
0
, chú ý giá trị này.
- Bước 5: Xác định kích thước của ContentView
-
- Trong bài demo, chúng ta sẽ scroll theo chiều dọc, nên từ ContentView kéo chuột tới Frame Layout Guide
- Chọn equal width constraint
- Bước 6: Xác định
height
của Content View
-
- Cái này đơn giản và giống cách trên
Như vậy là đã xong Auto Layout theo cách mới có trên Xcode 11 rồi. Bạn test lại bằng phương pháp dùng chuột hoặc trackpad scroll trực tiếp trên file giao diện. Nếu như phần ContentView di chuyển được là bạn đã Auto Layout thành công.
Cách này hay hơn cách cũ ở điểm nào?
Đơn giản vì số bước thực hiện ít hơn. Dễ hiểu vì không cần phải xác định độ ưu tiên cái nào lớn, cái nào bé. Gọn gàn vì mọi thứ giờ đã phân biệt rõ ràng bằng 2 Guide.
OKAY! Mình xin kết thúc bài viết này tại đây. Nếu bạn có đóng góp ý kiến hay chỉnh sửa gì thì bạn có thể comment hoặc contact cho mình. Nếu bạn thấy hay thì hãy share cho người khác đọc.
Tạm kết
- Tìm hiểu về cấu trúc và cách hoạt động của UIScrollView
- Hướng dẫn 2 cách để kéo thả Auto Layout cho UIScrollView
Cảm ơn bạn đã đọc bài viết này!
Related Posts:
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!
Leave a Reply Cancel reply
Fan page
Tags
Recent Posts
- Prompt Engineering trong 10 phút
- Một số ví dụ sử dụng Prompt cơ bản khi làm việc với AI
- Prompt trong 10 phút
- Charles Proxy – Phần 1 : Giới thiệu, cài đặt và cấu hình
- Complete Concurrency với Swift 6
- 300 Bài code thiếu nhi bằng Python – Ebook
- Builder Pattern trong 10 phút
- Observer Pattern trong 10 phút
- Memento Pattern trong 10 phút
- Strategy Pattern trong 10 phút
You may also like:
Archives
- December 2024 (3)
- September 2024 (1)
- July 2024 (1)
- June 2024 (1)
- May 2024 (4)
- April 2024 (2)
- March 2024 (5)
- January 2024 (4)
- February 2023 (1)
- January 2023 (2)
- November 2022 (2)
- October 2022 (1)
- September 2022 (5)
- August 2022 (6)
- July 2022 (7)
- June 2022 (8)
- May 2022 (5)
- April 2022 (1)
- March 2022 (3)
- February 2022 (5)
- January 2022 (4)
- December 2021 (6)
- November 2021 (8)
- October 2021 (8)
- September 2021 (8)
- August 2021 (8)
- July 2021 (9)
- June 2021 (8)
- May 2021 (7)
- April 2021 (11)
- March 2021 (12)
- February 2021 (3)
- January 2021 (3)
- December 2020 (3)
- November 2020 (9)
- October 2020 (7)
- September 2020 (17)
- August 2020 (1)
- July 2020 (3)
- June 2020 (1)
- May 2020 (2)
- April 2020 (3)
- March 2020 (20)
- February 2020 (5)
- January 2020 (2)
- December 2019 (12)
- November 2019 (12)
- October 2019 (19)
- September 2019 (17)
- August 2019 (10)