一、Storyboard中的UIScrollView使用自动布局

在使用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

iOS - UIScrollView xib添加约束的坑的更多相关文章

  1. iOS开发小技巧--UIScrollView内部子控件添加约束的注意点

    注意:用UIScrollView时布局子控件的时候,不要相对于UIScrollView来添加约束,这样做不是设置子控件的位置,反而是设置了UIScrollView的contentSize 子控件的尺寸 ...

  2. iOS - XIB之AutoLayout添加约束

    XIB--AutoLayout添加约束 仿QQ登录界面: 说明:以下各图背景红色只是方便看清楚: 1.创建工程:创建xib文件 2.打开xib文件: (1).创建头像: 拖控件:uiimageview ...

  3. uiscrollView UINavigation和uitabbar添加约束的问题

    首先是层次问题, 我的storyboard中 底层是一个View(viewcontroller自带)上面添加了一个UIScrollview(添加约束, 上下左右全为0), 在UIScrollview上 ...

  4. 怎样使用AutoLayOut为UIScrollView添加约束

    1.在ViewController中拖入1个UIScrollView,并为其添加约束 约束为上下左右四边与superview对齐 2.在scrollview中,拖入1个UIView,为了便于区分将其设 ...

  5. Storyboard中使用UIscrollView添加约束的开发总结

    第一次在项目中用storyboard做界面,一般的界面直接添加约束非常爽快 然后有个界面有scrollview,添加了约束还总是出错 刚开始使用了 wCompact,hRegular,滑动出现问题,有 ...

  6. 58.UIScrollView XIB拖拽约束

    第一步: 拖拽UIScrollView 到控制器上 ,给scrollView 添加约束 ,这时是正常的 第二步:scrollview上添加UIview ,(注意:这个 ScrollView就是根据这个 ...

  7. ios UIScrolloView在storyboard中添加约束

    1.在storyboard中如果有UINavigationbar 或 UITabar 布局的时候需要在控制器中勾选掉 Under Top Bars 和 Under Bottom Bars 这两个选项. ...

  8. IOS NSLayoutConstraint 页面布局(通过代码添加约束)

    #import "ViewController.h" @interface ViewController () @property (nonatomic, strong) UIVi ...

  9. iOS之XIB拖拽scrollView

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

随机推荐

  1. 基于jQuery/CSS3实现拼图效果的相册插件

    今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...

  2. C语言 · 十六进制转八进制

    基础练习 十六进制转八进制   时间限制:1.0s   内存限制:512.0MB        锦囊1: 使用二进制.   问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的 ...

  3. linux内核阻塞IO

    阻塞操作是指在执行设备操作时,若不能获得资源,则挂起进程直到满足可操作的条件后再进行操作.被挂起的进程进入休眠状态,被从调度器的运行队列移走,知道等待的条件被满足.而非阻塞的进程在不能进行设备操作时, ...

  4. uboot中变量env(收集)

    Env在u-boot中通常有两种存在方式,在永久性存储介质中(flash.NVRAM等),在SDRAM中.可配置不适用env的永久存储方式,但不常用.U-boot在启动时会将存储在永久性存储介质中的e ...

  5. android矩阵具体解释

    Matrix.中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成.是一个3*3的矩阵. 最好记住.例如以 ...

  6. 二叉树的java实现

    一.分析 一个二叉树节点有三个部分,一个是指向左子树的部分,一个是指向右子树的部分,另外一个是数据部分.可以把这个节点抽象成一个节点对象,给对象有两个节点对象属性和一个数据属性.如下图: 一个二叉树有 ...

  7. thinkphp 第一个设计总结

    1.thinkphp的无限级分类不是万能的... 2.感觉先看前台(根据前台设计数据库)后写控制代码(后台),速度或许会快一点,思路明确...

  8. imx6 gpio分析

    本文主要介绍如何配置IOMUX寄存器,设置IO复用寄存器,配置为GPIO功能.参考: http://www.jianshu.com/p/3c2053508342 http://www.embest-t ...

  9. 第三百零六节,Django框架,models.py模块,数据库操作——创建表、数据类型、索引、admin后台,补充Django目录说明以及全局配置文件配置

    Django框架,models.py模块,数据库操作——创建表.数据类型.索引.admin后台,补充Django目录说明以及全局配置文件配置 数据库配置 django默认支持sqlite,mysql, ...

  10. Codeforces Round #Pi (Div. 2) —— D One-Dimensional Battle Ships

    题目的意思是: 如今有一个长度为n,宽为1的方格,在上面能够放大小为1*a船,然后输入为n,k,a.分别为平地的大小,船的数量,船的长度. 一个叫alice的人已经在地图上摆好了船的位置. 然后bob ...