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当中开发应用程序,我们鼓励更多的人开发应用程序,也鼓励更多的创业加入.” ...
随机推荐
- [POJ 1739] Tony's Tour
Link: POJ 1739 传送门 Solution: 这题除了一开始的预处理,基本上就是插头$dp$的模板题了 由于插头$dp$求的是$Hamilton$回路,而此题有起点和终点的限制 于是可以构 ...
- Codeforces 138D World of Darkraft(Multi-Nim)
[题目链接] http://codeforces.com/problemset/problem/138/D [题目大意] H*W的棋盘中每个点都是L.R.X三者之一,两人轮流选一个点, 若为L则向左下 ...
- POJ 2975 Nim(博弈论)
[题目链接] http://poj.org/problem?id=2975 [题目大意] 问在传统的nim游戏中先手必胜策略的数量 [题解] 设sg=a1^a1^a3^a4^………^an,当sg为0时 ...
- 【AC自动机】【动态规划】poj3691 DNA repair
http://blog.csdn.net/kk303/article/details/6929641 http://blog.csdn.net/human_ck/article/details/657 ...
- 【二分法】【尺取法】bzoj2348 [Baltic 2011]Plagiarism
一开始以为死于精度……调了半天发现死于long long…… 一.二分法: #include<cstdio> #include<cstring> #include<alg ...
- Echarts无数据时只显示文字不显示动画
只需要在option中加入如下代码即可: noDataLoadingOption: { text: '暂无数据', ...
- URL Schemes(转载)
URL Schemes 应用在 iOS 上已经很久了.对于使用者来说,在沙盒机制下的 iOS 中,如果想做到一定程度上的自动化就不可避免地要用到 URL Schemes.但因为 URL Schemes ...
- Android之Activity 生命周期
作用:用户界面的组件,主要用于和用户进行交互.可以理解为手机屏幕的一屏. 生命周期: Resume:“继续”的意思. 由此可见, Activity有四种基本状态: 1) Running:位于屏幕最前端 ...
- Vim复制一整行和复制多行
1.复制 1)单行复制 在命令模式下,将光标移动到将要复制的行处,按“yy”进行复制: 2)多行复制 在命令模式下,将光标移动到将要复制的首行处,按“nyy”复制n行:其中n为1.2.3…… 2.粘贴 ...
- HttpApplication理解
HttpApplication对象是经由HttpApplicationFactory.GetApplicationInstance(并最终调用HttpRuntime.CreateNonPublicIn ...