原文鏈接：

成都創(chuàng)新互聯(lián)始終致力于在企業(yè)網(wǎng)站建設(shè)領(lǐng)域發(fā)展。秉承“創(chuàng)新、求實(shí)、誠(chéng)信、拼搏”的企業(yè)精神，致力為企業(yè)提供全面的網(wǎng)絡(luò)宣傳與技術(shù)應(yīng)用整體策劃方案，為企業(yè)提供包括“網(wǎng)站建設(shè)、成都響應(yīng)式網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、微信網(wǎng)站建設(shè)、小程序設(shè)計(jì)、商城建設(shè)、平臺(tái)網(wǎng)站建設(shè)秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

作者:Brian Moakley

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

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

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

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

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

     在第三部分中，你創(chuàng)建了第一個(gè)簡(jiǎn)單的命令行應(yīng)用來(lái)記錄人們的名字和年齡。

     在第四部分中，你創(chuàng)建了你的第一個(gè)簡(jiǎn)單的Iphone應(yīng)用。

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

     本系列這部分將教你在不同的項(xiàng)目中怎樣用背影圖在你的屏幕上來(lái)增加一點(diǎn)趣味性，你出將會(huì)學(xué)到怎樣執(zhí)行后臺(tái)音樂(lè)和聲音效果。讓我們開(kāi)始吧！

     開(kāi)始

     你將要從你上次留下的程序開(kāi)始，如果你沒(méi)有準(zhǔn)備好，從這里下載。

     在你開(kāi)始之前，我推薦你從之前的工程中復(fù)制。這樣，在你修改視圖的時(shí)候你已經(jīng)有了你原來(lái)的app版本。這樣做是好的，因?yàn)槟悴坏鼙容^兩個(gè)版本而且當(dāng)你在修改時(shí)如果弄亂了一些地方，也允許你恢復(fù)原始的可運(yùn)行的版本。

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

     確保Copy items if needed 被選中，這樣項(xiàng)目在另外一臺(tái)電腦上或者你從你的電腦上移動(dòng)或刪除源文件也可以運(yùn)行。

設(shè)置一個(gè)按鈕的背景圖

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

然后找到Backgroud這一項(xiàng)，設(shè)置圖片名字button_tap_deselected.png。

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

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

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

     你的下一步是為這個(gè)按鈕設(shè)置在高亮?xí)r的背景圖。這是在用戶點(diǎn)擊按鈕后的狀態(tài)。它有一個(gè)設(shè)置button_tap_selected.png的背景底子。

你可能已經(jīng)發(fā)現(xiàn)你的按鈕的這一點(diǎn)上看起來(lái)有點(diǎn)被壓扁了。這是因?yàn)槟阆拗频墓潭▽捀弑葓D片本身要小。

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

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

     讓我們來(lái)做出來(lái)。在文件導(dǎo)航中，打到按鈕的寬高限制，點(diǎn)擊刪除它們。

然后，通過(guò)點(diǎn)擊右下角的三角形圖標(biāo)并選中All Views\Update Frames來(lái)更新在你的控制器視圖中的所有Frame來(lái)匹配它們的限制。

Build并運(yùn)行，享受你的大按鈕！

添加屏幕的圖片

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

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

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

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

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

     對(duì)于下面的圖片視圖做相同的操作。嘗試著按照之前的指導(dǎo)設(shè)置約束，如果你出錯(cuò)，檢查出錯(cuò)的原因（按照上面的指導(dǎo)做）。

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

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

以編程的方式設(shè)置背景顏色

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

view.backgroundColor = UIColor.purpleColor()

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

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

雖然這些概念的驗(yàn)證看起來(lái)確實(shí)沒(méi)有那么好。然而對(duì)你來(lái)說(shuō)是幸運(yùn)的，你也可以設(shè)置View的背景圖片。讓我們?cè)僮鲆槐檫@個(gè)程序，用下面這行代碼替換你原先設(shè)置背景色為紫色的那里：

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

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

