前言:
好多iOS App的开发者都会面临的一个问题,那就是 App 的图标(icon) 和启动图(launch images) 。 一些没有经验(指的是没做过App审计的)的UI设计师,不知道该怎么做。他就会问开发者。这个时候就是你展示的时候,其实网上一搜索一大堆都是的,也没什么装的。
第一:App的图标。
1、图标的大小。(圆角和直角)
直角的,苹果系统会在显示的时候会裁成圆角。各iPhone的图标大小列表:
有的设计是用px的大小,其实正确的设置是pt。px设计不是不可以,也可以用。
2、pt 和px 的区别。
pt 是point 的缩写,但它不是点。它是一个长度单位 。1pt = 1/72英寸。
px是pixel的缩写,是像素。它是屏幕上显示数据最基本的点。
所以,pt 和px 是不同的。
第二:启动图(Launch images)。
1、第一种添加
我们点击工程里面的Assets.xcassets目录,然后在第二列(就是Appiicon所在处)空白处,鼠标右键选择 New image Set 创建如图界面。
我们观察上图的最右面。系统默认为我们选择的是 all 类型是Universal(通用)。我们这里只要适配iPhone就可以。所以,把按钮切换到iOS iphone 上。如下图:
我们看上图, 1x、2x、3x 有三个图片。我们点击也没有尺寸提示。我做个分析。就三个框,并且我们要死配全部手机,我们要怎么做?我是这么做的,不知道是否正确,但是可以满足需求,效果非常的好:第一、我要UI 给我四张图。(为啥4张?不是有三个框吗?)第二:4张图的大小尺寸:(命名为Default-568.png)640 * 960 px、(1x)640 * 1136 px、(2x)750 * 1334 px 、(3x)1080 * 1920 px。这四张图。 其中,(命名为Default-568.png)640 * 960 px是适配iPhone4系列的手机。然后,我们将做好的图片拖进框里面如下图:
紧接着,我们在点击 LaunchScreen.storyboard 目录,并向故事版拖进去一个UIImageView 的对象,并把它设置好适配全部手机尺寸。然后我们将工程切换到如下图界面:
然后,我们看到上图,最右边下面的图片,我们将图片,拖进imageview里面就可以了。拖进去的结果如下图:
然后,我们也把另一个Default-568的图片导入到工程里面。我们看着图片已经变形了,不要紧张。变形是不然的,我们在设置一下就可以了。如下图:
不用担心,App启动的时候,会有白边。然后,我们还要设置一个地方。如下图:
我们启动,发现启动页面好快,有好多都不喜欢快。我们就让他变动缓慢一点。在Appdelegate中添加如下:[NSThread sleepForTimeInterval:2];
2、第二种添加。
我们点击工程里面的Assets.xcassets目录,然后在第二列(就是Appiicon所在处)空白处,鼠标右键选择 APPicons&Launchimages 下的New iOSlaunchimages 创建如图界面。
问题补充:如何去除icon高光?是不是xcode的bug?
答:这不是xcode的Bug。Xcode 在默认的情况下,是为你的AppIcon设置高光效果,如果你不想有高光效果。你可以按下图设置,就可以去掉Icon 的高光效果。
测试工程的下载: