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

2022-12-31,,,

背景

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

回正题,这里讨论的是在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,那么@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

几张图弄明白ios布局中的尺寸问题的相关教程结束。