天天看點

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

 在使用storyboard和xib時,我們經常要用到ScrollView,還有自動布局AutoLayout,但是ScrollView和AutoLayout 結合使用,相對來說有點複雜。根據實踐,我說一下我的了解,在故事闆或xib中,ScrollView是根據其下面的一個View的大小來确定ContentSize的大小。

看一下效果

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

1. 建立一個項目,拖拽一個ScrollView到故事闆中,如下圖

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

2. 選中ScrollView,添加限制。

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

3. 拖拽一個View到ScrollView上, 然後添加上下左右四周限制。

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

4.添加完之後, 可能會報一個錯, 如下圖, 這個暫時别去管。 

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

5. 我們先确定一下, 我們是需要水準方向的滾動還是豎直方向的滾動,或者水準方向和豎直方向都需要滾動。

a.水準方向和豎直方向都需要滾動的話, 不用添加

b.水準方向滾動需要添加下面一個限制

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

c.豎直方向需要添加下面一個限制

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

6.我們以水準方向滾動為例,  我們需要确定我們想要的寬度, 添加一個固定的寬度的限制。

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

7.選中View, 更新一下Frame

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

8.如果是想要動态設定ScrollView的寬度,也就是設定View的寬度限制的值, 我們将其拉成屬性, 然後修改其值。

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

9. 如果是确定的寬度, 可以在- (void)updateViewConstraints這個方法中修改,也可以在别處修改。

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

10.現在運作,就可以水準滾動了。 豎直方向的滾動和水準方向滾動的設定差不多。 我們來添加兩個View, 先拖拽一個View(我設為灰色)到視圖上, 然後添加限制, 如下圖

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

11.再拖拽一個View, 背景顔色設為紅色,設定好之後, 将frame設定到我們需要的, 我這邊将X設定到600。

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

12.我們給第二個View添加限制,如下圖

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

13.我們還需要設定一個限制, 就是第二個View距離SuperView的距離,就是第二個View的Leading限制

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

14.然後将這個限制Leading拉成屬性,在- (void)updateViewConstraints設定他的值

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

如下圖

【轉】iOS學習之Storyboard中的UIScrollView使用自動布局

這樣子就OK了。 

自動布局需要自己去多多實踐, 有很多細節需要注意的。 

本文原文來自http://www.cocoachina.com/ios/20150104/10810.html

繼續閱讀