當(dāng)你做到這的時(shí)候 ，繼續(xù)前進(jìn)并以編程的方式設(shè)置兩個(gè)Labels的背景色。去做這些，下面是兩代碼。

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

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

Label的位置和大小

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

     修復(fù)它，選中上面的Label，用用Pin按鈕來(lái)添加約束，設(shè)置它的寬為133，高為46。

     選中下面的Label，在項(xiàng)目管理器中找到它的當(dāng)前的高度并點(diǎn)擊刪除它。

然后用Pin按鈕來(lái)添加約束設(shè)置它的寬為146高102：

最后，清理你選中的，點(diǎn)擊第三個(gè)按鈕，并且選擇All Views in View Controller\Update Frames

來(lái)申請(qǐng)約束。

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

     也要設(shè)置中心對(duì)齊。

     運(yùn)行App，新的彩色文本是更容易閱讀的。

添加聲音

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

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

     有三個(gè)聲音文件：背景音樂(lè)；每次點(diǎn)擊按鈕時(shí)都會(huì)有播放嘟嘟聲；每次倒計(jì)時(shí)時(shí)鐘通過(guò)1S的嘟嘟聲；讓播放出來(lái)的聲音甜蜜一點(diǎn)！

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

import UIKit

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

import AVFoundation

     就像引入U(xiǎn)IKit 讓你用 UIButton和UILabel一樣，引入AVFoundation讓你用非常有用的AVAudioPlayer類。接下來(lái)，你需要為這有這三個(gè)聲音每 個(gè)都實(shí)例化變量（- -）。在class內(nèi)的每個(gè)正式聲明的實(shí)例變量后面，為每個(gè)的實(shí)例變量添加一行代碼。

var buttonBeep : AVAudioPlayer?
var secondBeep : AVAudioPlayer?
var backgroundMusic : AVAudioPlayer?
 //由于AVFoundation可能沒(méi)有用到，實(shí)例變量被聲明為可選值。    
 // 接下來(lái)，你需要在ViewDidLoad方法上面添加這個(gè)方法。
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
  }

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

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

     2.你將會(huì)發(fā)現(xiàn)audioPlayer是一個(gè)可選值?？赡軤顩r是AVAudioPlayer沒(méi)有創(chuàng)建，在設(shè)備上是嘗試著實(shí)例化它。

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

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

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

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

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

     這一點(diǎn)在ViewDidLoad中，在你的代碼里你將會(huì)有三個(gè)已經(jīng)準(zhǔn)備好的聲音可以被調(diào)用。

     第一個(gè)聲音是按鈕的嘟嘟聲，當(dāng)你按下按鈕時(shí)將會(huì)播放。通過(guò)添加下面的代碼更新按鈕的方法來(lái)播放聲音。

buttonBeep?.play()

     在變量名后面添加問(wèn)題標(biāo)志，你會(huì)嘗試著調(diào)用一個(gè)可選類型的方法。如果有一個(gè)類在這個(gè)方法里被調(diào)用。否則代碼將會(huì)被忽略。

     添加另外兩個(gè)聲音。當(dāng)計(jì)時(shí)器每走1s時(shí)倒計(jì)時(shí)的聲音就會(huì)被播放。通過(guò)添加這行代碼調(diào)用聲音的方法。在if判斷前。

secondBeep?.play()

     你馬上就要完成了！

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

    

backgroundMusic?.volume = 0.3

backgroundMusic?.play()

     你可以調(diào)整背景音樂(lè)的值讓它可以一直聽(tīng)到。改變背景音樂(lè)的volume參數(shù)是做到這一點(diǎn)的好的方法。它可以被設(shè)置為從0（關(guān)）到1.0(滿)，而0.3是一個(gè)好的開(kāi)始點(diǎn)。

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

本文名稱：學(xué)習(xí)Swift的IOS應(yīng)用的代碼教程-5：讓應(yīng)用變的美觀
本文鏈接：http://m.newbst.com/article30/gdchpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)