Masonry介绍

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

Masonry使用

Masonry属性及其说明

//左侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;

//上侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;

//右侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;

//下侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;

//首部

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;

//尾部

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;

//宽度

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;

//高度

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;

//横向中点

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;

//纵向中点

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;

//文本基线

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了

  • 首先介绍下UIScrollView的frame与contentsize的区别

  • 重要说明

(1)UIScrollView的frame与contentsize属性的区分:UIScrollView的frame指的是这个scrollview的可视范围(可看见的区域),contentsize是其滚动范围。

(2)contentinset(不带*号的一般不是结构体就是枚举),为UIScrollView增加额外的滚动区域。(上,左,下,右)逆时针。contentinset可以使用代码或者是视图控制器进行设置,但两者有区别(注意区分)。

(3)contentsize属性只能使用代码设置。

(4)contentoffset是个CGpoint类型的结构体,用来记录ScrollView的滚动位置,即记录着“框”跑到了哪里。知道了这个属性,就知道了其位置,可以通过设置这个属性来控制这个“框”的移动。

(5)不允许直接修改某个对象内部结构体属性的成员,三个步骤(先拿到值,修改之,再把修改后的值赋回去)。

(6)增加了额外区域后,contentoffset的原点在哪里?

  • 有助于理解的几个截图

模型图:

对比图:

坐标图:

Masonry与UIScrollView的自动布局:

  • 首先确定UIScrollView的位置:相当于确定UIScrollView的frame
 //UIScrollView滑动界面
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.view);
make.left.equalTo(self.view).offset();
make.right.equalTo(self.view).offset();
make.bottom.mas_equalTo(self.view.mas_bottom).offset(-); }];
  • 适配界面1,使界面1的top,left,height,width与scrollview对齐,其中在Masonry适配中top,可以与bottom或则height确定View的竖直方位,同理Left可以与right或则width确定水平位置的方位
//1界面适配
[self.accountElectricChargeView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(@);
make.left.mas_equalTo(self.scrollView.mas_left);
make.height.mas_equalTo(self.scrollView.mas_height);
make.width.mas_equalTo(self.scrollView.mas_width);
}];
  • 适配界面2:因为是适配水平位置,所以top仍然与scrollView的对齐,left与第一个界面的right对齐,bottom与scrollView或则第一个界面对齐
 //2界面适配
[self.accountPeakElectricView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(@);
make.left.mas_equalTo(self.accountElectricChargeView.mas_right);
     make.bottom.mas_equalTo(self.scrollView);
  •      make.width.mas_equalTo(self.accountElectricChargeView.mas_width); }];
  • 适配界面3:与界面2同理
 //3界面适配
[self.accountElectricFactorView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(@);
make.left.mas_equalTo(self.accountPeakElectricView.mas_right);
make.bottom.mas_equalTo(self.scrollView);
make.width.mas_equalTo(self.accountElectricChargeView.mas_width);
}];
  • 最后,使scrollview的right与第三个界面(即最后一个界面)的right对齐。
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.mas_equalTo(self.accountElectricFactorView.mas_right);
}];

Masonry自动布局与UIScrolView适配的更多相关文章

  1. Masonry自动布局:复合约束

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  2. Masonry自动布局

    介绍,入门: http://www.cocoachina.com/ios/20141219/10702.html 下载: http://code.cocoachina.com/detail/30114 ...

  3. Masonry自动布局使用

    Masonry是一个轻量级的布局框架,采用更好的语法封装自动布局,它有自己的布局DSL.简洁明了并具有高可读性 而且同时支持 iOS 和 Max OS X. 下载 NSLayoutConstraint ...

  4. IOS Masonry自动布局

    之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #i ...

  5. 【iOS】Masonry 自动布局 MASViewConstraint.m:207 错误

    问题详情: Assertion failure 报错原因: make.right.equalTo([_imageView superview]).right.with.offset(-); make. ...

  6. Coding源码学习第四部分(Masonry介绍与使用(三))

    接上篇继续进行Masonry 的学习. (12)tableViewCell 布局 #import "TableViewController.h" #import "Tes ...

  7. iOS开发——屏幕尺寸适配

    对于屏幕尺寸适配,目前先指竖屏的方式适合方式1和2. 1.控件尺寸写死的方式,偶尔会用到屏幕的宽度和高度. UILabel *holdLabel = [[UILabel alloc]initWithF ...

  8. IOS控件布局之Masonry布局框架

    前言: 回想起2013年做iOS开发的时候,那时候并没有采用手写布局代码的方式,而是采用xib文件来编写,如果使用纯代码方式是基于window的size(320,480)计算出一个相对位置进行布局,那 ...

  9. masonry使用问题

    2015年11月3日 coreData的学习练习中复习使用masonry自动布局 masonry自动布局发现问题: 两个控件的相对布局: 如果被参考对象用这个带anchor的属性,就会报这样一个错误: ...

随机推荐

  1. redis03----link 链表操作

    link 链表结构 之前是操作字符串string 链表:头元素,后面一个一个的指向后面的元素.Redis内部实现了链表的结构.链表的头尾,从一个元素找到另外的元素. 链表的名字也是一个key. flu ...

  2. Hive 特性及原理

    特点:Hive是构建在hadoop之上的数据仓库.数据存储在hdfs上,数据计算用的mapreduce框架.用户无需掌握MR的编写,通过类SQL语句即可自动生成查询计划. 主要内容:     接入入口 ...

  3. 织梦dedecms标签调用集合,绝对是仿站必备利器

    今天分享下整理了织梦dedecms标签调用集合,绝对是仿站必备利器啊,觉得有用就转走吧!温馨小提示:CTRL+F 搜索你需要的标签名,就可以方便找到:织梦dedecms标签调用集合-首页标签:网站导航 ...

  4. jsp的4大作用域

    jsp的4大作用域 首先要声明一点,所谓“作用域”就是“信息共享的范围”,也就是说一个信息能够在多大的范围内有效.4个JSP内置对象的作用域分别为:application.session.reques ...

  5. 推箱子 Sokoban(华中农业比赛)

    点这里 打开题目链接   点击打开链接 题目就是我们玩过的推箱子: 一顿暴力广搜:加状态标记.状态压缩需要用到一个类似于康拓的思想来压缩:所以容易TLE,搜索就是用一个int型的数字来表示一个状态, ...

  6. OpenCV——PS滤镜算法之 Ellipsoid (凸出)

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  7. windows下编译调试nginx

    typora-copy-images-to: image windows下编译调试nginx linux使用gdb跟踪代码效率不高,在通过跟踪代码进行源码分析,与定位复杂逻辑问题时,如果有一个简单易用 ...

  8. [POI 2007] 办公楼

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1098 [算法] 显然 , 答案为补图的连通分量个数 用链表优化BFS , 时间复杂度 ...

  9. qunar面试题及一位大牛的解答

    本文摘自:http://www.cnblogs.com/jarson-7426/p/3989208.html 1.写一个函数padstare(string str1,min_lenthg,string ...

  10. 任务25:IHostEnvironment和 IApplicationLifetime介绍

    任务25:IHostEnvironment和 IApplicationLifetime介绍 IHostingEnvironment这个里面有一些参数,比如我们当前应用程序的名称.目录的. await ...