学习Swift的IOS应用的代码教程-5：让应用变的美观

原文链接：

http://www.raywenderlich.com/114298/learn-to-code-ios-apps-with-swift-tutorial-5-making-it-beautiful

作者:Brian Moakley

第一次翻译专业的文章，有一些翻译的不对的地方或是不好的地方希望能指正。谢谢！

更新笔记：这个课程更新到IOS9和Swift 2 。作者是Brian Moakley.Original post by Mike Jaoudi and Ry Bristow.

祝贺你完成了Swift教程中的最新的部分！

在第一部分中，你学习了Swift的基础课程。你学习了有关变量，if/else声明，循环，可选值等等。

在第二部分中，你用你的新的Swift技能通过了一个简单的数字游戏的测试。

在第三部分中，你创建了第一个简单的命令行应用来记录人们的名字和年龄。

在第四部分中，你创建了你的第一个简单的Iphone应用。

这是本系列中最新的第五部分，取出上次你做的游戏应用，让它变得在视觉上更好看一点怎么样？

本系列这部分将教你在不同的项目中怎样用背影图在你的屏幕上来增加一点趣味性，你出将会学到怎样执行后台音乐和声音效果。让我们开始吧！

开始

你将要从你上次留下的程序开始，如果你没有准备好，从这里下载。

在你开始之前，我推荐你从之前的工程中复制。这样，在你修改视图的时候你已经有了你原来的app版本。这样做是好的，因为你不但能比较两个版本而且当你在修改时如果弄乱了一些地方，也允许你恢复原始的可运行的版本。

然后，你需要下载Tap Me Resources,这里有你在这个项目中需要的图片和声音。在你下载之后，你应该打开文件夹并选择里面的元素。拖着这些元素到你的文档大纲中的Supporting Files中。

确保copy items if needed 被选中，这样项目在另外一台电脑上或者你从你的电脑上移动或删除源文件也可以运行。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=25">

设置一个按钮的背景图

与其让你的按钮背景是一个冻结的颜色，在一个照片可编辑程序里创建一个图片看起来更好！设置按钮的背景图，你必须知道按钮的状态，确保按钮的状态在属性检查器中是Default。这就是按钮在什么都没有发生的情况下的状态。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=24">

然后找到Backgroud这一项，设置图片名字button_tap_deselected.png。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=23">

在你的App上一个版本中你已经设置了按钮的背景色为白色。将它改变为Default color,要不然就不会显示出后面的背景图。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=22">

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=21">

吼吼！由于按钮的文本“Tap Me”一直显示着，图片很难看清楚。由于文字也是图片的一部分，你要把按钮的文本删除。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=20">

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=19">

很棒！现在按钮是清晰的并且比之前的版本看起来好了很多。你现在有一个带有颜色和更好看的文本的三维立体的按钮，而不是一个里面只有无聊的白色矩形和文本的按钮。

你的下一步是为这个按钮设置在高亮时的背景图。这是在用户点击按钮后的状态。它有一个设置button_tap_selected.png的背景底子。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=18">

你可能已经发现你的按钮的这一点上看起来有点被压扁了。这是因为你限制的固定宽高比图片本身要小。

幸运的是有一种简单的方式去修复这个问题。所有的视图都有一个被叫做intrinsic content size的，可以按照你想的做为一个自动布局用来设置出现的元素的尺寸。在这个图片的事例中，它将被设置为图片的大小。

所以相比于固定宽高的限制，你可以依靠真正的图片内容的大小来判断合适的图片视图。

让我们来做出来。在文件导航中，打到按钮的宽高限制，点击删除它们。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=17">

然后，通过点击右下角的三角形图标并选中All Views\Update Frames来更新在你的控制器视图中的所有Frame来匹配它们的限制。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=16">

Build并运行，享受你的大按钮！

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=15">

添加屏幕的图片

有时你也想为屏幕添加图片，不带有按钮动作。在这个案例中你可以用UIImageView。在Object Library中找到ImageView并拖到屏幕上。

