UIScrollView with Auto Layout Constraints

Nhân tiện hôm nay ngồi cài UIScrollView cho màn hình trong ứng dụng cá nhân mình đang dev dở. Thấy tiện quá note lại cho bác nào cần đỡ phải mất công mày mò. Chả là khi làm ứng dụng chắc hẳn có những lúc bạn không thể lường trước được Height của một View. Nếu chẳng may có case nào đó khiến cho độ dài của View vượt quá kích thước màn hình điện thoại thì phần vượt quá đó sẽ bị cắt mất đi. Để giải quyết vấn đề này, mình cứ nhét cho cái View đó một UIScrollView cho an toàn :))

Cài đặt UIScrollView

Bạn có thể cài đặt UIScrollView mà không cần 1 dòng code nào với Interface Builder - Storyboard.

Đầu tiên, bạn cần tạo 1 Scroll View trong View của UIViewController mà bạn muốn. Trong Scroll View, bạn tạo 1 UIView (hint: Đặt tên cho nó là Content View cho dễ phân biệt với View của UIViewController). ScrollView không thể coi như là 1 View chứa các view con được, nên bạn cần tạo UIView trong Scroll View là vì thế.

Tiếp theo, bạn cần sử dụng Pin để tạo constraints với View cha cho cả Scroll View và ContentView. Trong trường hợp của mình thì mình để ContentView full with, height nên sẽ set distance 0 without margins.

Cuối cùng, để Scrollable được thì Scroll View cần biết được with,height của ContentView. Nếu ContentView của bạn có định nghĩa with,height là một số cụ thể thì ScrollView sẽ biết và tự Scrollable. Như hình bên dưới là cách set with,height cho ContentView.

Tuy nhiên như mình nói lúc đầu, khi bạn không biết kích thước cụ thể của ContentView thì tốt nhất set with, height cho nó equal với View cha bên ngoài. Lúc này ScrollView cũng có thể tự tính được with/height dựa trên View cha. Để set equal with/equal height với View cha, bạn chỉ cần di chuột vào ContentView rồi nhấn Ctr và di chuột tới vị trí của View cha. Thả chuột ra là sẽ thấy chỗ set equal with, equal height.

Hết rồi, chỉ đơn giản thế thôi.

Nguồn tham khảo:

https://www.ralfebert.de/ios-examples/auto-layout/uiscrollview-storyboard/