首先UIScrollview包含自身的frame和contentSize二个部分。frame决定其展示给用户的可见区域,contentSize决定其整个内容的大小。如果frame的宽高小于contentSize,则UIScrollview可以在相应的方向滚动。UIScrollView中有个contentSize属性,如果内容大小是固定的,你可以直接设置contentSize。但是在自动布局约束中我们往往不知道其具体的大小,或者不想计算其大小,在这种情况下我们怎么实现UIScrollView的约束呢?

关于UIScroolView的AutoLayout约束,首先得明白一点,UIScrollView上面的subviews与UIScrollView的top,bottom,left、right约束都是相对于UIScrollview的contentsize,而contentsize大小是不确定的,为了明白的说明这一点,我们看下面代码:

    UIScrollView *verticalScrollView = [[UIScrollView alloc]init];
verticalScrollView.backgroundColor = [UIColor greenColor];
verticalScrollView.pagingEnabled =YES;
// 添加scrollView添加到父视图,并设置其约束
[self.view addSubview:verticalScrollView];
[verticalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.right.mas_equalTo(-10.0);
make.centerY.equalTo(0);
make.height.mas_equalTo(100);
}];
// 设置scrollView的子视图,即过渡视图contentSize,并设置其约束
UIView *verticalContainerView = [[UIView alloc]init];
[verticalScrollView addSubview:verticalContainerView];
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero); }];
verticalContainerView.backgroundColor = [UIColor redColor];

您觉得最后在屏幕上的verticalScrollView显示的是什么颜色呢?我们先来看答案!

你没眼花,就是绿色的。具体原因是verticalContainerView是verticalScrollView上的一个subView,其相对于verticalScrollView的top,bottom,left、right的约束都是相对于verticalScrollView的contentSize,而contentSize的默认大小为CGSizeZero,因此红色verticalContainerView是完全不能显示的。那么我们怎么让红色的部分显示出来?很简单,我们只需重新约束verticalContainerView,具体代码如下:

    [verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero); make.width.equalTo(verticalScrollView);
make.height.equalTo(50);
}];

运行结果:

当然,在实际编程中,这样约束,并没有什么实际意义,既然我大小都知道了,直接用frame和contentSize就可以了。其强大性体现在其contentSize会根据verticalContainerView的大小变化而变化,因此我可以在verticalContainerView增加很多subViews,用subViews的内容大小扩充contentSize。具体可见如下的垂直滚动的UIScroolView代码:

    UIScrollView *verticalScrollView = [[UIScrollView alloc]init];
verticalScrollView.backgroundColor = [UIColor greenColor];
verticalScrollView.pagingEnabled =YES;
// 添加scrollView添加到父视图,并设置其约束
[self.view addSubview:verticalScrollView];
[verticalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.right.mas_equalTo(-10.0);
make.centerY.equalTo(0);
make.height.mas_equalTo(100);
}];
// 设置scrollView的子视图,即过渡视图contentSize,并设置其约束
UIView *verticalContainerView = [[UIView alloc]init];
[verticalScrollView addSubview:verticalContainerView];
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero); make.width.equalTo(verticalScrollView);
}];
verticalContainerView.backgroundColor = [UIColor redColor]; UIView *lastView =nil;
for (NSInteger index =0; index <8; index++)
{
UILabel *label = [[UILabel alloc]init];
label.textAlignment =NSTextAlignmentCenter;
label.backgroundColor = [UIColor colorWithHue:(arc4random() %256 / 256.0)
saturation:(arc4random() %128 /256.0) +0.5
brightness:(arc4random() %128 /256.0) +0.5
alpha:1];
label.text = [NSString stringWithFormat:@"第 %ld个视图", index]; //添加到父视图,并设置过渡视图中子视图的约束
[verticalContainerView addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(verticalContainerView);
make.height.mas_equalTo(60); if (lastView)
{
make.top.mas_equalTo(lastView.mas_bottom);
}
else
{
make.top.mas_equalTo(0);
}
}]; lastView = label;
} [verticalContainerView mas_updateConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.mas_bottom);
}];