你将要用这个图片类来创建一个边框。所以你想摆放并改变它的大小以置于它拉伸到从屏幕的左边到右边，并在屏幕的上方。同样的方法，在下面放置一个图片作为下边框。

移动你的Label留出一点空间。那是最容易的方式，用尺寸检查器来更新它们的限制。选中Timer Label，在尺寸检查器的限制区域，点击Top Space to: Top Layout Guide限制的编辑按钮。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=14">

现在设置上面图片视图的约束，点击Pin按钮，首先确保不选边界限制的复选框。然后点击左，上和右T-bars.确定每个值都是0.最后检查高度的限制，值为22。这些做完后点击按钮读取，添加4个约束。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=13">

如果你看到了橘***的线，确保你按照本教程中的描述更新的的Frames。

对于下面的图片视图做相同的操作。尝试着按照之前的指导设置约束，如果你出错，检查出错的原因（按照上面的指导做）。

选择上面的图片视图，在检查器中设置图片为chekecker_top.png。设置模式为Aspect Fill。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=12">

在下面的图片视图中用同样的方法设置相同的图片。再次运行App享受你的漂亮的边框栏。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=11">

以编程的方式设置背景颜色

你不可能一直通过Storyboard的方式来改变你的App的样子。让我们把背景色改为紫色来测试一下。在ViewController.swift中的ViewDidLoad方法中试着添加这行代码：

view.backgroundColor=UIColor.purpleColor()

这行代码是通过purpleColor( )这个方法返回设置的颜色类修改View的背景色属性。

现在运行App检查它看起来像什么。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=10">

虽然这些概念的验证看起来确实没有那么好。然而对你来说是幸运的，你也可以设置View的背景图片。让我们再做一遍这个程序，用下面这行代码替换你原先设置背景色为紫色的那里：

view.backgroundColor=UIColor(patternImage:UIImage(named:“bg_title.png”)!)

这行代码可以让图片填满整个屏幕。运行程序，看看会发生什么。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=9">

当你做到这的时候 ，继续前进并以编程的方式设置两个Labels的背景色。去做这些，下面是两代码。

scoreLabel.backgroundColor=UIColor(patternImage:UIImage(named:"field_score.png")!)
timerLabel.backgroundColor=UIColor(patternImage:UIImage(named:"field_time.png")!)

运行程序看看现在会发生什么。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=8">

Label的位置和大小

在这有两件事可以用来改善。一件事是Label的位置和大小没有设置。scoreLabel是很明显的太高了并且它的尺寸和形状和它的图片不一样。

修复它，选中上面的Label，用用Pin按钮来添加约束，设置它的宽为133，高为46。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=7">

选中下面的Label，在项目管理器中找到它的当前的高度并点击删除它。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=6">

然后用Pin按钮来添加约束设置它的宽为146高102：

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=5">

最后，清理你选中的，点击第三个按钮，并且选择All Views in View Controller\Update Frames

来申请约束。

由于最后的修改，你现在用的Label的背景色与它的文本颜色基本相同。解决这个问题，将文本颜色改为浅蓝色剩下的interface都是好的。用为些值做为最好的结果。确保你对timeLabel和scoreLabel都做了这些。

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=4">

也要设置中心对齐。

运行App，新的彩色文本是更容易阅读的。

添加声音

音乐和声音效果是增添你App的个性很好的方式。这是这个App的所要做的最后一件事。

但是首先，你需要一些声音。zip文件，并将这有三个文件放到你的工程里。

有三个声音文件：背景音乐；每次点击按钮时都会有播放嘟嘟声；每次倒计时时钟通过1S的嘟嘟声；让播放出来的声音甜蜜一点！

声音播放装置将被控制器的代码控制，所以打开ViewController.swift.在接近头文件的地方，你将会发现这一行代码。

import UIKit

你也需要用到AVFoundation framework的import 声明，它是负责播放声音和录像的苹果框架。紧跟在先前的import 声明后面立刻添加上声明。

import AVFoundation

