在使用storyboard和xib时,我们经常要用到ScrollView,还有自动 布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂。根据实践,我说一下我的理解,在故事板或xib中,ScrollView是根据其下面的一个View的大小来确定 ContentSize的大小。

看一下效果

1. 创建一个项目,拖拽一个ScrollView到故事板中,如下图

2. 选中ScrollView,添加约束。

3. 拖拽一个View到ScrollView上, 然后添加上下左右四周约束。

4.添加完之后, 可能会报一个错, 如下图, 这个暂时别去管。

5. 我们先确定一下, 我们是需要水平方向的滚动还是竖直方向的滚动,或者水平方向和竖直方向都需要滚动。

a.水平方向和竖直方向都需要滚动的话, 不用添加

b.水平方向滚动需要添加下面一个约束

c.竖直方向需要添加下面一个约束

6.我们以水平方向滚动为例,  我们需要确定我们想要的宽度, 添加一个固定的宽度的约束。

7.选中View, 更新一下Frame

8.如果是想要动态设置ScrollView的宽度,也就是设置View的宽度约束的值, 我们将其拉成属性, 然后修改其值。

9. 如果是确定的宽度, 可以在- (void)updateViewConstraints这个方法中修改,也可以在别处修改。

10.现在运行,就可以水平滚动了。 竖直方向的滚动和水平方向滚动的设置差不多。 我们来添加两个View, 先拖拽一个View(我设为灰色)到视图上, 然后添加约束, 如下图

11.再拖拽一个View, 背景颜色设为红色,设置好之后, 将frame设置到我们需要的, 我这边将X设置到600。

12.我们给第二个View添加约束,如下图

13.我们还需要设置一个约束, 就是第二个View距离SuperView的距离,就是第二个View的Leading约束

14.然后将这个约束Leading拉成属性,在- (void)updateViewConstraints设置他的值

如下图

这样子就OK了。

自动布局需要自己去多多实践, 有很多细节需要注意的。

这个例子的demo地址:http://download.csdn.net/detail/h1101723183/8253159

竖直方向的Demo下载地址在 http://download.csdn.net/detail/h1101723183/8266503

storyBoard方式ScrollView的AutoLayout的更多相关文章

  1. 使用StoryBoard设置Scrollview的横向滚动不用一行代码

    1).创建一个空工程Single类型的工程,然后打开故事版(StoryBoard)在ViewController上添加scrollview 2).然后对scrollview添加约束,上下左右全部都是0 ...

  2. 在StoryBoard对UICollectionViewCell 进行Autolayout是遇到的Xcode6.01的BUG

    使用Sb对UICollectionViewCell 的内容进行Autolayout约束时候,发现了一个Xcode6.01的BUG,就是你对UICollectionCell约束完了之后,在模拟器上现实的 ...

  3. 【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)

    关于AutoLayout,最早从iOS6开始引入使用.   主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换.   网上大量的资料都在介绍xib和storyboard,如何使用AutoLa ...

  4. iOS开发——使用基于Autolayout的ScrollView

    问题描述: 在使用Autolayout布局方式对ScrollView进行布局时,如果你想做一个可以垂直方向滚动的九宫格类似这样:   拿一行来说,一定不要想当然的尝试去给一行图标进行均匀排列的操作(指 ...

  5. xib和Storyboard 创建Cell的方式

    xib 方式 .在Cell.h文件中加一个宏 #define cellIdentifier @"customCell" . ViewController中: - (void)vie ...

  6. 在Scrollview中使用AutoLayout

    AutoLayout 与 UIScrollView的相遇是一个不可避免的场景,像UITableView.UIWebView这些都是继承于UIScrollView的,关于它们的autolayout布局大 ...

  7. 【转】iOS学习之Storyboard中的UIScrollView使用自动布局

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...

  8. iOS之XIB拖拽scrollView

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...

  9. iOS开发-Autolayout小结

    昨天重点学习了下Autolayout,把以前没有吃透的概念重新理解了下,现在感觉整个人都是棒棒哒. 上一个项目是使用计算坐标代码的方式来布局UI界面,这种方式的缺点在于当苹果发布新尺寸设备时需要重写代 ...

随机推荐

  1. CSS布局模型思考

    flow模型:默认布局模型,元素从左向右.从上到下依次排列,块状元素独占一行.Position属性对应值static. float模型:主要效果是让本来独占一行的块状元素变成内联-块状元素,并到一排显 ...

  2. (java)从零开始之--异常处理(以文件拷贝为例)

    开发过程中避免不了对异常的处理,但是异常的处理又不能乱throw 下面是简单的抛异常处理 public static void CopyFile(String souFile,String dirFi ...

  3. in_array 判断问题的疑惑解决。

    面试题中有一条是关于in_array判断的,题目如下: 如何大家没有深入了解in_array的类型判断过程,而是根据经验来选择,肯定很多人也是是选择了D答案的,具体的原因我也是从牛人的博客里面得到答案 ...

  4. [转]iframe自适应宽度高度

    <iframe id="iframe" onLoad="AutoFit();" frameborder="0" scrolling=& ...

  5. [C#]获取最近在Windows上所使用的文件

    class RecentlyFileHelper { public static string GetShortcutTargetFile(string shortcutFilename) { var ...

  6. php 上传视频的代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. input里面的查找标记 ő

    <i id="J_SearchIcon" class="iconfont">ő</i> .iconfont {ont-family: i ...

  8. DEDECMS栏目自定义字段添加

    用到的文件: catalog_add.htm  路径:\dede\templets\ catalog_edit.htm  路径:\dede\templets\  catalog_add.php  路径 ...

  9. 香港house of hello品牌包包是怎样被模仿呢?

    今天,作为女性的朋友来说,house of hello包包可能对大家都不会陌生吧,特别是一些白领阶层的女性同胞们,这个品牌比较熟悉,现在,也有网友称,这个是恶搞包包.house of hello包包原 ...

  10. 单片机IO处理 电容触摸按键

    原理说明: 通过检测感应按键PAD的电容量变化来判断是否有触摸动作.当手指触摸PAD时,电容量增加,充放电时间变长. 本方案中利用M48的20个双向IO口实现了20个触摸按键,而且所用原器件最少.其中 ...