Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on July 5, 2020

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

Tutorials

Contents

  • Chuẩn bị
  • 1. Cấu tạo và hoạt động của UIScrollView
    • 1.1. Cấu tạo
    • 1.2. Hoạt động
  • 2. Cách cài đặt truyền thống
  • 3. Cách cài đặt theo Xcode 11
  • Tạm kết

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.

    • Basic iOS tutorial : Giới thiệu Auto Layout

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!

FacebookTweetPinYummlyLinkedInPrintEmailShares71

Related Posts:

  • Lập trình hướng đối tượng (OOP) với Swift
    Lập trình hướng đối tượng (OOP) với Swift
  • RxSwift vs. UIKit – Tạo Model với Custom Observable
    RxSwift vs. UIKit – Tạo Model với Custom Observable
  • State & User Interface State - SwiftUI Notes #33
    State & User Interface State - SwiftUI Notes #33
  • Switching Grid Layout - SwiftUI Notes #55
    Switching Grid Layout - SwiftUI Notes #55
Tags: autolayout, uiscrollview
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

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

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

You may also like:

  • SwiftUI - Phần 1 : Làm quen với SwiftUI
    SwiftUI - Phần 1 :  Làm quen với SwiftUI
  • Bản chất của Layout - SwiftUI Notes #30
    Bản chất của Layout - SwiftUI Notes #30
  • Basic Layout - SwiftUI Notes #11
    Basic Layout - SwiftUI Notes #11
  • MainActor và điều gì xảy ra với UI trên Main Thread
    MainActor và điều gì xảy ra với UI trên Main Thread
  • RxSwift vs. UIKit – Tạo Model với Custom Observable
    RxSwift vs. UIKit – Tạo Model với Custom Observable

Archives

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

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!