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超出了滚动视图大小时候就可以实现滚动。

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

ios自动布局autolayout 实现scrollView_第1张图片

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

                                    ios自动布局autolayout 实现scrollView_第2张图片

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

ios自动布局autolayout 实现scrollView_第3张图片

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

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

ios自动布局autolayout 实现scrollView_第4张图片

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

ios自动布局autolayout 实现scrollView_第5张图片


  3、往里面拖入一个view,大小界面层次结构如下:ios自动布局autolayout 实现scrollView_第6张图片

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

                                                    ios自动布局autolayout 实现scrollView_第7张图片

添加高度约束598:

                                                ios自动布局autolayout 实现scrollView_第8张图片                             

                                              

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

ios自动布局autolayout 实现scrollView_第9张图片


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

label:居上130,据左44

button:居上500,据左44

switch:居上300,据左44

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

ios自动布局autolayout 实现scrollView_第10张图片


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

ios自动布局autolayout 实现scrollView_第11张图片

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

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

详细项目下载地址:

ios 自动布局滚动视图



你可能感兴趣的:(【开发技术】IOS)