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

背景

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

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

会讨论问题

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

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

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

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

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

为验证问题，准备了3个logo，@1x、@2x、@3x的分辨率分别设定为38、75、180，都是用之前写的icon工具一键导出的，为了做区分，在logo中写了1、2、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