1. 程式人生 > >在storyboard或者xib中使用autolayout對UIScrollView進行佈局需要注意的問題

在storyboard或者xib中使用autolayout對UIScrollView進行佈局需要注意的問題

為了方便描述問題,我們從一個簡單的例子開始說起

  • 首先在storyboard中拖入UIScrollView設定它的Leading Trailing Top 再給定一個高度height為200,再簡單不過的一個自動佈局
    這裡寫圖片描述
  • 完成後成功新增沒有一點問題,我們設定這個scrollView的背景顏色為灰色,然後往它上面再增加一個普通的uiview設定背景顏色為紅色
    這裡寫圖片描述
  • 注意這個時候左邊的場景面板中出現了紅色錯誤提示,這個時候我們還並沒有任何自動佈局約束,如果是加在其他view中是沒有這個錯誤的,那肯定是自動佈局之外的影響了這個view,點進去會看到Has ambiguous scrollable content width的錯誤提醒,意思是可滾動的內容寬度不清晰
    這裡寫圖片描述
  • 那我們這時給這個紅色view增加約束緊貼scrollView看還有沒有這個問題
    這裡寫圖片描述
  • 此時還是有同樣的錯誤出現,Need Constraints for:X position or width說我們的scrollView約束缺少x的位置或者寬度,這是什麼原因呢
    這裡寫圖片描述

使用autoLayout設定UIScrollView的contentSize

  • 大家可能會發現一個問題了,平時我們通過程式碼設定uiscrollview的時候都會設定它的contentSize,但是在storyboard中並沒有告訴它UIScrollView的contentsize的frame,這時我們需要指定紅色view距離contentSize的長度來確定contentSize的位置和大小,當然蘋果官方也是建議通過這種方式來確定contentSize,那接下來我們就來試一試

  • 我們已經設定了紅色view相對scrollView的距離,大家需要明確一點這個時候的距離其實是指相對於scrollView的contentSize的距離,所以還缺少約束,這時我們設定紅色view的width,height跟scrollView的一樣(當然你也可以直接設定數值),那麼這個時候storyboard已經可以肯定contentSize的frame了,等價於frame = CGRectMake(0,0,redView.widht,redView.height)
    這裡寫圖片描述

  • 這時沒問題了,我們執行程式
    這裡寫圖片描述

  • 沒有問題了,如果你想上下拖動會發現沒有效果,如果想達到像tableview的效果,你可以設定contentSize的高度比紅色view多1,或者設定scrollView的scrollView.alwaysBounceVertical = YES;
    這裡寫圖片描述

  • 在執行程式,這樣就可以達到效果了,而且豎直方向上沒有滾動條出現,當然為了保險,以及以後相容性可以將scrollView設定面板上把豎直方向的指示條取消掉
    這裡寫圖片描述
    這裡寫圖片描述