學習Swift的IOS應用的代碼教程-5：讓應用變的美觀

原文鏈接：

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

作者:Brian Moakley

第一次翻譯專業(yè)的文章，有一些翻譯的不對的地方或是不好的地方希望能指正。謝謝！

更新筆記：這個課程更新到IOS9和Swift 2 。作者是Brian Moakley.Original post by Mike Jaoudi and Ry Bristow.

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

     在第一部分中，你學習了Swift的基礎課程。你學習了有關變量，if/else聲明，循環(huán)，可選值等等。

     在第二部分中，你用你的新的Swift技能通過了一個簡單的數(shù)字游戲的測試。

     在第三部分中，你創(chuàng)建了第一個簡單的命令行應用來記錄人們的名字和年齡。

     在第四部分中，你創(chuàng)建了你的第一個簡單的Iphone應用。

     這是本系列中最新的第五部分，取出上次你做的游戲應用，讓它變得在視覺上更好看一點怎么樣？

     本系列這部分將教你在不同的項目中怎樣用背影圖在你的屏幕上來增加一點趣味性，你出將會學到怎樣執(zhí)行后臺音樂和聲音效果。讓我們開始吧！

     開始

     你將要從你上次留下的程序開始，如果你沒有準備好，從這里下載。

     在你開始之前，我推薦你從之前的工程中復制。這樣，在你修改視圖的時候你已經(jīng)有了你原來的app版本。這樣做是好的，因為你不但能比較兩個版本而且當你在修改時如果弄亂了一些地方，也允許你恢復原始的可運行的版本。

     然后，你需要下載Tap Me Resources,這里有你在這個項目中需要的圖片和聲音。在你下載之后，你應該打開文件夾并選擇里面的元素。拖著這些元素到你的文檔大綱中的Supporting Files中。

     確保Copy items if needed 被選中，這樣項目在另外一臺電腦上或者你從你的電腦上移動或刪除源文件也可以運行。

設置一個按鈕的背景圖

與其讓你的按鈕背景是一個凍結的顏色，在一個照片可編輯程序里創(chuàng)建一個圖片看起來更好！設置按鈕的背景圖，你必須知道按鈕的狀態(tài)，確保按鈕的狀態(tài)在屬性檢查器中是Default。這就是按鈕在什么都沒有發(fā)生的情況下的狀態(tài)。

然后找到Backgroud這一項，設置圖片名字button_tap_deselected.png。

在你的App上一個版本中你已經(jīng)設置了按鈕的背景色為白色。將它改變?yōu)镈efault color,要不然就不會顯示出后面的背景圖。

吼吼！由于按鈕的文本“Tap Me”一直顯示著，圖片很難看清楚。由于文字也是圖片的一部分，你要把按鈕的文本刪除。

     很棒！現(xiàn)在按鈕是清晰的并且比之前的版本看起來好了很多。你現(xiàn)在有一個帶有顏色和更好看的文本的三維立體的按鈕，而不是一個里面只有無聊的白色矩形和文本的按鈕。

     你的下一步是為這個按鈕設置在高亮時的背景圖。這是在用戶點擊按鈕后的狀態(tài)。它有一個設置button_tap_selected.png的背景底子。

你可能已經(jīng)發(fā)現(xiàn)你的按鈕的這一點上看起來有點被壓扁了。這是因為你限制的固定寬高比圖片本身要小。

     幸運的是有一種簡單的方式去修復這個問題。所有的視圖都有一個被叫做intrinsic content size的，可以按照你想的做為一個自動布局用來設置出現(xiàn)的元素的尺寸。在這個圖片的事例中，它將被設置為圖片的大小。

     所以相比于固定寬高的限制，你可以依靠真正的圖片內容的大小來判斷合適的圖片視圖。

     讓我們來做出來。在文件導航中，打到按鈕的寬高限制，點擊刪除它們。

然后，通過點擊右下角的三角形圖標并選中All Views\Update Frames來更新在你的控制器視圖中的所有Frame來匹配它們的限制。

