码迷,mamicode.com
首页 > 移动开发 > 详细

iOS屏幕适配

时间:2015-12-31 12:26:30      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

虽然从屏幕长宽比来看,16:9可以说是手机界的共识,可不要高兴得太早,有个更大的坑在等着我们。iPhone 6 (plus)的问世让我们不得不重新考虑,iPhone的UI要怎么做?画布设多大?

技术分享

根据以往Android的经验,尽管屏幕物理尺寸多如牛毛,但是除以相应的倍率,得到的逻辑像素比较统一,不同屏幕上显示的信息量是一样的。少数另类也是即将淘汰的老旧设备,稍稍偏小一点,设计时酌情考虑即可。

现在iPhone的情况似乎有点不妙,物理尺寸除以倍率,真是一种一个样啊!不同的逻辑像素意味着屏幕的信息量不一样,而且可以差很大。对比5s和6+的逻辑像素,真的差很远。这会导致5s上刚刚好的设计,在6+上显得太空旷;6+上刚刚好的设计,5s上一定变老人机。

与此相比,多切一套图真不算什么。真正的挑战,是一套设计已经不够了。当然我们可以为大屏的6+单独设计。但5s和6即使倍率相同,逻辑像素也不一样。这意味着我们要在一套设计中处处考虑大小两种屏幕尺寸。

分辨率和像素

经新xcode6模拟器验证(分辨率为pt,像素为真实pixel): 

  1. iPhone5分辨率320×568,像素640×1136,@2x
  2. iPhone6分辨率375×667,像素750×1334,@2x
  3. iPhone6 Plus分辨率414×736,像素1242×2208,@3x,(注意,在这个分辨率下渲染后,图像等比降低pixel分辨率至1080p(1080×1920))

技术分享

自动适配

不处理时自动等比拉伸,如果在老工程打印屏幕frame,依然是 320x568

对比自动适配的和完美适配的导航栏就能看出问题:

技术分享

因为拉伸所以会有一些虚,导航栏明显比64要大,但相比3.5寸到4寸的留黑边还是好很多。 如何关闭自动适配方案呢?这个还是老思路,换启动图: 

技术分享

除了换启动图外,不得不说的是,新Xcode中可以使用一个 xib 来设置启动图: 

技术分享

不过这个xib不能关联任何的代码(不能自定义View的Class,不能IBOutlet,不能加Object),可以理解成这个xib就是一张截图,这个方案的好处在于可以使用到 Size Classes 来针对不同屏幕布局这个xib(感兴趣可以看 《Size Classes初探》 ) 

关于手动适配

只要手动指定了启动图或者那个xib,屏幕分辨率就已经变成应有的大小了,老代码中所有关于写死frame值的代码通通倒霉,如果去手动适配就要全部适配,建议 在找到个可行方案前先不要做修改 ,自动适配方案还算不影响使用。 

面对4个分辨率的iPhone,建议使用 Auto Layout 布局 +  Image Assets 管理各个分辨率的图片 +  Interface Builder (xib+storyboard)构建UI, Size Classes 在低版本iOS系统的表现未知。想要这套手动适配方案,起码你的工程需要部署在iOS6+,还不用AutoLayout布局的会死的蛮惨。 

关于Xcode6

  1. 模拟器路径被换成了  ~/Library/Developer/CoreSimulator/Devices/
  2. xcode6中已经找不到iOS6的模拟器了,是时候说服大家放弃iOS7-了
  3. 现在起提交App Store强制需要支持64位,是时候梳理一遍所有依赖的第三方lib,更新到64位

iOS屏幕适配

标签:

原文地址:http://www.cnblogs.com/zhangshan/p/5091127.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!