前言

眾所周知我們大家在開(kāi)發(fā)中，可能會(huì)有一些頁(yè)面顯示的元素很多，可能會(huì)超出一個(gè)屏幕，但也不適合用 TableView 或者 CollectionView，此時(shí)我們一般會(huì)用 ScrollView，那么就會(huì)出現(xiàn)自動(dòng)布局的問(wèn)題。下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

實(shí)現(xiàn)方式

純代碼

• 特點(diǎn)編碼繁瑣：需要手寫(xiě)控件
• 安全：只要正確地設(shè)置約束或者 frame、contentSize，一般不會(huì)出現(xiàn)滾動(dòng)問(wèn)題

示例

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

效果圖

Storyboard + 內(nèi)部View

特點(diǎn)

• 搭建界面簡(jiǎn)單
• 直觀
• 需要占位視圖

頁(yè)面結(jié)構(gòu)如圖

可能出現(xiàn)的問(wèn)題

• ScrollView 中直接添加子元素，報(bào)錯(cuò)：Has ambiguous scrollable content height
• ScrollView 內(nèi)容超出屏幕仍不能滾動(dòng)

實(shí)現(xiàn)滾動(dòng)的代碼

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

效果圖

Storyboard + 外部View

特點(diǎn)

• 搭建界面簡(jiǎn)單
• 直觀
• 不需要占位視圖，不需要對(duì) ScrollView 的布局做特殊處理
• 需要處理外部視圖的 frame（如果沒(méi)有用戶(hù)交互，可以忽略）

頁(yè)面結(jié)構(gòu)如圖

可能出現(xiàn)的問(wèn)題

• ScrollView 中直接添加子元素，報(bào)錯(cuò)：Has ambiguous scrollable content height
• 當(dāng)內(nèi)容超出屏幕高度時(shí)，必須得設(shè)置 ContainerView 的 frame，否則不能滾動(dòng)或者超出屏幕部分不接受事件

實(shí)現(xiàn)滾動(dòng)的代碼

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

效果圖

總結(jié)

ScrollView 不能滾動(dòng)的原因

• contentSize 小于自身 frame 的尺寸
• isScrollEnabled 屬性，不過(guò)它默認(rèn)就是 true，默認(rèn)無(wú)需設(shè)置
• ScrollView 或者其父元素?zé)o法交互，此時(shí)我們需要檢查 isUserInteractionEnabled 屬性是否為 true

ScrollView 一直支持滾動(dòng)

默認(rèn)情況下，當(dāng) ScrollView 里的元素不足一個(gè)屏幕高度時(shí)，不能滾動(dòng)，如需滾動(dòng)（彈簧效果），需要設(shè)置 alwaysBounceVertical 屬性為 true（水平方向亦如此）

關(guān)于 ScrollView 布局的選擇

純代碼布局

如果是純代碼布局，只能用方式一。老老實(shí)實(shí)、一行一行代碼實(shí)現(xiàn)布局，雖然代碼繁雜，但是坑少。（現(xiàn)在仍有不少公司是這樣編程的）

界面布局

推薦方式三，這樣 ScrollView 和 其子元素分離，可以簡(jiǎn)化很多約束問(wèn)題，更直觀

以上代碼，適用于 Swift 3.0 語(yǔ)法。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論