xcode6 scrollview autolayout

普通的view布局是很简单的,只是添加上下左右就可以确定其位置及大小,可是使用Scrollview自动布局就很复杂了,

因为scrollview是没有固定的高度和宽度的,因为其宽度和高度是由其内容的大小所决定的,也就是所谓的contentSize所决定。

如果要使用自动布局,那么Scrollview的内容的大小不能依赖于scrollview的尺寸,否则就无法确定,就会发出警告。

这个是我们的效果图。下面看看怎么做的。。。

1、根据官方提供的文档,如果我们直接把子控件放到Scrollview上,分别布局,是很难布局的,因此我们使用一个

containerView,这个containerView放所有的子控件,那么只要布局好所有的子控件与containerView之间的布局关系,

那么剩下的就是containerView与Scrollview之类的布局关系,这也就是所谓的化零为整策略。

2、首先放一个scrollview到view上,然后设置scollview的约束:与view的left,top,right,bottom分别为0,84,0,0。

3、放一个view作为containerView到scrollview中,作为子view,作为参考系:

在右侧document中的Label加入标识:containerView,这个不一写需要添加,其实不加也没有关系,只是加了就更明确其用意。

然后给containerView添加与scrollview的约束:上下左右分别设置为0。

4、添加4个内容视图:分别加个标识为:content1,content2,content3,content4

给这个子视图添加约束中,leading和trailing约束分别是与scrollview的约束,而不是与containerview的约束,

虽然containerView是这几个子视图的父视图。添加的约束:leading20,trailing20。

5、给content1添加固定的宽和高:280,100。之所以要固定的宽和高,是因为不固定就无法确定containerView的宽高,也就无法确定

scrollview的内容大小。然后添加bottom20,也就是与content2相距20

6、给content2添加top20,bottom20,固定的高100,这不需要设置固定的宽了,因为content1已经设置了。

同理,给content3添加top20,bottom20,固定的高100,

给content4添加top20,bottom100(to supperview),

这样containerView的宽就由content1~content4确定了,而高因为content1与containerView顶端相距20,

content4的bottom与containerView相距100,也就确定了containerview的高度。

而containerview也就是scrollview的内容,那么确定了contaienrview的内容大小,也就是

确定了scrollview的内容的大小,所以自动布局也就完成了。

总结:对于scrollview的自动布局,使用一个参考视图来布局,化零为整(把一堆子控件放到一个统一的视图中,即containerView),

可以减少自动布局的难度,添加约束时,子视图的leading和trailing约束是相对于scrollview的,而不是containerview。

Quetion:这样自动布局只是对宽度和高度确定(content1的宽和高被设置成固定的)才完成自动布局,如果

是动态的宽高呢,又该如何添加约束?完成这个demo后,提出了此问题,然后高手出来解答,然后在回复中

说明一下,或者给相关博客的链接,谢谢!!!!!

参考:https://developer.apple.com/library/ios/technotes/tn2154/_index.html

参考:http://blog.csdn.net/kmyhy/article/details/39929117

想看看源代码:https://github.com/632840804/ScrollViewAutoLayout

时间: 2024-12-14 07:31:31

xcode6 scrollview autolayout的相关文章

ScrollView自动布局

原文出自:微信公众号iOSDevShares 前言 相信很多同学都遇到这么一个问题:在storyboard上如何使用scrollview自动根据内容的增长而自动使其contentSize而变化,以使之可滚动.或者如何使用纯代码实现scrollview上使添加的控件在超出显示屏幕时可滚动,也就是根据内容自动计算出其contentSize的问题. 在这里,将使用storyboard和Masonry纯代码实现scrollview自动布局.如果有说得不正确的地方,欢迎指出! 说明:本人向来不使用xib或

AutoLayout全解