Build并運行，享受你的大按鈕！

添加屏幕的圖片

     有時你也想為屏幕添加圖片，不帶有按鈕動作。在這個案例中你可以用UIImageView。在Object Library中找到ImageView并拖到屏幕上。

     你將要用這個圖片類來創(chuàng)建一個邊框。所以你想擺放并改變它的大小以置于它拉伸到從屏幕的左邊到右邊，并在屏幕的上方。同樣的方法，在下面放置一個圖片作為下邊框。

     移動你的Label留出一點空間。那是最容易的方式，用尺寸檢查器來更新它們的限制。選中Timer Label，在尺寸檢查器的限制區(qū)域，點擊Top Space to: Top Layout Guide限制的編輯按鈕。

現(xiàn)在設置上面圖片視圖的約束，點擊Pin按鈕，首先確保不選邊界限制的復選框。然后點擊左，上和右T-bars.確定每個值都是0.最后檢查高度的限制，值為22。這些做完后點擊按鈕讀取，添加4個約束。

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

     對于下面的圖片視圖做相同的操作。嘗試著按照之前的指導設置約束，如果你出錯，檢查出錯的原因（按照上面的指導做）。

     選擇上面的圖片視圖，在檢查器中設置圖片為chekecker_top.png。設置模式為Aspect Fill。

在下面的圖片視圖中用同樣的方法設置相同的圖片。再次運行App享受你的漂亮的邊框欄。

以編程的方式設置背景顏色

     你不可能一直通過Storyboard的方式來改變你的App的樣子。讓我們把背景色改為紫色來測試一下。在ViewController.swift中的ViewDidLoad方法中試著添加這行代碼：

view.backgroundColor = UIColor.purpleColor()

     這行代碼是通過purpleColor( )這個方法返回設置的顏色類修改View的背景色屬性。

     現(xiàn)在運行App檢查它看起來像什么。

雖然這些概念的驗證看起來確實沒有那么好。然而對你來說是幸運的，你也可以設置View的背景圖片。讓我們再做一遍這個程序，用下面這行代碼替換你原先設置背景色為紫色的那里：

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

這行代碼可以讓圖片填滿整個屏幕。運行程序，看看會發(fā)生什么。

當你做到這的時候 ，繼續(xù)前進并以編程的方式設置兩個Labels的背景色。去做這些，下面是兩代碼。

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

運行程序看看現(xiàn)在會發(fā)生什么。

Label的位置和大小

     在這有兩件事可以用來改善。一件事是Label的位置和大小沒有設置。scoreLabel是很明顯的太高了并且它的尺寸和形狀和它的圖片不一樣。

     修復它，選中上面的Label，用用Pin按鈕來添加約束，設置它的寬為133，高為46。

     選中下面的Label，在項目管理器中找到它的當前的高度并點擊刪除它。

然后用Pin按鈕來添加約束設置它的寬為146高102：

最后，清理你選中的，點擊第三個按鈕，并且選擇All Views in View Controller\Update Frames

來申請約束。

     由于最后的修改，你現(xiàn)在用的Label的背景色與它的文本顏色基本相同。解決這個問題，將文本顏色改為淺藍色剩下的interface都是好的。用為些值做為最好的結果。確保你對timeLabel和scoreLabel都做了這些。

     也要設置中心對齊。

     運行App，新的彩色文本是更容易閱讀的。

添加聲音

     音樂和聲音效果是增添你App的個性很好的方式。這是這個App的所要做的最后一件事。

     但是首先，你需要一些聲音。zip文件，并將這有三個文件放到你的工程里。

     有三個聲音文件：背景音樂；每次點擊按鈕時都會有播放嘟嘟聲；每次倒計時時鐘通過1S的嘟嘟聲；讓播放出來的聲音甜蜜一點！

     聲音播放裝置將被控制器的代碼控制，所以打開ViewController.swift.在接近頭文件的地方，你將會發(fā)現(xiàn)這一行代碼。

