[iOS] Storyboard (4) -- 實踐:UIScrollView

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, 如下圖所示:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。