几张图弄明白ios布局中的尺寸问题

背景

先说说逆向那事。各类曲折..各类技术过期,老老实实在啃看雪的帖子..更新会有的。

回正题，这里讨论的是在Masnory框架下的布局问题。像我这种游击队没师傅带，什么都得本身琢磨，一直没闹明白下面几个问题，今天终于下决心整理测试了一下，看完这篇文章基本上能闹明白ios的图标大小问题了。

会讨论问题

若是尚未概念，请网上搜搜背景技术点，这里只穿针引线插上几句，基本概念还这里不会再复制粘贴一遍。

集中想讨论3个问题，其余问题再这3个问题的答案基础上很好延伸弄明白。

Q:@1x，@2x，@3x的图片何时会用上？ 

Q:怎么保证不一样机型的图标显示尺寸一致？

Q:masnory下的mas_equalTo、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo到底有什么区别？

为验证问题，准备了3个logo，@1x、@2x、@3x的分辨率分别设定为3八、7五、180，都是用以前写的icon工具一键导出的，为了作区分，在logo中写了一、二、3加以区分。测试在模拟器下进行。

 

Q:@1x，@2x，@3x的图片何时会用上？

简单理解，是根据机型来的。深刻点说，根据屏幕尺寸来的。这里须要了解的知识点有俩

1.尺寸的单位，CGSizeMake(33,33)

函数中尺寸单位不是px也不是android中dp，具体请搜索。一句话理解就是：根据屏幕分辨率不一样，单位实际表明的px大小公式不一样，可简单理解为一个相对尺寸，@nx表示@1x的像素尺寸乘以多少倍。

图中左边是iphone6（@2x），右边是iphone6 plus（@3x）。代码固定了大小为66*66。能够大体看出来图标大小实际上是不同的（为何后面会提到）。

    [self.image mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(66,66));

    }];

须要注意的是，你的图片实际像素尺寸不能比代码给定的尺寸小，不然图片会失真很难看。好比如今代码是66*66，那么@2x的像素大小不能低于132*132，@3x的不能低于198*198，明白了吧？

2.关键的44＊44

这是ios认为人的手指点按钮最小的尺寸大小。苹果在ui规范中给定了不少元素的标准尺寸，照着要求出图就行。但若是是自定义的尺寸，好比你想画一个超大的圆在界面上，那就得把1x、2x、3x的图标都作好，尺寸大小应参照（1）的公式。好比你想在ui中展现一个40*40的图标，那么，@1x的实际px像素为40＊40，@2x的实际像素尺寸为80*80，@3x的实际像素尺寸为120*120。

Q:怎么保证不一样机型图标尺寸一致？

若是想不一样机型下显示的尺寸如出一辙，能够用百分比的方式define一个值，这样不一样的机型，图标尺寸如出一辙确定没得跑。

#define kCaptureBtnSize CGSizeMake(kWindowW/3.5f,kWindowW/3.5f)   //按钮尺寸

若是不想用百分比，想直接设定，那怎么控制不一样屏幕下的尺寸大小？若是是mas_equalTo属性，会自动根据屏幕分辨率设定，图标显示大小其实不同的（若是你设定过边距就更能感觉的到），须要用到、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo这几个属性了。

Q:masnory下的mas_equalTo、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo到底有什么区别？

mas_equalTo已经前面讲了，而且也是最经常使用的关系。greater和less如字面意思同样“比尺寸大”/“比尺寸小”，那么这里究竟比谁大呢？这里指的实际上是图标的实际像素尺寸，看图：

这里设定了一个比图标实际尺寸大的值100*100（根据公式，在iphone6 plus下，图标尺寸应该为300*300），若是mas_lessThanOrEqualTo，那么因为像素尺寸不足，因此图标是多大，就显示多大。

这里设定了一个比图标实际尺寸小的值50*50（根据公式，在iphone6 plus下，图标尺寸应该为150*150），若是mas_greaterThanOrEqualTo，那么因为像素尺寸超过了设定尺寸，因此图标是多大，就显示多大。

总结

如今能明白布局中的尺寸问题了吧。只要图标的实际像素尺寸按照公式计算得出，那么就不会出现像素失真的问题，也能够保证不一样屏幕下的尺寸。

 

P.S

来App独立开发群533838427

github：https://github.com/huijimuhe