美文网首页
iOS -- 总结界面适配

iOS -- 总结界面适配

作者: 奇董 | 来源:发表于2017-10-16 17:31 被阅读53次

    先来一张paintCode 的 The Ultimate Guide To iPhone Resolutions开局


    8ABE27CC-7D52-4DFC-BB74-441C454D3D45.png

    这边注意一下px 图中分为 Rendered Pixels 和 Physical Piexls 字面上的意思就不解释了。其他各种机型 渲染像素和物理像素都是一样的,就5.5寸的奇葩一点。不过我们在接触的过程中我们 都是已渲染像素为准,物理像素直接忽略就行了

    代码工面向UI交互

    目前 我们在写界面之前,UI都会给一套ip6尺寸(750 * 1136)的效果图以及标注图。
    现在排除3.5寸的手机,还有4种手机需要我们去适配。面对一套6尺寸的效果图 需要我们这些代码童鞋去制定一套适配规则。
    目前普遍的适配规格:
    知乎上手机淘宝工程师的适配规则


    控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势。

    几种方式都挺好懂得。
    对于字体大小的适配 这里在引用zcool上的一段理解

    D8A0555B-38D5-4B5C-B7D1-C4A69B8A92B0.png

    🔽 得出字号大小的结论

    image.png
    • 总结下来就是使用autolayout保持间距不变,字号分2种 1倍和1.5倍 去撑起外部父视图
      1 字号适配可以使用runtime适配
      2 更好的是在开发前就 根据机型判断封装为一个函数直接调用

    还有一个问题就是 安装标注给的字号 最后的实现效果却和效果图相差甚远。
    原因就是UILabel的大小和字号大小是有区别的
    解决办法就是 设置label大小和字号大小一样就可以了

    官方应用的字号都是统一的字体

    参考
    1.https://www.zhihu.com/question/25308946/answer/32240185?from=timeline&amp
    2.https://www.wznav.com/article/27572662/

    相关文章

      网友评论

          本文标题:iOS -- 总结界面适配

          本文链接:https://www.haomeiwen.com/subject/dszkuxtx.html