iPhone不同机型适配 6/6plus --备用

 机型变化

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

像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如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和[email protected],系统根据机器的分辨率自动决定使用哪张图片。
  • 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为[email protected])或者使用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个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图,3倍图,因为矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就容易失真。

其他:

--1.假如是那种导航栏,工具栏之类的背景图,需要横跨整个屏幕。可以只切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,只拉伸最中间的一列像素。需要拉伸的话,横方向就不要出现一些渐变色。
--2.按钮的点击区域,不应该少于44pt(太小不易点中),就算按钮的图片看起来比较小,也应该使得点按钮周围的透明区也有反应。

实际操作方案:

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

  • 方案(1)
    效果:(高)各视图、按钮、cell、bar高度,高度间距固定(坐标),不同屏幕高度显示的cell多少不同,各bar,btn离屏幕顶部,或者占屏幕底部位置不变;(宽)各视图、按钮、cell、bar的宽度随屏幕大小变化而变化。
    实现方法:
    (高):代码中用#define定义各控件高度,xib中直接写死各控件高度,父视图用ScreenHeight调节高度;
    (宽):
    1.代码中各控件宽度用效果图里“控件宽度/图宽度.00”这个比例x,x*ScrrenWeight计算控件的宽度,父视图用ScrrenWeight调节;
    2.xib中使用autoRisizing约束宽度;父视图代码中用ScrrenWeight调节宽度;
  • 方案(2):
    效果:各视图、按钮、cell、bar宽高随着不同屏幕大小,合适缩放。
    实现方法:
    1.高度适配参考上文中宽度适配;
    2.代码中手写Autolayout的约束条件,NSLayoutConstraint相关类或者xib中使用AutoLayout,父视图用ScrrenSize调节宽度;
  • 说明:
    1.(对于控制器创建完,不同屏幕控制器xib初始大小为多少,是屏幕大小还是xib设置的某个大小,未研究过,不知道,在代码中用ScrrenSize调节保险)。
    2.对于高度固定,只是在宽度一个方向做适配的话,如果用Autolayout的话,会有一堆警告,高度上面不做约束,自动变化调节不出来;如果高度上也做了约束,那么就不是在一个方向上适配的前提了。
时间: 2024-10-27 03:34:53

iPhone不同机型适配 6/6plus --备用的相关文章

iOS:界面适配--iPhone不同机型适配 6/6plus

iOS:界面适配--iPhone不同机型适配 6/6plus        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G机型未采用retina,坐标是320 x 480,屏幕像素320 x 480 ,他们一一对应,1:1关系.即一个坐标对应1个像素.

iOS:界面适配(三)--iPhone不同机型适配 6/6plus 前

转:http://blog.csdn.net/houseq/article/details/40051207 对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>.        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G

android 机型适配

使用自动拉伸位图 支持各种屏幕尺寸通常意味着您的图片资源还必须能适应各种尺寸.例如,无论要应用到什么形状的按钮上,按钮背景都必须能适应. 如果在可以更改尺寸的组件上使用了简单的图片,您很快就会发现显示效果多少有些不太理想,因为系统会在运行时平均地拉伸或收缩您的图片.解决方法为使用自动拉伸位图,这是一种格式特殊的 PNG 文件,其中会指明可以拉伸以及不可以拉伸的区域. .9的制作,实际上就是在原图片上添加1px的边界,然后按照我们的需求,把对应的位置设置成黑色线,系统就会根据我们的实际需求进行拉伸

Android面试题-机型适配之痛,例如三星、小米、华为、魅族等。

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Android面试题-机型适配之痛,例如三星.小米.华为.魅族等. - 所有技术文章里面全部配置了配套视频 - 博客频道 - CSDN.NET 所有技术文章里面全部配置了配套视频 https://github.com/open-android/Android 目录视图 摘要视

iOS 11 与 iPhone X的适配那些事

前言 9月20日,正式推送Xcode 9和iOS 11的正式版,适配iOS 11是首要的适配的,网上教程很多,不在赘述.这里主要讲的是iPhone X的适配大神级别的可以不用看,我这里讲的主要是基础的适配工作 摘要 启动图:1125 * 2436  statusBar高度:44  tabbar高度:83 启动应用程序 对于一些老项目,在启动图上,可能没有采用XIB或者SB进行适配的,所以可能会出现如图一,这样导致整个项目运行就会不能完全贴合. ![上传login2_194373.png..] 解

Android机型适配之痛[干货分享]

Android平台的诞生为手机智能化的普及立下汗马功劳,但其最大的缺点也越来越凸显,那就是碎片化严重:设备繁多.品牌众多.版本各异,芯片.摄像头.分辨率不统一等等,这些都逐渐成为Android系统发展的障碍,碎片化严重不仅造成Android系统混乱,也导致Android应用隐形开发成本的增多.本文中详细介绍了Android琳琅满目的适配问题. 一.个性化十足的Launcher 快捷方式虽然看起来只是一个很小的功能点,但是它涉及到的机型适配问题很多. 快捷方式创建代码: Intent addSho

关于iPhone X 的适配

1.屏幕尺寸相关变化 高度增加了145pt,变成812pt. 屏幕圆角显示,注意至少留10pt边距. 状态栏高度由20pt变成44pt,留意这个距离就能避开"刘海"的尴尬,相应的导航栏以上变化64->88. 底部工具栏需要为home indicator留出34pt边距. 物理分辨率为1125px * 2436px. 2.横竖屏安全区对比 3.其他设备安全区域对比 4.应用设计 5.控件布局 更多可查看官方文档和视频Creating apps for iPhone X. 如何让AP

iPhone X的适配

大概说下iPhone X的适配及遇到的几种问题: 1.启动页 对于一些没适配的老项目,运行后便会出现下图所示情况,解决办法,添加1125*2436尺寸的启动页,添加完后就能贴合. 2.导航栏及UITabBar部分的变化 非iPhone X : StatusBar 高20px,NavigationBar 高44px,底部TabBar高49px iPhone X: StatusBar 高44px,NavigationBar 高44px,底部TabBar高83px 解决方法,将这些数据写成宏 #def

iPhone X 设计适配指南 &amp; iOS 11 新特性

设计内容不能被屏幕圆角.上方传感器区域.下方返回主页指示器所遮挡. 屏幕圆角.传感器区域和主屏幕支持器 设备的圆角.传感器区域和主页指示器 iPhone X 使用屏幕边缘手势来访问主屏幕.应用切换.通知中心和控制用心. 安全区可以防止你的内容覆盖状态栏.导航栏.工具栏和标签栏. https://mp.weixin.qq.com/s/7kM8Qiha7np6_QWfduxD-A