import UIKit

     你也需要用到AVFoundation framework的import 聲明，它是負責播放聲音和錄像的蘋果框架。緊跟在先前的import 聲明后面立刻添加上聲明。

import AVFoundation

     就像引入UIKit 讓你用 UIButton和UILabel一樣，引入AVFoundation讓你用非常有用的AVAudioPlayer類。接下來，你需要為這有這三個聲音每 個都實例化變量（- -）。在class內的每個正式聲明的實例變量后面，為每個的實例變量添加一行代碼。

var buttonBeep : AVAudioPlayer?
var secondBeep : AVAudioPlayer?
var backgroundMusic : AVAudioPlayer?
 //由于AVFoundation可能沒有用到，實例變量被聲明為可選值。    
 // 接下來，你需要在ViewDidLoad方法上面添加這個方法。
func setupAudioPlayerWithFile(file:NSString, type:NSString) -> AVAudioPlayer? 
{
    
    let path = NSBundle.mainBundle().pathForResource(file as String, ofType: type as String)
    let url = NSURL.fileURLWithPath(path!)
 
    
    var audioPlayer:AVAudioPlayer?
 
    do {
      try audioPlayer = AVAudioPlayer(contentsOfURL: url)
    } catch {
      print("Player not available")
    }
 
    return audioPlayer
  }

     這個方法將會返回一個AVFoundation類，并帶有兩個參數(shù)：文件名 和 類型。讓我們通過下面的部分看看它做了什么。

     1.你需要知道文件的完整路徑，NSBundle.mainBundle( )將會告訴你到項目的哪里去尋找，AVAudioPlayer需要以URL的形式知道文件的路徑。所以完整（全）路徑被轉換為URL的格式。

     2.你將會發(fā)現(xiàn)audioPlayer是一個可選值。可能狀況是AVAudioPlayer沒有創(chuàng)建，在設備上是嘗試著實例化它。

     3.這是你創(chuàng)建 AVAudioPlayer的地方。由于你創(chuàng)建的類可能會拋出一個錯誤，在你開始用block的doq鍵值的時候。下一步，你嘗試著創(chuàng)建player。如 果這個player不能被創(chuàng)建，你會得到錯誤。在這個案例中，一個錯誤僅僅是提出來而不是真正的應用，你可能在block中處理這個放置的錯誤。在 Swift2.0中這個錯誤的處理代碼是新的。

     4.如果一切順利，AVAudioPlayer類將會被返回！

     現(xiàn)在你需要處理設置AVAudioPlayer類的方法，是時候用到它了！在ViewDidLoad( )中添加這些代碼，在之前setupGame( )方法上面：

     這里你創(chuàng)建的第一個player，如果這些player是能被創(chuàng)建的，這個類將會分配實例變量。

     這一點在ViewDidLoad中，在你的代碼里你將會有三個已經(jīng)準備好的聲音可以被調用。

     第一個聲音是按鈕的嘟嘟聲，當你按下按鈕時將會播放。通過添加下面的代碼更新按鈕的方法來播放聲音。

buttonBeep?.play()

     在變量名后面添加問題標志，你會嘗試著調用一個可選類型的方法。如果有一個類在這個方法里被調用。否則代碼將會被忽略。

     添加另外兩個聲音。當計時器每走1s時倒計時的聲音就會被播放。通過添加這行代碼調用聲音的方法。在if判斷前。

secondBeep?.play()

     你馬上就要完成了！

     最后 一步是添加背景音樂。每次新游戲開始時播放音樂，在setupGame()方法中添加代碼。添加這些代碼在方法體內的下面：

backgroundMusic?.volume = 0.3

backgroundMusic?.play()

     你可以調整背景音樂的值讓它可以一直聽到。改變背景音樂的volume參數(shù)是做到這一點的好的方法。它可以被設置為從0（關）到1.0(滿)，而0.3是一個好的開始點。

     現(xiàn)在最后一次運行你的充滿光榮經(jīng)歷的和個人特色的app吧！