设置Launch Image 启动图片

  机型变化

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

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

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

For iPhone 6

750 x 1334 (@2x) for portrait

1334 x 750 (@2x) for landscape

For iPhone 6 Plus:

1242 x 2208 (@3x) for portrait

2208 x 1242 (@3x) for landscape

---------------------------------------------------------------------

 

4.0 inch screen:

Default-568h@2x.png (old 640x1136 ~ for iPhone 5)

4.0 inch screen: 

LaunchImage-700-568h@2x.png (new 640x1136 ~ for iPhone 5)

 

4.7 inch screen: 

LaunchImage-800-667h@2x.png (750x1334 ~ for iPhone 6)

 

5.5 inch screen: 

LaunchImage-800-Portrait-736h@3x.png (1242x2208 ~ for iPhone 6 Plus Portrait)

5.5 inch screen: 

LaunchImage-800-Landscape-736h@3x.png (2208x1242 ~ for iPhone 6 Plus Landscape)

 

Retina iPad:

Default-Portrait@2x~ipad.png (1536x2048 ~ for Retina  iPad Portrait)

Retina iPad:

Default-Landscape@2x~ipad.png (2048x1536 ~ for Retina  iPad Landscape)

iPad Mini/iPad:

Default-Portrait~ipad.png (768x1024 ~ for  iPad Portrait)

iPad Mini/iPad:

Default-Landscape~ipad.png (1024x768 ~ for  iPad Landscape)


       适配方法:

default.png
default@2x.png
default-568h@2x.png
default-667h@2x.png
default-736h@3x.png
后面两个是66+
其实无所谓的,名字可以指定的。

iphone6/6+ 更新:

Icon-Small@3x.png     87*87

Icon-40@3x.png           120*120

Icon-60@3x.png           180*180

Icon.png                        57*57

Icon@2x.png                114*114

Icon-Small.png                29*29

Icon-Small@2x.png            58*58

Icon-Small-50.png            50*50

Icon-Small-50@2x.png        100*100

Icon-72.png                    72*72

Icon-72@2x.png                144*144

Icon-40.png                    40*40

Icon-40@2x.png                80*80

Icon-60.png                    60*60

Icon-60@2x.png                120*120

Icon-76.png                    76*76

Icon-76@2x.png                152*152



  • 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个点的按钮。就建立一个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的话,会有一堆警告,高度上面不做约束,自动变化调节不出来;如果高度上也做了约束,那么就不是在一个方向上适配的前提了。
------------------------------------
参考:
《详解 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


Step1
  • 1.点击Image.xcassets 进入图片管理,然后右击,弹出"New Launch Image"
  • 2.如图,右侧的勾选可以让你选择是否要对ipad,横屏,竖屏,以及低版本的ios系统做支持.这边我选了ios8.0,ios7.0,ios6没有做支持.

技术分享

Step2

将规定尺寸的图片从你的文件中拖动进到固定位置.

系统 尺寸 分辨率
ios8 Retina HD5.5 1242x2208

Retina HD4.7 750x1334

Landscape Retina Hd 5.5 2208x1242
ios7
640x960

Retina4 640x1136

上传完毕,那么基本就快好了.

Step3

单击你整个项目名称,然后选择General,就是这个.

技术分享

重点来了.

我完成上面的步骤,且设置了Launch Images Srouce 为LaunchImage,但是启动图片还是不变,后来发现Launch SrceenFile,这个里面设置了,进去看下,你的目录下有个文件叫做LaunchScreen.xib 打开右侧框,选择这个文件,然后在如图,把Use as launch Srceen取消掉,这个就是你之前一直设置Launch Image不成功的原因

技术分享

Step4

技术分享

 

Run

Launch Image已经更改 顺便发一张我得Launch Image技术分享

如果你觉得你开启太快,那么漂亮得LaunchImage还没怎么展示就跳过了.你可以在你的第一个加载页面中添加如下代码来延长LaunchImage的显示时间.
延迟
  didfinshl
【NSThread sleepForTimeInterval:3.0】;


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值