之前使用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的约束其实都是一样的,记住即可

水平方向

  1. UIScrollView *horizontalScrollView = [[UIScrollView alloc] init];
  2. horizontalScrollView.backgroundColor = [UIColor orangeColor];
  3. horizontalScrollView.pagingEnabled =YES;
  4. // 添加scrollView添加到父视图,并设置其约束
  5. [self.view addSubview:horizontalScrollView];
  6. [horizontalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
  7. make.top.and.left.mas_equalTo();
  8. make.right.mas_equalTo(-);
  9. make.height.mas_equalTo();
  10. }];
  11. // 创建过渡视图并设置contentSize和其约束
  12. UIView *horizontalContainerView = [[UIView alloc] init];
  13. [horizontalScrollView addSubview:horizontalContainerView];
  14. [horizontalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
  15. make.edges.equalTo(horizontalScrollView);
  16. make.height.equalTo(horizontalScrollView);#//水平滚动高度固定,这个很重要
  17. }];
  18. //过渡视图上添加子视图
  19. UIView *previousView =nil;
  20. for (int i =; i <; i++) {
  21.  
  22. UILabel *label = [[UILabelalloc]init];
  23. label.textAlignment =NSTextAlignmentCenter;
  24. label.backgroundColor = [UIColorcolorWithHue:(arc4random() % / 256.0)
  25. saturation:(arc4random() % /256.0) +0.5
  26. brightness:(arc4random() % /256.0) +0.5
  27. alpha:];
  28. label.text = [NSStringstringWithFormat:@"第 %d个视图", i];
  29.  
  30. //添加到过渡视图,并设置子视图的约束
  31. [horizontalContainerView addSubview:label];
  32. [label mas_makeConstraints:^(MASConstraintMaker *make) {
  33. make.top.and.bottom.equalTo(horizontalContainerView);
  34. make.width.equalTo(horizontalScrollView);
  35.  
  36. if (previousView) {
  37. make.left.mas_equalTo(previousView.mas_right);
  38. }
  39. else {
  40. make.left.mas_equalTo();
  41. }
  42. }];
  43.  
  44. previousView = label;
  45. }
  46. #// 设置过渡视图的右距(此设置将影响到scrollView的contentSize)这个也是关键的一步
  47. [horizontalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
  48. make.right.mas_equalTo(previousView.mas_right);
  49. }];

垂直平方向

  1. UIScrollView *verticalScrollView = [[UIScrollView alloc] init];
  2. verticalScrollView.backgroundColor = [UIColor greenColor];
  3. verticalScrollView.pagingEnabled =YES;
  4. // 添加scrollView添加到父视图,并设置其约束
  5. [self.view addSubview:verticalScrollView];
  6. [verticalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
  7. make.left.mas_equalTo();
  8. make.bottom.and.right.mas_equalTo(-10.0);
  9. make.height.mas_equalTo();
  10. }];
  11. // 设置scrollView的子视图,即过渡视图contentSize,并设置其约束
  12. UIView *verticalContainerView = [[UIView alloc] init];
  13. [verticalScrollView addSubview:verticalContainerView];
  14. [verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
  15. make.top.left.bottom.and.right.equalTo(verticalScrollView);
  16. make.width.equalTo(verticalScrollView);#//垂直滚动宽度固定,这个很重要
  17. }];
  18. //过渡视图添加子视图
  19. UIView *lastView =nil;
  20. for (NSInteger index =; index <; index++) {
  21.  
  22. UILabel *label = [[UILabelalloc]init];
  23. label.textAlignment =NSTextAlignmentCenter;
  24. label.backgroundColor = [UIColorcolorWithHue:(arc4random() % / 256.0)
  25. saturation:(arc4random() % /256.0) +0.5
  26. brightness:(arc4random() % /256.0) +0.5
  27. alpha:];
  28. label.text = [NSStringstringWithFormat:@"第 %ld个视图", index];
  29.  
  30. //添加到过渡视图,并设置子视图的约束
  31. [verticalContainerView addSubview:label];
  32. [label mas_makeConstraints:^(MASConstraintMaker *make) {
  33. make.left.and.right.equalTo(verticalContainerView);
  34. make.height.mas_equalTo(verticalScrollView.mas_height);
  35.  
  36. if (lastView) {
  37. make.top.mas_equalTo(lastView.mas_bottom);
  38. }
  39. else {
  40. make.top.mas_equalTo();
  41. }
  42. }];
  43.  
  44. lastView = label;
  45. }
  46.  
  47. #// 设置过渡视图的底边距(此设置将影响到scrollView的contentSize)这个也是关键的一步
  48. [verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
  49. make.bottom.equalTo(lastView.mas_bottom);
  50. }];

