一、前言
最開始使用UIScrollVIew都是用純代碼實(shí)現(xiàn)布局的，后來(lái)為了提高開發(fā)效率使用IB的AutoLayout自動(dòng)布局，由于UIScrollView與一般視圖的自動(dòng)布局約束方式有些不同，如果不了解其中的原理或者不經(jīng)常使用AutoLayout實(shí)現(xiàn)自動(dòng)布局，突然要用AutoLayout來(lái)實(shí)現(xiàn)UIScrollView的布局，很可能就會(huì)感覺(jué)很困難，為了加深記憶和以后開發(fā)的便利特地寫了這篇文章。
二、具體步驟
- 將
scrollView拖進(jìn)視圖控制器的View，并設(shè)置上下左右約束為0； - 將一個(gè)
View拖進(jìn)srollView作為所有subviews的父容器視圖contentView；
scollView的自動(dòng)布局涉及到它內(nèi)部的frameLayoutGuide與contentLayoutGuide屬性
@available(iOS 11.0, *)
open var frameLayoutGuide: UILayoutGuide { get }
Use this layout guide when you want to create Auto Layout constraints related to the content area of a scroll view.
當(dāng)您想要?jiǎng)?chuàng)建明確涉及滾動(dòng)視圖本身的框架矩形而不是其內(nèi)容矩形的自動(dòng)布局約束時(shí)，請(qǐng)使用此布局指南。
@available(iOS 11.0, *)
open var contentLayoutGuide: UILayoutGuide { get }
Use this layout guide when you want to create Auto Layout constraints that explicitly involve the frame rectangle of the scroll view itself, as opposed to its content rectangle.
當(dāng)您想要?jiǎng)?chuàng)建與滾動(dòng)視圖的內(nèi)容區(qū)域相關(guān)的自動(dòng)布局約束時(shí)，請(qǐng)使用此布局指南。
從蘋果的官方文檔的說(shuō)明中，我們可以看出frameLayoutGuide主要是用來(lái)設(shè)置與scrollView的frame有關(guān)的約束，比如內(nèi)容區(qū)的寬或高是與frame的對(duì)應(yīng)值相等，x橫坐標(biāo)或者y縱坐標(biāo)與frame的對(duì)應(yīng)值相等的，而contentLayoutGuide主要是用來(lái)設(shè)置與滾動(dòng)的內(nèi)容區(qū)域有關(guān)的約束，例如：內(nèi)容區(qū)是縱向滾動(dòng)的，那么內(nèi)容區(qū)的top和bottom是與contentLayoutGuide相等的，水平方向是與它中間對(duì)齊的。
- 設(shè)置
contentView與scrollView的frameLayoutGuide的左、右兩個(gè)方向的約束為0；
因?yàn)?code>contentView與scrollView等寬且橫軸方向位置固定為0。
- 設(shè)置
contentView與scrollView的contentLayoutGuide的上、下兩個(gè)方向的約束為0，水平方向中間對(duì)齊；
因?yàn)?code>contenView即scrollView的內(nèi)容區(qū)且縱向滾動(dòng)，所以縱軸方向與內(nèi)容區(qū)的相對(duì)位置固定，與內(nèi)容區(qū)水平方向?qū)R。
- 約束好內(nèi)容區(qū)即
contentView的高度;
上一步設(shè)置完約束還是會(huì)報(bào)錯(cuò)，因?yàn)閮?nèi)容區(qū)即contenView的高度還未確定，如果內(nèi)容區(qū)的高度是固定的，可以設(shè)置contentView的高度約束為固定值；如果內(nèi)容區(qū)高度根據(jù)不同的內(nèi)容而變化，那就不需要設(shè)置contentView的高度約束，只要根據(jù)需要將控件添加到contentView，然后從上到下設(shè)置好各個(gè)控件縱向的約束。
三、結(jié)語(yǔ)
本篇文章介紹的只是UIScollView縱向滾動(dòng)自動(dòng)布局的實(shí)現(xiàn)，但是我相信大家看完這篇文章后應(yīng)該可以舉一反三，自己實(shí)現(xiàn)UIScollView橫向滾動(dòng)自動(dòng)布局的設(shè)置。
