之前在使用AutoLayout給UIScrollView進(jìn)行布局的時(shí)候,總會(huì)出現(xiàn)點(diǎn)這樣那樣莫名其妙的問(wèn)題.我也曾跳坑兩次,掙扎許久最后都以放棄storyboard改為代碼實(shí)現(xiàn)而告終.今天終得正解,遂拿出來(lái)說(shuō)說(shuō).
先從最基礎(chǔ)的開(kāi)始,我們?cè)囍趕toryboard上添加一個(gè)UIScrollView,并且在內(nèi)部添加一個(gè)和它一樣大的UIImageView.
首先,拖一個(gè)UIScrollView到storyboard,設(shè)置約束如下:
頂部距離控制器view距離為50
左側(cè)和右側(cè)距離控制器view距離分別為0
高度固定250(多吉利的數(shù)字)
然后拖一個(gè)UIImageView到scrollView中,我們想讓它在{0,0}處并和scrollView的尺寸一樣,于是設(shè)置上下左右距離父控件都為0:
好像沒(méi)什么問(wèn)題,可是...
沒(méi)看錯(cuò),Xcode告訴我們這樣安排約束是錯(cuò)誤的.
UIScrollView的子控件添加約束與普通view不同,僅僅這4個(gè)約束不足以滿(mǎn)足它的需求.
那么,怎樣才是正確的做法呢?
首先:
scrollView自身的約束(scrollView的位置和尺寸)可以像正常的UIView一樣參照其父控件添加.
正如上面我們第一步所做的,在給scrollView添加子控件之前,那四個(gè)約束決定了scrollView的大小和位置,這步是沒(méi)有問(wèn)題的.
問(wèn)題的關(guān)鍵在于如何給scrollView內(nèi)部的子控件添加約束.
scrollView內(nèi)部子控件約束的添加需要遵循兩個(gè)原則:
1、scrollView內(nèi)部子控件的尺寸不能以scrollView的尺寸為參照
2、scrollView內(nèi)部的子控件的約束必須完整
首先,子控件的尺寸不能以scrollView的尺寸為參照,那么我們有兩種選擇:
- 提供一個(gè)具體值的約束(比如200)
- 子控件的尺寸可以參照scrollView以外其它的控件的尺寸(如控制器的view的尺寸)
其次,約束"完整"的意思是說(shuō):子控件在水平及豎直方向上的約束要把scrollView"撐滿(mǎn)".
也就是說(shuō),在水平方向上,我們需要設(shè)置:
- 子控件左側(cè)與父控件的距離
- 子控件自身的寬度
- 子控件右側(cè)距父控件的距離.
豎直方向上也一樣,要設(shè)置:
- 子控件頂部距父控件的距離
- 子控件的高度
- 子控件底部距父控件的距離.
如圖:
兩張圖片中,所有紅色線條的長(zhǎng)度都要確定(黃線表示對(duì)齊),才能保證AutoLayout不會(huì)報(bào)錯(cuò).
為什么scrollView如此隔路(隔路:特殊,與眾不同)呢?
這是因?yàn)?scrollView需要根據(jù)添加在其內(nèi)部的子控件的寬高及與四周的距離計(jì)算出它的contentSize.
舉個(gè)栗子:
一個(gè)添加在scrollView內(nèi)部的imageView的寬高為{80, 50}, imageView距離上左下右的距離分別為:100, 200, 300, 400,那么不需要用代碼賦值contentSize,我們就可以打印出scrollView的contentSize為{680, 450}.
如圖:
如果理解起來(lái)還是有困難,我們可以把scrollView的contentSize的范圍想象成一塊UIView(上圖中的藍(lán)色區(qū)域),暫且叫它c(diǎn)ontainer(實(shí)際是沒(méi)有這個(gè)東西的).當(dāng)我們?cè)趕toryboard或xib中設(shè)置子控件與scrollView之間約束時(shí),實(shí)際上設(shè)置的是子控件與container之間的約束.
也就是說(shuō),子控件的約束決定了container的尺寸(contentSize).
這就說(shuō)明了為什么我們要在水平和豎直方向用約束"撐滿(mǎn)".如果不撐滿(mǎn),container不知道它自己應(yīng)該多大.
也正是因?yàn)閏ontainer的尺寸由子控件的約束決定,所以子控件的尺寸不能再反過(guò)來(lái)參照container的尺寸.不然你等于我,我等于你,那到底是多少呢?如果你是Xcode你也會(huì)抓狂.(再次強(qiáng)調(diào)那個(gè)container不是真的,只是為了方便理解)
理論部分解釋完畢,回到一開(kāi)始的案例上.
imageView有了上下左右四個(gè)約束,還缺少寬高,我們?cè)偬砑觽€(gè)固定寬高的約束(可以大一點(diǎn),太小了看不到滾動(dòng)效果),問(wèn)題就可以解決了.
強(qiáng)調(diào)一下, 用代碼給scrollView添加約束(包括使用Masonry的情況)是一樣的.
填平一坑,心中大喜.掌握了這些,復(fù)雜一點(diǎn)的scrollView布局我們也不怕了.
給大家出個(gè)題目,如果是要在scrollView里面添加三張水平方向滾動(dòng)的圖片怎么搞? 參考答案:https://github.com/CoderAO/UIScrollViewAutoLayout