xib对UIScrollerView的布局可以参考下面的文章
https://www.jianshu.com/p/1d3bb3cf7ee5
https://blog.csdn.net/dreams_deng/article/details/80523485

使用Masonry对UIScrollView自动布局的更多相关文章

  1. UIScrollview自动布局,UIScrollviewAutolayoutDemo

    参考文档:http://www.cocoachina.com/ios/20150104/10810.html UIScrollviewAutolayoutDemo地址:http://pan.baidu ...

  2. 使用Masonry在UIScrollView内布局

    理论分析 首先,我们知道Autolayout改变了传统的以frame为主的布局思想.它其实是一种相对布局,核心思想是视图与视图之间的位置关系.比如,我们可以根据矩形的起始横坐标.纵坐标.长和宽这四个变 ...

  3. iOS 自动布局框架 – Masonry 详解

    目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了,但是在一些变化比较复杂的页面,还是需要通过代码来进行UI开发的.而且有很多比较老的项目,本身就还在采用纯 ...

  4. iOS自动布局框架-Masonry详解

    首先,在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout     从图中我们可以看出,只要设置相应得局限,控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需 ...

  5. Masonry自动布局与UIScrolView适配

    Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X.可以通过cocoa ...

  6. iOS自动布局——Masonry详解

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环 ...

  7. 使用Masonry搭建特殊布局时与xib的对比

    之前只有比较浅的接触过Masonry.项目中大多数的布局还是用xib中的AutoLayout与手码的frame计算相结合,相信也会有很多项目和我一样是这两种布局的组合.其实xib各方面用的感觉都挺好, ...

  8. 用Maonry如何实现UIScrollView

    一,使用UIScrollView 与其他View 布局不同的地方在于, ScrollView的高度/宽度不固定: ScrollView的高度和宽度由其内容决定(即 Scroll View 的 cont ...

  9. IOS自动布局

    参考资料 https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AutolayoutPG/Vi ...

随机推荐

  1. HDU 6301 Distinct Values

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=6301 多校contest1 题目大意是有一个长度为N的数组,给出M个"事实",每个 ...

  2. 关于@autoreleasepool

    苹果推荐使用场景: 如果你编写的程序不是基于 UI 框架的,比如说命令行工具: 如果你编写的循环中创建了大量的临时对象:(常用) 如果你创建了一个辅助线程. @interface ViewContro ...

  3. FortiGate防火墙500D下PC至外网丢包

    1.现状: 如图,防火墙堆叠,500D共4个出口方向,联通.电信.FQ.运维专线 2.现象: 到网关和防火墙上.下联口不丢包,到网联通和运维专线方向丢包4%左右,电信和FQ方向不丢包 3.分析 采用从 ...

  4. java得到当前日期的前一天或后一天

    public String getNextDay(String startdate) throws ParseException{ Date date = (new SimpleDateFormat( ...

  5. faiss学习

    faiss 学习 github wiki 介绍 Faiss:Facebook开源的相似性搜索类库 安装 在Mac系统编译安装Faiss faiss教程跟进--Makefile 编译 faiss安装 m ...

  6. php设计模式-工厂模式(一)

    <?php abstract class Creator{ /* startFactory 返回一个具体的产品 factoryMethod 返回对象 */ protected abstract ...

  7. Linux移植之tag参数列表解析过程分析

    在Linux移植之内核启动过程start_kernel函数简析中已经指出了start_kernel函数的调用层次,这篇主要是对具体的tag参数列表进行解析. 1.内存参数ATAG_MEM参数解析 2. ...

  8. c++矩阵运算库Eigen简介

    C++矩阵运算库Eigen介绍 C++中的矩阵运算库常用的有Armadillo,Eigen,OpenCV,ViennaCL,PETSc等.我自己在网上搜了一下不同运算库的特点,最后选择了Eigen.主 ...

  9. Log4j 日志组件

    官网:https://logging.apache.org/log4j/2.x/ 使用 Log4j 的步骤: 第一步 引入 Log4j 的 jar 包 1. 直接下载 log4j-x.x.x.jar ...

  10. leveldb 学习记录(一) skiplist

    leveldb LevelDb是一个持久化存储的KV系统,并非完全将数据放置于内存中,部分数据也会存储到磁盘上. 想了解这个由谷歌大神编写的经典项目. 可以从数据结构以及数据结构的处理下手,也可以从示 ...