• 几张图弄明白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

     

  • 相关阅读:
    JavaScript日常学习6
    JavaScript日常学习5
    JavaScript日常学习4
    JavaScript日常学习3
    JavaScript日常学习2
    JavaScript日常学习1
    iOS开发之 Lottie -- 炫酷的动效
    Adobe After Effect CC2017 for Mac
    随机四则运算的程序
    关于四则运算进一步优化的构思
  • 原文地址:https://www.cnblogs.com/matoo/p/5489696.html
Copyright © 2020-2023  润新知