storyBoard方式ScrollView的AutoLayout
在使用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的更多相关文章
- 使用StoryBoard设置Scrollview的横向滚动不用一行代码
1).创建一个空工程Single类型的工程,然后打开故事版(StoryBoard)在ViewController上添加scrollview 2).然后对scrollview添加约束,上下左右全部都是0 ...
- 在StoryBoard对UICollectionViewCell 进行Autolayout是遇到的Xcode6.01的BUG
使用Sb对UICollectionViewCell 的内容进行Autolayout约束时候,发现了一个Xcode6.01的BUG,就是你对UICollectionCell约束完了之后,在模拟器上现实的 ...
- 【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)
关于AutoLayout,最早从iOS6开始引入使用. 主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换. 网上大量的资料都在介绍xib和storyboard,如何使用AutoLa ...
- iOS开发——使用基于Autolayout的ScrollView
问题描述: 在使用Autolayout布局方式对ScrollView进行布局时,如果你想做一个可以垂直方向滚动的九宫格类似这样: 拿一行来说,一定不要想当然的尝试去给一行图标进行均匀排列的操作(指 ...
- xib和Storyboard 创建Cell的方式
xib 方式 .在Cell.h文件中加一个宏 #define cellIdentifier @"customCell" . ViewController中: - (void)vie ...
- 在Scrollview中使用AutoLayout
AutoLayout 与 UIScrollView的相遇是一个不可避免的场景,像UITableView.UIWebView这些都是继承于UIScrollView的,关于它们的autolayout布局大 ...
- 【转】iOS学习之Storyboard中的UIScrollView使用自动布局
在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...
- iOS之XIB拖拽scrollView
在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...
- iOS开发-Autolayout小结
昨天重点学习了下Autolayout,把以前没有吃透的概念重新理解了下,现在感觉整个人都是棒棒哒. 上一个项目是使用计算坐标代码的方式来布局UI界面,这种方式的缺点在于当苹果发布新尺寸设备时需要重写代 ...
随机推荐
- WebService开发步骤
WebService原理什么的百度很多我就说了,无非就是提供一个接口放在服务端,客户端实现这个接口就可以拿到自己需要的东西. 现在简单说一下用myEclipse来实现服务端和客户端.另一种WebSer ...
- Perl 中级教程 第5章课后习题
5. 9. 1. 练习1 [5 分钟] 先不要运行程序, 看看你能否判断出这程序的哪部份出了问题?如果你看不出 来, 就可以运行一相程序, 得到些暗示, 来看是否能修改好: my %passenger ...
- NPOI使用手册
HSSFSheet sheet = hssfworkbook.CreateSheet("new sheet"); // Create a row and put some cell ...
- Bootstrap_表单_图标
在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码: <span class=" ...
- 怎样使CSS3中的animation动画当每滑到一屏时每次都运行
这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...
- QQ弹窗代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- dedecms织梦二级菜单的实现方法
首先,复制代码: 程序代码 {dede:channelartlist typeid='top' cacheid='channelsonlist'} {dede:channel type='son' n ...
- 转:Gulp使用指南
原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更 ...
- VLAN间通信----实验
方法1.增加物理线路 需求:PC0连接SW的F0/1,PC1连接SW的F0/2; SW创建VLAN10,VLAN20; PC0划到VLAN10; PC1划到VLAN20; 现要求借用路 ...
- 错误: 找不到或无法加载主类 scala.tools.nsc.MainGenericRunner
错误: 找不到或无法加载主类 scala.tools.nsc.MainGenericRunner 原因: Sacala安装路径中包含空格.