AutoLayout简介 Autolayout是一种全新的布局技术,专门用来布局UI界面的,用来取代Frame布局在遇见屏幕尺寸多重多样的问题.Autolayout自iOS 6开始引入,但是由于Xcode 4的不给力,当时并没有得到大规模推广.在iOS 7(Xcode5)开始,Autolayout的开发效率得到很大的提升,苹果官方也推荐开发者尽量使用Autolayout来布局UI界面,减少纯代码的方式. 那么AutoLayout怎么使用呢? VFL VFL(Virsual Format Lang

Autolayout 基础 - Masonry

Autolayout 基础 Archives iOS 如果您觉得我的博客对您有帮助,请通过关注我的新浪微博 MicroCai 支持我,谢谢! 这两天自学的时候,复习了下 autolayout.本来想来写一篇文章记录下学习内容,搜了一下写的人真不少,也写得挺不错的.照理我就不用写了,但心里总有那么一点点遗憾,这么流行的东西,我博客里怎么能没有呢?既然如此,那就多写点基础内容. 警告:博主为博文贴了十几张图片,查克拉耗尽,生命垂危,关注 MicroCai 或者送香吻一个就能唤醒博主,好人一生平安.

ViewPager在ScrollView中无法正常滑动的问题

来源: 能够兼容ViewPager的ScrollView http://justwyy.iteye.com/blog/1567390 ScrollView中嵌入ViewPager,ViewPager的滑动出现问题  http://bbs.csdn.net/topics/390213480 在网上找到两种方法,都是自定义scrollview,大家可以试试. 方法一: public class CustomScrollView extends ScrollView { private boolean

OS X升级到10.11后Xcode6.4界面无iOS device选择栏的解决办法

原来在Xcode6.4项目运行按钮右侧会有一个可以选择设备或模拟器的选择栏,但是升级后没有了.但是Xcode7.0.1打开同样的项目会有显示. 简单找了一下无果后,发现咋Xcode顶部菜单里可以找到切换的方法: 暂时这样将就吧,估计马上要切到Xcode7.x中去玩耍了 ;)

iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三--纯代码的autoLayout及布局动画 一.引言         关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致.除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘.前几篇布局介绍的链接如下: 使用autoresizing进行界面布局:htt

代码-Xcode6.2 中编译简单.c文件,昨天中午突然出现如下错误

问题描述 Xcode6.2 中编译简单.c文件,昨天中午突然出现如下错误 Xcode6.2 中编译简单.c文件,之前正常,昨天中午突然出现如下错误:,编译什么的都正常,就是一敲cc ./a.out 就出现报错啊,正式无语了,昨天求一天也没人能解决,自己也搞了一上午,还是不行啊...求大神解救,,代码是没错误,因为我拿最简单的代码试了,也会报错 解决方案 是不是连接模拟器了,是64位的问题吧 解决方案二: 你直接在Xcode里面创建一个命令行工程,然后再把这个C源文件导入到工程里,肯定能通过编译哇

不借助第三方插件利用ScrollView自身delegate实现下拉刷新和上拉加载

下拉刷新功能基本上在所有的app中都会被用到,而且这个功能已经被apple集成进去了,不过必须得是在tableViewController中才有,是一个叫做UIRefreshControl的控件,想看效果可以看手机QQ上面联系人列表下拉后的刷新.这里不多介绍. 本篇blog主要介绍如何在scrollview中实现下拉刷新的效果.因为有些时候我们可能更多地希望直接在scrollview中展现,而不是一定要局限于tableviewcontroller. 当然网上有很多下拉刷新和上拉加载的第三方控件,

7.1.4 ScrollView结合案例详解

ScrollView是一个滚动条控件,当屏幕中内容很多时候需要使用滚动条.ScrollView类的继承图如下:java.lang.Object   ↳android.view.View    ↳android.view.ViewGroup    ↳android.widget.FrameLayout    ↳android.widget.ScrollViewandroid.widget.ScrollView继承了android.widget.FrameLayout框架布局类.ScrollView