zoukankan      html  css  js  c++  java
  • 几张图弄明白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

     

  • 相关阅读:
    EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)
    EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
    EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位
    EasyNVR RTSP摄像机HLS直播服务器中使用Onvif协议获取设备快照
    EasyNVR无插件直播服务器如何使用ffmpeg实现摄像机快照功能的
    EasyNVR流媒体服务器接入EasyDSS云视频平台快照上传实现
    EasyDSS RTMP流媒体服务器的HTTP接口query url的C++实现方法
    EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
    EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
    EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
  • 原文地址:https://www.cnblogs.com/matoo/p/5489696.html
Copyright © 2011-2022 走看看