就像引入UIKit 让你用 UIButton和UILabel一样，引入AVFoundation让你用非常有用的AVAudioPlayer类。接下来，你需要为这有这三个声音每 个都实例化变量（- -）。在class内的每个正式声明的实例变量后面，为每个的实例变量添加一行代码。

varbuttonBeep:AVAudioPlayer?
varsecondBeep:AVAudioPlayer?
varbackgroundMusic:AVAudioPlayer?
//由于AVFoundation可能没有用到，实例变量被声明为可选值。
//接下来，你需要在ViewDidLoad方法上面添加这个方法。
funcsetupAudioPlayerWithFile(file:Nsstring,type:Nsstring)->AVAudioPlayer?
{

letpath=NSBundle.mainBundle().pathForResource(fileasstring,ofType:typeasstring)
leturl=NSURL.fileURLWithPath(path!)


varaudioPlayer:AVAudioPlayer?

do{
tryaudioPlayer=AVAudioPlayer(contentsOfURL:url)
}catch{
print("Playernotavailable")
}

returnaudioPlayer
}

这个方法将会返回一个AVFoundation类，并带有两个参数：文件名 和 类型。让我们通过下面的部分看看它做了什么。

1.你需要知道文件的完整路径，NSBundle.mainBundle( )将会告诉你到项目的哪里去寻找，AVAudioPlayer需要以URL的形式知道文件的路径。所以完整（全）路径被转换为URL的格式。

2.你将会发现audioPlayer是一个可选值。可能状况是AVAudioPlayer没有创建，在设备上是尝试着实例化它。

3.这是你创建 AVAudioPlayer的地方。由于你创建的类可能会抛出一个错误，在你开始用block的doq键值的时候。下一步，你尝试着创建player。如 果这个player不能被创建，你会得到错误。在这个案例中，一个错误仅仅是提出来而不是真正的应用，你可能在block中处理这个放置的错误。在 Swift2.0中这个错误的处理代码是新的。

4.如果一切顺利，AVAudioPlayer类将会被返回！

现在你需要处理设置AVAudioPlayer类的方法，是时候用到它了！在ViewDidLoad( )中添加这些代码，在之前setupGame( )方法上面：

ifletbuttonBeep=self.setupAudioPlayerWithFile("ButtonTap",type:"wav"){ self.buttonBeep=buttonBeep } ifletsecondBeep=self.setupAudioPlayerWithFile("SecondBeep",type:"wav"){ self.secondBeep=secondBeep } ifletbackgroundMusic=self.setupAudioPlayerWithFile("HallOfTheMountainKing",type:"mp3"){ self.backgroundMusic=backgroundMusic }

这里你创建的第一个player，如果这些player是能被创建的，这个类将会分配实例变量。

这一点在ViewDidLoad中，在你的代码里你将会有三个已经准备好的声音可以被调用。

第一个声音是按钮的嘟嘟声，当你按下按钮时将会播放。通过添加下面的代码更新按钮的方法来播放声音。

buttonBeep?.play()

在变量名后面添加问题标志，你会尝试着调用一个可选类型的方法。如果有一个类在这个方法里被调用。否则代码将会被忽略。

添加另外两个声音。当计时器每走1s时倒计时的声音就会被播放。通过添加这行代码调用声音的方法。在if判断前。

secondBeep?.play()

你马上就要完成了！

最后 一步是添加背景音乐。每次新游戏开始时播放音乐，在setupGame()方法中添加代码。添加这些代码在方法体内的下面：

backgroundMusic?.volume=0.3

backgroundMusic?.play()

你可以调整背景音乐的值让它可以一直听到。改变背景音乐的volume参数是做到这一点的好的方法。它可以被设置为从0（关）到1.0(满)，而0.3是一个好的开始点。

现在最后一次运行你的充满光荣经历的和个人特色的app吧！

Box:getMessageData&sid=DCUpMfShB" src="http://mail.163.com/js6/s?func=mBox:getMessageData&sid=DCUpMfShBObyMWXvWZhhBPotdjgXBpJC&mid=414:xS2BngjRDVD+bEnG8AAAs3&part=3">