在UIScrollView上加約束

在UIScrollView上添加子控件,對其添加約束是有幾點是需要注意的

UIScrollView是一個內(nèi)容可以滾動的視圖,在不使用AutoLayout的時候,需要手動設(shè)置它的contentSize,才能滾動。iOS開發(fā)到了如今這個階段,很少有不用AutoLayout的了,那么在自動布局中UIScrollView應(yīng)該怎樣的設(shè)置約束呢?

我認為一個視圖的約束本質(zhì)還是來確定其frame的(位置和大?。?,在xib中添加約束,一個view需要設(shè)置居上(top)居左(leading)寬和高的約束,這樣就不會報紅色警告,而label只需要設(shè)置居上居左兩條約束即可,這是因為label的寬和高可以由文字來確定,所以也不會報紅的。

UIScrollView比較特殊,添加在UIScrollView上的子控件,不光需要確定自己本身的frame 還要確定其父視圖UIScrollView的contentSize。如下圖我為view設(shè)置居上居左 寬和高 xib會提示缺失約束

圖1

當我又為view增加了居下(bottom)和居右(trailing)的約束后就沒問題了

圖2

在viewDidAppear是會發(fā)現(xiàn)contentSize是{375 ,700},為什么呢,請看圖2:view的height為600 top為100 bottom 為0 所以UIScrollView的contentSize.height = 700;view的width 等于控制器view的寬,我在iPhone7的模擬器上運行,所以contentSize.width = 375

圖3

如圖4 當我需要使用scrollView的時候,通常會先添加一個view作為容器(記作containerView),然后在containerView上添加子視圖和約束,我在containerView上添加了5個顏色的view,又分別在這5個view上添加了5個label(自動換行)

圖4

來看一下單個顏色的view是如何加的約束,以orangeView為例(另外4個同樣)ps(可以看的出來我并沒有給orangeView加高的約束)


圖5

每個顏色view的內(nèi)部約束都是這樣的,現(xiàn)在來看各個顏色view之間的約束,從上到下間距為0,注意劃紅線的兩條約束,orangeView的top = containerView的top ,blue的bottom = containerView的bottom。注意:此時我已將containerView的height的約束刪除掉了,由上圖5的約束,可以將各個顏色的view的高度確定下來,然后再由圖6的約束又可以將containerView的高度確定下來。


圖6

到此時約束已經(jīng)添加完畢了,我將5個label拖線出去,分別給text賦值,運行打印如圖7

圖7


效果圖

附實現(xiàn)過程:

1.UIScrollView 添加約束

2.在scrollView上添加containerVIew,約束 :上下左右 寬(可與viewController.view等寬 可固定寬 ) 高(先隨便設(shè)置一個數(shù)值)

3.在containerView上添加五個不同顏色的view ,約束: 從上到下,左( leading),右( trailing) ,高度(先隨便設(shè)置一個數(shù)值) 這一步驟執(zhí)行完之后,可以將步驟2中隨便設(shè)置的高度刪掉了。

4.在各個顏色的view上各天添加一個label(設(shè)置自動換行) ,約束 上,下,左( leading),右( trailing),這一步驟執(zhí)行完之后,可以將步驟3中隨便設(shè)置的高度刪掉了。至此約束添加完畢

ps.步驟三執(zhí)行完之后會報紅的,將步驟2中隨便設(shè)置的高度刪掉就OK了

使用Masnory布局的在demo中,文章里就不贅述了。

demo地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • UIScrollView 約束設(shè)置曾一直困擾著iOS開發(fā)小伙伴們。趁著這次和幾位小伙伴們分享我在做UIScroll...
    Show_Perry閱讀 1,578評論 0 5
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,189評論 4 61
  • 翻譯自“Auto Layout Guide”。 2 自動布局細則手冊 2.1 堆棧視圖 接下來的章節(jié)展示了如何使用...
    lakerszhy閱讀 1,987評論 3 9
  • 假如我是真正悲傷, 陰云里透不過的陽光, 總有一口氣壓在心底, 無雨,只是承受著陰云; 假如我是真正快樂, 看不見...
    眼白閱讀 176評論 0 0
  • 文 |紫蒲溪溪主 心情不佳,找事打發(fā),就打開了08版的《射雕英雄傳》,看了起來。雖說17版的射雕都出來了,可是人臉...
    紫蒲溪溪主閱讀 1,110評論 3 6

友情鏈接更多精彩內(nèi)容