Autolayout cho UIScrollView

Autolayout cho UIScrollView

Mình sẽ hướng dẫn cách sử dụng UIScrollView mà ko cần phải tính toán contentSize với autolayout.

1. Tạo UIScrollView

Các bạn tạo project và kéo UIScrollView vào và autolayout trailing, leading, top, bottom là 0.

Tạo UIScrollView
Hình 1.1 Tạo UIScrollView

Do chưa có content view nên Xcode sẽ báo lỗi autolayout, chúng ta sẽ tạo content view ở bước 2.

2. Tạo ContentView

UIScrollView chỉ có duy nhất 1 subview, và dựa vào subview này cùng với autolayout mình sẽ xác định được contentSize của UIScrollView.

  • Kéo 1 UIView vào UIScrollView (đặt tên ContentView), set backgroundColor là xanh.
  • Set frame cho ContentView (trailing, leading, top, bottom so với UIScrollView bằng 0).
  • Set width của ContentView = width của UIScrollVIew.
  • Set Height của ContentView bằng constant cố đinh (1000). Sau này mình sẽ xoá constraint này. Và việc tính toán Height sẽ dựa vào các subviews trong ContentView.
ContentView
Hình 2.1 ContentView

3. Tạo SubView cho ContentView

Kéo 2 UILabel vào ContentView. 1 UILabel có backgroung màu xanh và 1 có màu đỏ. Cả 2 đều set lineNumber = 0 (để 2 UILabel có thể tự autolayout và qua đó sẽ tự tính toán Height của ContentView). Xoá constant hight (1000) của ContentView và cuối cùng set nội dung cho 2 UILabel dài nhất có thể.

Hình 3.1 Subview cho ContentView

Đây là kết quả:

Ví dụ trên chỉ demo trong trường hợp tính toán height contentSize với 2 UILabel cơ bản và fix width bằng Screen màn hình. Tuy nhiên, có thể áp dụng với nhiều subview và tính toán width tương tự như tính toán height.

Cám ơn các bạn đã theo dõi bài viết. Link source code các bạn có thể tham khảo: https://github.com/laptrinh0kho/AutolayoutScrollView