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， 如下圖所示：
