iOS机型适配
机型变化
坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了;
像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等;
ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变;
iPhone 4以前
iPhone 4/4s
iPhone 5/5s/5c
iPhone 6
iPhone 6 plus
适配方法:
- 在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图片就行。
- 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个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图,3倍图,因为矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就容易失真。
--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的话,会有一堆警告,高度上面不做约束,自动变化调节不出来;如果高度上也做了约束,那么就不是在一个方向上适配的前提了。
iOS机型适配的更多相关文章
- iOS:界面适配(三)--iPhone不同机型适配 6/6plus 前
转:http://blog.csdn.net/houseq/article/details/40051207 对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>. ...
- iOS:界面适配--iPhone不同机型适配 6/6plus
iOS:界面适配--iPhone不同机型适配 6/6plus 机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系 ...
- iOS:界面适配(三)--iPhone不同机型或设备不同尺寸适配(屏幕适配)和系统适配
对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>. 机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片 ...
- iPhone不同机型适配 6/6plus --备用
机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果 ...
- iOS屏幕适配
## iOS屏幕适配 ### iOS屏幕适配发展史 1> iPhone4以前(没有iPad) * 不需要屏幕适配 2> iPad.iPhone5等设备出现 * 需要做横竖屏适配 * aut ...
- 腾讯优测-优社区干货精选 | 那些年,我们在Android机型适配上遇到的坑之Camera拍照时快门咔嚓声
文/腾讯优测研发工程师 吴宇焕 优测小优有话说: android机型适配的坑自然是不少,不想掉坑快来优测优社区~ 现在Android手机一般都会带有照相功能,有很多朋友就发现手机照相时快门声音很响,想 ...
- iOS 9 适配需要注意的问题
iOS 9 适配需要注意的问题 1`网络适配_改用更安全的HTTPS iOS9把所有的http请求都改为https了:iOS9系统发送的网络请求将统一使用TLS 1.2 SSL.采用TLS 1.2 协 ...
- 【转】iOS屏幕适配
一.iOS屏幕适配发展历程 设备 适配技术 4及以前(iPad未出) 直接用代码计算 有了iPad autoResizing 有不同屏幕的iPhone后 autoLayout 有更多不同屏幕的iPho ...
- iOS 9 适配中出现的坑
整理 iOS 9 适配中出现的坑(图文) 2015-10-22 iOS开发 库克表示:“现在在中国有150多万的开发者在iOS当中开发应用程序,我们鼓励更多的人开发应用程序,也鼓励更多的创业加入.” ...
随机推荐
- 状压DP【p2622】 关灯问题II
题目描述--->P2622 关灯问题II 没用的话: 首先第一眼看到题,嗯?n<=10?搜索? 满心欢喜地敲了一通搜索. 交上去,Wa声一片? 全部MLE! 这么坑人神奇? 一想,可能是爆 ...
- [BZOJ 4060] Word Equations
Link: BZOJ 4060 传送门 Solution: 可以发现字符串间的关系可以构成一棵树 于是我们先用字符串哈希建树,再树形$dp$即可 设$dp[i][j]$为第$i$个节点从$P$字符串的 ...
- newcoder contest 114 B - 求值2
记得这是一个组合数卷积的板子题. ∑ C(A,i) * C(B,D-i) = C(A+B,D) 然后就直接做了. #include<cstdio> #include<cctyp ...
- [UOJ206]Gap
子任务$1$:直接找到最大值后从两边开始找,一步一步从左右到中间确定所有数,调用次数是$\left\lceil\dfrac n2\right\rceil$ 子任务$2$:先找到最大值$mx$和最小值$ ...
- 【块状树】【博弈论】bzoj3729 Gty的游戏
块状树,每个块的根记录一下当前块内距块根为奇数距离的异或和和偶数距离的异或和,询问的时候讨论一下即可. 总的节点数可能超过50000. #include<cstdio> #include& ...
- Linux虚拟机小问题解决方法系列
1)使用虚拟机的过程中,会碰到虚拟机占用的空间越来越大的情况,即使删除了虚拟机里的文件,磁盘空间还是似乎还是没有释放,使用“vmware-vdiskmanager”工具解决.解决方法在这里:参考.合并 ...
- Spring入门程序-前端控制器配置器
1,处理器的第二种配置方式 <!--配置handler --> <bean id="/FirstController" class="com.songy ...
- Ubuntu 16.04通过源码安装QUEM虚拟机
下载编译安装: wget http://download.qemu-project.org/qemu-2.9.0.tar.xz tar xvJf qemu-2.9.0.tar.xz cd qemu-2 ...
- gulp的入门浅析
阅读目录 介绍gulp 安装gulp gulpfile.js 运行gulp 介绍gulp的api 介绍gulp gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/c ...
- windows下硬盘的逻辑结构
共有五部分组成: MBR:主引导分区(硬盘启动记录) DBR:DOS启动记录 FAT: 文件分配表 DIR:根目录区 DATA:数据区