Storyboard 系列文章
[iOS] Storyboard (1) -- 入門:API 篇
[iOS] Storyboard (2) --入門:約束篇
[iOS] Storyboard (3) -- 使用:常用Tips
[iOS] Storyboard (4) -- 實踐:問題總結
[iOS] Storyboard (4) -- 實踐:UIScrollView
[iOS] Storyboard (4) -- 實踐:UICollectionView
滾動視圖 UIScrollView
對于Storyboard
中使用的時候和一般控件不太一樣, 本文主要介紹如何在 Storyboard
添加約束和布局子控件;
第一步: 添加 UIScrollView
拖拽一個 UIScrollView
, 添加到當前視圖, 添加自己需要的約束, 這里使 UIScrollView
全屏顯示, 添加約束如下:
第二步: 添加 contentView
如果想要 ScrollView
能夠滑動, 需要一個 ContentView
將其 contentSize
撐起來, 添加該 View
后, 所有需要顯示的子視圖都添加到該contentView
即可;
對該ContentView
添加約束的時候, 需要一些注意點, 首先我們添加一個全屏(相對于 ScrollView
)約束:
綠色視圖即為 contentView
添加后, 會發現, 約束會爆紅:
這里我將 ScrollView 的背景色改為灰色;
爆紅的約束先無視, 接下來添加一個關鍵的操作, 如果想要內容視圖只能上下滑動, 我需要將該 contentView
的寬設置為和 ScrollView
等寬, 即添加如下約束:
這時候, 約束依然是爆紅狀態, 先不用管, 添加完成的約束如下:
第三步: 添加子視圖
接下來, 我們添加兩個子視圖, 這里直接添加了兩個 View , 并設置其高度之和超過了屏幕的高度, 不然也不會有滑動的效果, 添加的約束如下:
可以看到藍色視圖已經超出了屏幕的范圍, 這時候整體約束還是會爆紅; 接下來還有最后關鍵的一部
第四步: 最后關鍵收尾約束
最后想要將 contentView
撐起來, 還有最后一個關鍵約束, 即: 使最后一個視圖的底與 contentView
的底 添加相對約束:
這時候你會發現, 所有的約束也不爆紅了;
到此, 所有的約束添加完成, 跑起來看看效果:
效果完美;
PS: 如果發現有滑動不到底部的情況, 檢查下最后那個視圖添加的約束, 相對值是不是負值
結束語
本文設置的是豎向滑動, 所以在第二步添加 contentView
的時候, 設置其寬與其父視圖相同; 如果要想橫向滑動, 我們需要固定其高, 所以這一步修改為其高和其父視圖相同即可.
附
1. 報錯 Content and frame layout guides before iOS 11.0
新版Xcode 會報如下的錯誤
解決方法:
在Storyboard 中選中Scrollview,然后在右側工具欄找到 “show the file inspector -> Interface Builder Document -> Builds for” 選擇 iOS 11.0 and Later, 如下圖所示: