iOS ScrollView實現自動布局的方法（適用Swift 3.0 ）

2020-07-26 02:34:16

字體：大中小

來源：轉載

供稿：網友

前言

眾所周知我們大家在開發中，可能會有一些頁面顯示的元素很多，可能會超出一個屏幕，但也不適合用 TableView 或者 CollectionView，此時我們一般會用 ScrollView，那么就會出現自動布局的問題。下面話不多說了，來一起看看詳細的介紹吧。

實現方式

純代碼

特點編碼繁瑣：需要手寫控件
安全：只要正確地設置約束或者 frame、contentSize，一般不會出現滾動問題

示例

lazy var scrollView: UIScrollView = { let obj = UIScrollView(frame: CGRect(x: 0, y: 0, width: .screenW, height: self.screenH)) return obj}()override func viewDidLoad() { super.viewDidLoad() view.addSubview(scrollView) let subViewH: CGFloat = 400 let topView = UIView(frame: CGRect(x: 0, y: 0, width: enW, height: subViewH)) topView.backgroundColor = UIColor.red scrollView.addSubview(topView) let bottomView = UIView(frame: CGRect(x: 0, y: subViewH, h: screenW, height: subViewH)) bottomView.backgroundColor = UIColor.purple scrollView.addSubview(bottomView) scrollView.contentSize = CGSize(width: screenW, height: iewH * 2)}

效果圖

scrollview_純代碼實現.gif

Storyboard + 內部View

特點

搭建界面簡單
直觀
需要占位視圖

頁面結構如圖

可能出現的問題

ScrollView 中直接添加子元素，報錯：Has ambiguous scrollable content height
ScrollView 內容超出屏幕仍不能滾動

實現滾動的代碼

override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() let statusBarH: CGFloat = 20 // 如果沒有導航欄，就返回狀態欄的高度 let navH = gationController?.navigationBar.frame.maxY ?? statusBarH let deltaH = (screenH - navH) - bottomView.frame.maxY placeholderViewBottomConstraint.constant = deltaH}

效果圖

Scrollview_SB+InnerView.gif

Storyboard + 外部View

特點

搭建界面簡單
直觀
不需要占位視圖，不需要對 ScrollView 的布局做特殊處理
需要處理外部視圖的 frame（如果沒有用戶交互，可以忽略）

頁面結構如圖

Scrollview_SB+OutterView.png

可能出現的問題

ScrollView 中直接添加子元素，報錯：Has ambiguous scrollable content height
當內容超出屏幕高度時，必須得設置 ContainerView 的 frame，否則不能滾動或者超出屏幕部分不接受事件

Scrollview_SB+OutterView_事件問題.png

實現滾動的代碼

override func viewDidLoad() { super.viewDidLoad() scrollView.addSubview(containerView)}override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() var f = containerView.frame f.size.width = screenW // 這句代碼很重要，處理超出屏幕無法響應事件問題 f.size.height = bottomView.frame.maxY containerView.frame = f scrollView.contentSize = CGSize(width: screenW, height: omView.frame.maxY)}

效果圖

Scrollview_SB+OutterView.gif