UIScrollView的AutoLayout约束的更多相关文章

  1. 利用代码添加autolayout约束

    1.概述 通常我们通过storyboard能够完成的,代码也能够完成,所以这里介绍下代码实现约束的添加,通常我们不这么干(在不使用第三方框架的情况下,使用系统自带的类添加约束特别繁琐),所以这里仅仅简 ...

  2. 使用代码创建AutoLayout约束

    使用代码创建AutoLayout约束 1.代码创建约束的步骤 2.代码创建约束的常用方法 3.代码创建约束的原则 4.禁用Autoresizing的原因 5. 设置相对状态栏的约束,使用self.to ...

  3. 示例详解:UIScrollview 与 Autolayout 的那点事

    前言 自从写了介绍Masonry那篇文章以后 就一直有人对UIScrollView的那个例子不是很理解 UIView *container = [UIView new]; [scrollView ad ...

  4. UIScrollview 与 Autolayout 的那点事

    原文  http://www.cocoachina.com/ios/20151221/14757.html 前言 自从写了 介绍Masonry 那篇文章以后 就一直有人对UIScrollView的那个 ...

  5. iOS - UIScrollView xib添加约束的坑

    一.Storyboard中的UIScrollView使用自动布局 在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和 ...

  6. UIScrollView在AutoLayout下的滚动问题

    使用Storyboard编写UI,设置支持AutoLayout. 在其中的一个场景上,添加一个UIScrollView,在对应的代码里增加 - (void)viewDidLoad { [super v ...

  7. AutoLayout 约束与frame、bounds的设置

    介绍 关于AutoLayout的介绍可参考: 使用解读: https://segmentfault.com/a/1190000004386278 iOS 屏幕适配,autoResizing autoL ...

  8. UIScrollView使用autolayout 垂直滚动

    转自:http://dadage456.blog.163.com/blog/static/30310744201491141752716 1.创建一个空白的UIViewController .将UIS ...

  9. Autolayout约束动画化-Animating Autolayout Constraints

    原文:Animating Autolayout Constraints 作者:@kharrison 译者:CocoaChina--起个名字好难(CC论坛ID) 首发:CocoaChina 记于二零一五 ...

随机推荐

  1. python网络编程(图片传输)

    发送端: from socket import * s=socket() s.connect(('127.0.0.1',8888)) f=open('mm.jpg','rb') while True: ...

  2. 超低质量的超低起点PYQT ------前言

    由于年后要赶一个小工程,以前一直用VB6+sqL2K的做些小玩具一样的桌面项目,低级的不能再低级了,某日幡然醒悟,决定努力跟进潮流的尾巴..匆匆撸了一遍网上的PYTHON基础知识,面向对象,装饰器.. ...

  3. [转载] Fiddler为所欲为第三篇 封包逆向必备知识[三]

    导语: 小A同学:会抓包有什么好学习的,不就用一个工具设置个wifi代{过}{滤}理就OK了嘛,还不是很多做不了.不如学习安卓逆向.didi科学家:不好意思,抓包可以为所欲为. 其实学习抓包,完完全全 ...

  4. java接口深入

    1.抽象类. java常规类中,有些方法并不是固定的,而是在不同的情况下有不同的实现的,比如一个人,在公司要工作,在学校要学习,在食堂要吃饭,但是这个人还有相同的地方,比如不论在哪里都要呼吸,看,挺, ...

  5. 实践练习_使用HTML标签制作一个注册界面03

    使用HTML标签制作一个注册界面▲▲▲▲★1) 注册界面需要有用户名.密码.性别(单选).爱好(多选).专业(下拉列表)2) 注册界面需要有隐藏域和文件域3) 注册界面需要有提交和重置按钮4) 将上述 ...

  6. SpringBoot的启动流程分析(1)

    通过分析我们可以找到 org.springframework.boot.SpringApplication 中如下, public static ConfigurableApplicationCont ...

  7. Deepest left leaf node in a binary tree

    Recursion selfcontained recursion global variables outside of recursion Recursion Design  Whenever r ...

  8. spark学习笔记_1

    简单的讲,Apache Spark是一个快速且通用的集群计算系统. Apache Spark 历史: 2009年由加州伯克利大学的AMP实验室开发,并在2010年开源,13年时成长为Apache旗下大 ...

  9. flask中需要的基本配置信息

    1.秘钥设置: app.secret_key = '随意设置' 2.SQLALCHEMY配置: # 连接数据库 app.config['SQLALCHEMY_DATABASE_URI'] = 'mys ...

  10. E - 改革春风吹满地

    按顺时针或者逆时针顺序输入n个点,求输入点围城的多边形的面积.凸凹都可以计算. 模板 #include <iostream> #include <cstring> #inclu ...