zoukankan      html  css  js  c++  java
  • iOS:(接口适配器3)--iPhone适应不同型号 6/6plus 前

               对于不同的苹果设备。检查每个参数《iOS:机型參数、sdk、xcode各版本号》

           机型变化

              坐标:表示屏幕物理尺寸大小,坐标变大了。表示机器屏幕尺寸变大了;

              像素:表示屏幕图片的大小,跟坐标之间有个相应关系,比方1:1或1:2等;

              ppi:代表屏幕物理大小到图片大小的比例值,假设ppi不变,则坐标和像素的比例不会变;

             iPhone 4曾经

               iPhone、iPhone3/3G机型未採用retina。坐标是320 x 480,屏幕像素320 x 480 ,他们一一相应。1:1关系。即一个坐标相应1个像素。

             iPhone 4/4s

              机器採用了retina屏幕。坐标是320 x 480。屏幕像素640 x 960,他们之间是1:2关系。

    即一个坐标相应2个像素。

             iPhone 5/5s/5c

              机器採用了retina屏幕。坐标是320 x 568,屏幕像素640 x 1136。他们之间关系式1:2关系。即一个坐标相应2个像素。

             iPhone 6

              机器採用了retina屏幕。坐标是375, 667,屏幕像素750 x 1334,他们之间关系式1:2关系。即一个坐标相应2个像素。

             iPhone 6 plus

              机器採用了retina屏幕,坐标是414, 736,屏幕像素1080 x 1920。他们之间关系式1:2.6关系。即一个坐标相应2.6个像素。


           适配方法:

    • iPhone 4s之后,不同机型,屏幕大小坐标不变,跟实际图片大小比例不是1:1就是1:2关系。由于坐标不变,所以在开发中能够使用绝对定位,确定每一个视图位置。同一时候提供俩套图片,~.png和~@2x.png。系统依据机器的分辨率自己主动决定使用哪张图片。

    • iPhone 5/5s/5c之后,由于屏幕大小坐标已变,高度添加568 - 480 = 88个点,再使用绝对定位的方式,会导致程序高度不够,假设程序未做适配。系统会将多出来的88个点将会将会被自己主动均分为上下两部分,使得上下出现黑边。相应不同机型,屏幕坐标大小改变了。不能再绝对定位了,为了解决问题,ios出现了一种新技术:AutoLayout。AutoLayout能够解决不同机型,屏幕大小的变化。至于图片的适配。由于5/5s/5c,坐标:像素 = 1:2。所以直接使用@2x.png图片即可。

                至于@2x图片大小,是依照640 x 960 还是 640 x 1136 的大小。一个是拉伸效果。一个是压缩效果,由于比例差点儿相同,推荐使用大图的。

    • iPhone 6之后,由于屏幕大小坐标已变。宽、高都增大。可是宽、高比例不变,类似之前的处理方式,使用AutoLayout自己主动适配,坐标:像素 = 1:2。使用@2x.png图片。
      综合之前的,@2x图片能够依照750 x 1334规格来。


    • iPhone 6 plus,类似之前使用AutoLayout,在使用图片的时候,由于 坐标:像素 = 1:2.6,理论上使用@2.6x.png图片就可以。可是这不是整数。实际使用非常不方便。而@2x 和 @3x 都不太行得通,怎么办?

               引用一段文字说的非常好:  

               “不是现有的屏幕物理分辨率明显超过了 @2x 但还达不到 @3x 的水平么?那我们歪歪一个满足 @3x 的屏幕总能够吧?
                对的。歪歪。
                程序在 iPhone 6 Plus 上执行的时候,iOS 会骗它说,你执行在一个超大的 @3x Retina 显示屏上,物理分辨率高达 1242 x 2208,逻辑分辨率是 414 x 736,两者都比 iPhone 6 要大。然后作为设计师和开发者,也跟着一起歪歪。设计师绘图的时候要把屏幕当成 1242 x 2208 来绘图(并且要提供@3x 的高清图),开发者也依照 414 x 736 的逻辑分辨率来敲代码。
                但借来的总要还的。

    等咱们歪歪结束了以后。iOS 拿到这个假大的 UI 绘制结果。实时地再缩小到实际的 1080 x 1920 分辨率(系统通过某种算法)。于是,用户在 iPhone 6 Plus 的屏幕上看到的永远是被缩小了的图像:

              这么做使得设计和开发的过程大大简化。且最后的实际缩放系数 @2.62x 很接近理想的 @2.46x。使得相同的素材在真机上看起来尺寸也很合理:


            其它:

            代码中的尺寸不要使用480、460这种绝对数值。使用的UIScreen取设备的尺寸。

         开启适配?(手动/自己主动)

            在某机型上,假设是自己主动适配,比方iPhone 5,老版程序就会在屏幕上、下俩端多出俩块黑条;比方iPhone6/6plus。老版程序就会自己主动等比拉伸。那怎样关闭自己主动适配?

            指定启动图(比如iPhone 5为Default-568h@2x.png)或者使用Launch Screen File.xib。即程序使用手动适配,不会做拉伸等。可是程序内部必须已做处理。否则使用自己主动适配方案。

      

         总结:

    • 不同机型适配可看成两部分,一是屏幕大小适配(坐标),一是像素适配;前者依据不同的机型大小,视图大小自己主动适应(AutoLayout);后者依据机型的分辨率和坐标比率,提供合适@xx图片。
    • 眼下4s、5/5s/5c、6的适配,使用图片部分,都是使用@2x的图片,在不同的机器上肯定会有一定的拉伸、缩小,眼下没看到什么好的解决方式,推荐图片按大图标准做;
    • 趋势:机器屏幕的大小可能会越来越多。绝对定位的方式肯定不行。使用AutoLayout,自己主动适配屏幕大小,类似网页的思想来设计界面。
    • 趋势:xcode 6中已经能够使用矢量图了,能够使用矢量图。避免各种规格图片;
    • 对于设计师:
      (1)非矢量素材。就能够做尺寸最大的。之后再进行缩小。比方你须要兼容3x的屏幕,就直接做最高那种图片。由于之后几种机型长宽比都是9:16,能够直接拉伸。
      (2)已有非矢量素材,直接拉伸放大到@3x。
      (3)
      而当使用Flash之类的矢量工具来做素材的时候。应该直接做点那个尺寸。比方44 x 66个点的button。

      就建立一个44 x 66的场景。

      之后再导出成2倍图,3倍图,由于矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就easy失真。

    其它:
    --1.假如是那种导航栏。工具栏之类的背景图,须要横跨整个屏幕。能够仅仅切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,仅仅拉伸最中间的一列像素。

    须要拉伸的话,横方向就不要出现一些渐变色。
    --2.button的点击区域,不应该少于44pt(太小不易点中)。就算button的图片看起来比較小,也应该使得点button周围的透明区也有反应。

            实际操作方案:

                下面是个人观点,有没有更好的或者不正确的。有待验证、提升。

    • 方案(1)
      效果:(高)各视图、button、cell、bar高度。高度间距固定(坐标)。不同屏幕高度显示的cell多少不同。各bar。btn离屏幕顶部。或者占屏幕底部位置不变;(宽)各视图、button、cell、bar的宽度随屏幕大小变化而变化。


      实现方法
      (高):代码中用#define定义各控件高度,xib中直接写死各控件高度。父视图用ScreenHeight调节高度。
      (宽):
      1.代码中各控件宽度用效果图里“控件宽度/图宽度.00”这个比例x,x*ScrrenWeight计算控件的宽度,父视图用ScrrenWeight调节;
      2.xib中使用autoRisizing约束宽度;父视图代码中用ScrrenWeight调节宽度。

    • 方案(2):
      效果:各视图、button、cell、bar宽高随着不同屏幕大小,合适缩放。


      实现方法:
      1.高度适配參考上文中宽度适配;
      2.代码中手写Autolayout的约束条件,NSLayoutConstraint相关类或者xib中使用AutoLayout。父视图用ScrrenSize调节宽度。

    • 说明:
      1.(对于控制器创建完,不同屏幕控制器xib初始大小为多少,是屏幕大小还是xib设置的某个大小,未研究过,不知道,在代码中用ScrrenSize调节保险)。
      2.对于高度固定,仅仅是在宽度一个方向做适配的话,假设用Autolayout的话,会有一堆警告,高度上面不做约束,自己主动变化调节不出来;假设高度上也做了约束,那么就不是在一个方向上适配的前提了。
    ------------------------------------
    參考:
    《具体解释 iPhone 6 Plus 的奇葩分辨率》http://j.news.163.com/docs/99/2014091214/A5V1I08A9001I08B.html
    《iPhone屏幕适配,历史及现状》http://hjcapple.github.io/2014/10/10/iphone-screen.html
    《APP设计师必读-高速适配iPhone6及plus的诀窍》http://www.ui.cn/project.php?

    id=25685

    《iPhone6分辨率与适配》http://www.cocoachina.com/ios/20140912/9601.html

    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    9、Spring Boot 2.x 集成 Thymeleaf
    【专题】Spring Boot 2.x 面试题
    8、Spring Boot 2.x 服务器部署
    7、Spring Boot 2.x 集成 Redis
    6、Spring Boot 2.x 集成 MyBatis
    5、Spring Boot 2.x 启动原理解析
    4、Spring Boot 2.x 自动配置原理
    3、Spring Boot 2.x 核心技术
    2、Spring Boot 2.x 快速入门
    centOS下安装JDK1.8.60,glassfish4.1.1以及MySQL
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/4755274.html
Copyright © 2011-2022 走看看