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

时间: 2024-12-13 03:47:17

storyBoard方式ScrollView的AutoLayout的相关文章

IOS基础UI之(三)手写UI和storyboard方式实现图片移动和缩放

手写UI是最早进行UI界面布局的方法,优点是灵活自由,缺点是使代码看起来比较长.平时学习的时候可以多尝试手写ui,这样会更深入熟悉控件.storyboard开发效率相对比较高.实际开发中看情况而定!! 下面用这两种方式分别实现图片移动和缩放. 功能描述: 1. 界面布局 2.点击相应的按钮,对显示的图片移动.缩放. 效果如下:    掌握点: 一:熟悉代码的描述UIButton属性 1.UIButton状态 UIControlStateNormal          // 正常状态 UICont

iOS_17_控制器切换_TabBarController_通过storyboard方式

最终效果图: main.storyboard BeyondViewController.m中有一句关键代码,设置tabbarItem图片的样式(30*30) // // BeyondViewController.m // 17_控制器切换2_tabbarController // // Created by beyond on 14-7-31. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "BeyondVi

StoryBoard下ScrollView如何添加约束

在做项目的事后有一个注册页面,为了适配屏幕采用了StoryBoard,添加约束以后运行后发现一个问题.  在4.0 甚至更大的屏幕下是没有问题的,如下图(4.0屏幕) 但是放到更小的3.5英寸就会出现问题,发现下面的按钮不见了,主要原因是输入框太多,导致更个屏幕放不下更多.如图(3.5)英寸 想了下就决定用ScrolleView, ContentSize可以设置为560. 这样在其他屏幕上没有太多的影响,在3.5的屏幕下也可以滑动了.但是在StoryBord拖过ScrollView,添加约束的时

ScrollView 与 Autolayout

学 Autolayout,当涉及到 ScrollView 时,很多人面对满屏幕红色错误不知所措,为什么明明以前没问题的约束到了这儿就成了错误. 比如下面这种情况: 一个蓝色的 UIView,设其长宽约束分别为 210,200.上.左和右间距为 55.如此设置这个 View 的位置就被确定了.没有错误,没有警告. 可同样的方法,到 UIScrollView 却有触目惊心的红色错误: 可以看到 Storyboard 错误提示:ScrollView has ambiguous scrollable c

ScrollView 与 Autolayout --- 【转载】

学 Autolayout,当涉及到 ScrollView 时,很多人面对满屏幕红色错误不知所措,为什么明明以前没问题的约束到了这儿就成了错误. 比如下面这种情况: 一个蓝色的 UIView,设其长宽约束分别为 210,200.上.左和右间距为 55.如此设置这个 View 的位置就被确定了.没有错误,没有警告. 可同样的方法,到 UIScrollView 却有触目惊心的红色错误: 可以看到 Storyboard 错误提示:ScrollView has ambiguous scrollable c

使用StoryBoard设置Scrollview的横向滚动不用一行代码哦!!!

1).创建一个空工程Single类型的工程,然后打开故事版(StoryBoard)在ViewController上添加scrollview 2).然后对scrollview添加约束,上下左右全部都是0就可以(注意:在添加上下左右约束的时候一定要取消Constrain to margins ,否则添加完的约束会出现左右各缺少20像素的边距) 3).添加完成约束后直接更新scrollview的frame.随后在scrollview上添加一个view并且添加约束上下左右也都是0. 4).在添加完成约束

在StoryBoard对UICollectionViewCell 进行Autolayout是遇到的Xcode6.01的BUG

使用Sb对UICollectionViewCell 的内容进行Autolayout约束时候,发现了一个Xcode6.01的BUG,就是你对UICollectionCell约束完了之后,在模拟器上现实的Label是居中,但是真机显示的确实不是居中,后来Google了一下,发现了问题,这是因为使用ios8 SDk编译出来的项目运行在iOS 7引起ContentView大小没有变导致的,解决办法之一:就是在你的定义的UICollectionViewCell 的子类重LayoutSubviews方法,在

第十四讲(下) 可视化方式的实现通讯录.(及storyboard方式)

代码演示: AddressBookModel.m 用于创建第一个页面 包括cell的自定义高度问题 1 #import "ViewController.h" 2 #import "TableViewCell.h" 3 #import "DetailViewController.h" 4 @interface ViewController ()<UITableViewDataSource,UITableViewDelegate,DetailV

【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)

关于AutoLayout,最早从iOS6开始引入使用. 主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换. 网上大量的资料都在介绍xib和storyboard,如何使用AutoLayout,说纯代码使用AutoLayout进行UI布局的越来越少.对于我这个习惯了代码UI布局的人,写个备忘: AutoLayout是什么? 使用一句Apple的官方定义的话 AutoLayout是一种基于约束的,描述性的布局系统. Auto Layout Is a Constraint-Based, De