ios自动布局autolayout 实现scrollView

       随着苹果设备的增加:如4s(3.5寸),5s(4寸),6(4.7寸)以及6plus(5.5寸)。屏幕尺寸越来越多假如我们还是选择全部用代码来写也是比较繁琐的,幸好xcode的autolayout机制越加完善这也让xib使用起来更加便利。一直纯代码实现界面,接触autolayout的约束没有多久,这还要多亏了以下两篇入门文章:


开始iOS 7中自动布局教程(一)

开始iOS 7中自动布局教程(二)


      但是这些只是一个基础,最近项目中大量使用xib的,必然会遇到一个问题,滚动视图。网上查了很多文章到底怎么结合autolayout来完成scrollView布局,去看了scrollView的实现机制,得出结论,UIScrollView 有一个 contentSize 属性,其定义了 ScrollView 可滚动内容的大小。在以前用纯代码写的时候,我们会直接对这个属性赋值,定义其大小就可以实现视图滚动。但在 Autolayout 下,UIScrollView 的 contentSize 是由其内容的约束来定义的。由此得出结论,假如scrollView里面放的view超出了滚动视图大小时候就可以实现滚动。

下面具体解释到底怎么做的:(这里示例垂直方向上的滚动)

   1、首先新建一个简单项目取名ScrollViewInAutolayout-Vertical,在Main.storyboard里面拖入一个滚动视图,界面使用4寸屏做示例,大小如下:

                                   

   2、添加上下左右四个约束如下图,通过xcode下面的快捷工具来添加:

添加四个约束(Add 4 Constraints),这样scroll据左据右据上据下的长度都是0 ,也就是跟主界面贴合。

也可以通过下图的Leading Space to Superview,Trailing Space to Superview,Top Space to Superview,Bottom Space to Superview来添加相同的约束。

再添加一个水平居中的的约束


  3、往里面拖入一个view,大小界面层次结构如下:

4、添加上下左右三个约束跟上面帮srollView添加约束方法一样,选中View,然后通过下面的快捷工具添加:

                                                   

添加高度约束598:

                                                                             

                                              

再与scrollView设置水平居中方法一样对View界面设置水平居中,完成之后view界面约束效果图如下:



5、然后随意拖入三个控件,如label,button,switch  这个三个控件,分别设置约束如下:

label:居上130,据左44

button:居上500,据左44

switch:居上300,据左44

可以先一次性设置好,然后选中所以位置不对的控件,点击最右边的工具Update Frame


最终完成之后所有的约束情况如下:

然后我们将view的高度的约束连线到代码中,在更新约束的时候设置view高度约束为1000,这样就可以实现滑动了,1000>598,代码如下:

//更新约束
- (void)updateViewConstraints {
    [super updateViewConstraints];
    //设置为两个屏幕的宽度
    self.m_viewHeightLayout.constant = 1000;
}

详细项目下载地址:

ios 自动布局滚动视图



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值