使用Masonry对UIScrollView自动布局
之前使用Masonry对UIScrollView进行过约束,当时是遇到了问题的,怎么约束都不对,因为赶进度直接改用frame了也没有对问题深究。就这样过了很久.........,直到前一段换工作的时候面试官问到,使用Masonry对UIScrollView自动布局应该注意些什么?额....,犹豫了一段时间我只能搪塞说我一般都是用frame进行设置的,暂时没有遇到什么问题。虽然这么回答也没什么,但是感觉终归不是很好。出来混迟早是要还的!刚好最近公司不忙,想起了这个问题,那么就研究记录一下吧!
对UIScrollView的约束有很多方式,我只讲其中一种易懂、直观的方式
UIScrollView约束的关键是设置它的contentSize的大小,否则无法进行滚动显示。
给UIScrollView添加一个过渡视图containerView,这个containerView作为所有子控件的父视图,然后再设置containerView相对于UIScrollView的约束constraint和子控件相对于containerView的约束constraint。
最后再将最后一个子视图的右边距,或底边距设置成containerView的右边距,或底边距,以此来设置scrollView的contentSize在水平方向,或垂直方向的大小。
UIScrollView竖向滑动时,就把containerView的width固定
UIScrollView横向滑动时,就把containerView的height固定
如果看完上面的描述还没有明白,那直接看下面的代码,UIScrollView的约束其实都是一样的,记住即可
水平方向
UIScrollView *horizontalScrollView = [[UIScrollView alloc] init];
horizontalScrollView.backgroundColor = [UIColor orangeColor];
horizontalScrollView.pagingEnabled =YES;
// 添加scrollView添加到父视图,并设置其约束
[self.view addSubview:horizontalScrollView];
[horizontalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.left.mas_equalTo();
make.right.mas_equalTo(-);
make.height.mas_equalTo();
}];
// 创建过渡视图并设置contentSize和其约束
UIView *horizontalContainerView = [[UIView alloc] init];
[horizontalScrollView addSubview:horizontalContainerView];
[horizontalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(horizontalScrollView);
make.height.equalTo(horizontalScrollView);#//水平滚动高度固定,这个很重要
}];
//过渡视图上添加子视图
UIView *previousView =nil;
for (int i =; i <; i++) { UILabel *label = [[UILabelalloc]init];
label.textAlignment =NSTextAlignmentCenter;
label.backgroundColor = [UIColorcolorWithHue:(arc4random() % / 256.0)
saturation:(arc4random() % /256.0) +0.5
brightness:(arc4random() % /256.0) +0.5
alpha:];
label.text = [NSStringstringWithFormat:@"第 %d个视图", i]; //添加到过渡视图,并设置子视图的约束
[horizontalContainerView addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.bottom.equalTo(horizontalContainerView);
make.width.equalTo(horizontalScrollView); if (previousView) {
make.left.mas_equalTo(previousView.mas_right);
}
else {
make.left.mas_equalTo();
}
}]; previousView = label;
}
#// 设置过渡视图的右距(此设置将影响到scrollView的contentSize)这个也是关键的一步
[horizontalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(previousView.mas_right);
}];
垂直平方向
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();
make.bottom.and.right.mas_equalTo(-10.0);
make.height.mas_equalTo();
}];
// 设置scrollView的子视图,即过渡视图contentSize,并设置其约束
UIView *verticalContainerView = [[UIView alloc] init];
[verticalScrollView addSubview:verticalContainerView];
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.and.right.equalTo(verticalScrollView);
make.width.equalTo(verticalScrollView);#//垂直滚动宽度固定,这个很重要
}];
//过渡视图添加子视图
UIView *lastView =nil;
for (NSInteger index =; index <; index++) { UILabel *label = [[UILabelalloc]init];
label.textAlignment =NSTextAlignmentCenter;
label.backgroundColor = [UIColorcolorWithHue:(arc4random() % / 256.0)
saturation:(arc4random() % /256.0) +0.5
brightness:(arc4random() % /256.0) +0.5
alpha:];
label.text = [NSStringstringWithFormat:@"第 %ld个视图", index]; //添加到过渡视图,并设置子视图的约束
[verticalContainerView addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(verticalContainerView);
make.height.mas_equalTo(verticalScrollView.mas_height); if (lastView) {
make.top.mas_equalTo(lastView.mas_bottom);
}
else {
make.top.mas_equalTo();
}
}]; lastView = label;
} #// 设置过渡视图的底边距(此设置将影响到scrollView的contentSize)这个也是关键的一步
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.mas_bottom);
}];
xib对UIScrollerView的布局可以参考下面的文章
https://www.jianshu.com/p/1d3bb3cf7ee5
https://blog.csdn.net/dreams_deng/article/details/80523485
使用Masonry对UIScrollView自动布局的更多相关文章
- UIScrollview自动布局,UIScrollviewAutolayoutDemo
参考文档:http://www.cocoachina.com/ios/20150104/10810.html UIScrollviewAutolayoutDemo地址:http://pan.baidu ...
- 使用Masonry在UIScrollView内布局
理论分析 首先,我们知道Autolayout改变了传统的以frame为主的布局思想.它其实是一种相对布局,核心思想是视图与视图之间的位置关系.比如,我们可以根据矩形的起始横坐标.纵坐标.长和宽这四个变 ...
- iOS 自动布局框架 – Masonry 详解
目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了,但是在一些变化比较复杂的页面,还是需要通过代码来进行UI开发的.而且有很多比较老的项目,本身就还在采用纯 ...
- iOS自动布局框架-Masonry详解
首先,在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout 从图中我们可以看出,只要设置相应得局限,控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需 ...
- Masonry自动布局与UIScrolView适配
Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X.可以通过cocoa ...
- iOS自动布局——Masonry详解
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环 ...
- 使用Masonry搭建特殊布局时与xib的对比
之前只有比较浅的接触过Masonry.项目中大多数的布局还是用xib中的AutoLayout与手码的frame计算相结合,相信也会有很多项目和我一样是这两种布局的组合.其实xib各方面用的感觉都挺好, ...
- 用Maonry如何实现UIScrollView
一,使用UIScrollView 与其他View 布局不同的地方在于, ScrollView的高度/宽度不固定: ScrollView的高度和宽度由其内容决定(即 Scroll View 的 cont ...
- IOS自动布局
参考资料 https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AutolayoutPG/Vi ...
随机推荐
- Fedora 25 安装 Bugzilla
最近领导要我们装一个Bugzulla,虽然我们项目已经有了JIRA(我就呵呵),不过我还是找些资料安装了,在此备忘. Bugzilla 是一个开源的缺陷跟踪系统(Bug-Tracking System ...
- yum -y install php-mysql 版本冲突
yum -y install php-mysql 版本冲突 2018年09月02日 19:16:59 乐于技术分享 阅读数:640 [root@itop yum.repos.d]# yum -y ...
- node.js中process进程的概念和child_process子进程模块的使用
进程,你可以把它理解成一个正在运行的程序.node.js中每个应用程序都是进程类的实例对象. node.js中有一个 process 全局对象,通过它我们可以获取,运行该程序的用户,环境变量等信息. ...
- 对于PHP面试知识点的小结
基础篇 了解大部分数组处理函数 字符串处理函数(区别 mb_ 系列函数) & 引用,结合案例分析 == 与 === 区别 isset 与 empty 区别 全部魔术函数理解 static.$t ...
- 创建 sp
创建 sharepoint solutions---Empty project--module(跟环境中的网站页面一样) element.xml增加pages url=“site pages” 将ws ...
- python3 第二十三章 - 函数式编程之Partial function(偏函数)
要注意,这里的偏函数和数学意义上的偏函数不一样,偏函数是2.5版本以后引进来的东西,属于函数式编程的一部分.前面章节中我们讲到,通过设定参数的默认值,可以降低函数调用的难度.而偏函数也可以做到这一点. ...
- mySQL配置文件、备份与恢复
mysql配置文件 mysql的配置文件为/etc/my.cnf 配置文件查找次序:若在多个配置文件中均有设定,则最后找到的最终生效 /etc/my.cnf --> /etc/mysql/my. ...
- JavaScript 排序算法
排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因此,比较的 ...
- SAS DATA步读取数据
上面一节讲了SAS的基本概念,以及语法结构,这次主要讲解SAS DATA步读取数据. 1 ·列表输入 2 ·按列输入 3 ·格式化输入 使用DATA步读取数据的基本形式如下: DA ...
- ABP框架系列之十七:(Data-Filters-数据过滤)
Introduction It's common to use the soft-deletepattern which is used to not delete an entity from da ...