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

摘要:
回到正题,这是Masnory框架下的布局问题。像我这样的游击队没有主人教他们。他们必须自己思考一切。他们无法理解以下问题。今天,他们终于决定整理和测试。看完这篇文章,他们基本上可以理解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加以区分。测试在模拟器下进行。

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

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

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

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

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

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

图中左边是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如字面意思一样“比尺寸大”/“比尺寸小”,那么这里究竟比谁大呢?这里指的其实是图标的实际像素尺寸,看图:

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

这里设定了一个比图标实际尺寸大的值100*100(根据公式,在iphone6 plus下,图标尺寸应该为300*300),如果mas_lessThanOrEqualTo,那么由于像素尺寸不足,所以图标是多大,就显示多大。

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

这里设定了一个比图标实际尺寸小的值50*50(根据公式,在iphone6 plus下,图标尺寸应该为150*150),如果mas_greaterThanOrEqualTo,那么由于像素尺寸超过了设定尺寸,所以图标是多大,就显示多大。

总结

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

P.S

来App独立开发群533838427

github:https://github.com/huijimuhe

 

免责声明:文章转载自《几张图弄明白ios布局中的尺寸问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【Vue】vuex存储和本地存储(localstorage、sessionstorage)的区别mysql 导入json字符串报错下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

安卓的设备的分辨率

DisplayMetrics metrice= new DisplayMetrics(); Display defaultDisplay = getWindowManager().getDefaultDisplay();defaultDisplay.getMetrics(metrice); int densityDpi = metrice.densityD...

HTML5 Canvas 获取网页的像素值。

我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。 自从HTML5 画布出来之后。就有更好的方法来获取了,比方郭阿里巴巴ICON矢量库 用的SVG和渐变来进行绘制: 我昨天用Canvas来绘制了一下。由于Canvas有现成的方法getImageDat...

Java——BufferedImage对象

BufferedImage对象中最重要的两个组件是Raster与ColorModel,分别用于存储图像的像素数据和颜色数据。 1、Raster对象的作用与像素存储 BufferedImage支持从Raster对象中获取任意位置(x,y)点的像素值p(x,y) image.getRaster().getDataElements(x,y,width,heigh...

Cesium源码剖析---Ambient Occlusion(环境光遮蔽)

  Ambient Occlusion简称AO,中文没有太确定的叫法,一般译作环境光遮蔽。百度百科上对AO的解释是这样的:AO是来描绘物体和物体相交或靠近的时候遮挡周围漫反射光线的效果,可以解决或改善漏光、飘和阴影不实等问题,解决或改善场景中缝隙、褶皱与墙角、角线以及细小物体等的表现不清晰问题,综合改善细节尤其是暗部阴影,增强空间的层次感、真实感,同时加强...

WPF显示尺寸与设备无关问题

WPF单位 WPF窗口以及其中的所有元素都是用与设备无关的单位进行度量。一个与设备无关的单位被定义为1/96英寸。WPF程序统一用下面一个公式来定义物理单位尺寸: [ 物理单位尺寸(像素)] = [ 设备无关尺寸 ]*[ 系统DPI ] 我们知道标准的Windows的系统DPI是 96 dpi,这个时候物理单位就是1像素,一个40*40WPF...

Retina & Responsive image 总结

之前就有写过关于 Retina 和 Responsive images https://www.cnblogs.com/keatkeat/p/8409422.html responsive image https://www.cnblogs.com/keatkeat/p/3896511.html retina 但是还有一些零零碎碎的东西不完整. 今天想来做...