A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

麻烦事No.3:“能给我新设备的启动图吗?”

启动图对于app来说还是蛮重要的。这是启动app后最先看到的,它会给用户一个app其余部分是如何设计的第一印象。如果我看到一个设计得很糟糕的启动图,我会认为app其他地方也好不到哪去,当然这只是我的情况。对于我们那可怜的设计师来说,每次有新设备出来时,他们都知道要放大启动图来支持新设备的分辨率。对于iPhone 6 和 iPhone 6 Plus,如果你没有为这两个设备准备对应的启动图,那么app就会工作在放大模式。启动图还在Asset Catalog中,但是我建议把它拆出来,因为启动图也升级了。现在,你可以使用LaunchScreen xibs。

在工程文件中,你可以指定app在启动时加载的xib,这样你就不需要准备9张启动图了。LaunchScreen.xib还支持自动布局,这样我们就能分块构建启动屏幕了。按如下这样设置:

首先创建一个xib文件。你可以在如下图所示的地方选择Launch Screen类型的xib。

然后打开工程文件,选择app的target,在Launch Screen file处选择你的Launch Screen .xib文件。

尽可能地利用Launch Screen吧。你肯定不想被抓到在问设计师要一年后新出的手机平板的8x启动图。

麻烦事No.4:“能把这些按钮的图片拉长一点吗?”

这种情况发生的概率比你想象的要高得多。对于一张pattern image或者是有圆角的图片,考虑到有更大的屏幕,你需要重新调整图片的大小,以免图片拉伸出现失真。Natasha发布了一篇很棒的文章来说明如何编程解决这个问题,但是我们也可以在Xcode 6的Asset Catalog中搞定它。顺便说一下,我强烈建议你在继续往下读之前,看一下Natasha的文章,这样你就能理解到底发生了什么。免责声明:下面的图片等是直接从Natasha的文章中拷贝过来的。Sorry!

好了,我们继续。

在之前,一般用类似下面的代码来获得可改变大小的图片:

[backcolor=white !important][size=1em]
[size=1em]1

[size=1em]2

[size=1em]3

[size=1em]4

[size=1em][size=1em]let edgeInsets = UIEdgeInsets(top: 8.0, left: 8.0, bottom: 8.0, right: 8.0)
[size=1em]let backgroundButtonImage = UIImage(named:"purple_button")?.resizableImageWithCapInsets(edgeInsets)
[size=1em]  
[size=1em]purpleButton.setBackgroundImage(backgroundButtonImage, forState: .Normal)



这将会得到一张和下面类似的图片:

在运行时,会拉伸距离UIImageView的container的边框8像素的中间部分,这样就能保留圆角,得到下面这样的:

多亏了Xcode中Asset Catalog的slice和dice,我们不需要代码也能拉伸图片。首先在Xcode中选中图片,然后点击右下角的Show Slicing:

你现在应该能看到slicing 面板和一个按钮"Start Slicing"。

在你点击按钮之后,会显示下面的三个选项:

左边的按钮用于horizontal edge insets,右边的按钮用于vertical edge insets,中间的则是两个都有。在我们的例子中要保留圆角,所以我们按中间的按钮,告诉系统我们想要按钮的中间在水平和垂直方向拉伸。在按下按钮之后,就能看到一些可以拖动的细条,这可以设置从哪里开始拉伸图片。

系统会保留深紫色的区域,浅紫色的区域会被拉伸。

更厉害的是,Xcode自动找到了圆角,所以我们不需要设置从哪里开始拉伸图片。最后别忘了在Attribtues pane中设置图片是可拉伸的。

如果我是你的话,我就会尝试并习惯这个功能。有了这个无价之宝,你就不用再在resizableImageWithCapInsets方法中填写那些神奇的数字了,也能帮助你分离view逻辑和app逻辑。

结论

我很确定,我们开发者几乎每天都还会做很多其他事去麻烦设计师们,但至少我们能多用用这些功能,让他们稍微休息一会儿。毕竟编程能解决一切问题,何乐而不为呢?



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马