Written by on July 5, 2020

Cài đặt UIScrollView với Auto Layout trong Interface Builder

Tutorials

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ính width & height của frame 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ằng o
    • 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.

  • 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
    • 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

  • 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!

PinYummlyLinkedInPrintShares71

Related Posts:

Written by

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

Your email address will not be published. Required fields are marked *