學習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 被選中,這樣項目在另外一臺電腦上或者你從你的電腦上移動或刪除源文件也可以運行。

s?func=mbox:getMessageData&sid=DCUpMfShB

設置一個按鈕的背景圖

與其讓你的按鈕背景是一個凍結的顏色,在一個照片可編輯程序裏創建一個圖片看起來更好!設置按鈕的背景圖,你必須知道按鈕的狀態,確保按鈕的狀態在屬性檢查器中是Default。這就是按鈕在什麼都沒有發生的情況下的狀態。

s?func=mbox:getMessageData&sid=DCUpMfShB

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

s?func=mbox:getMessageData&sid=DCUpMfShB

在你的App上一個版本中你已經設置了按鈕的背景色爲白色。將它改變爲Default color,要不然就不會顯示出後面的背景圖。

s?func=mbox:getMessageData&sid=DCUpMfShB

s?func=mbox:getMessageData&sid=DCUpMfShB

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

s?func=mbox:getMessageData&sid=DCUpMfShBs?func=mbox:getMessageData&sid=DCUpMfShB

     很棒!現在按鈕是清晰的並且比之前的版本看起來好了很多。你現在有一個帶有顏色和更好看的文本的三維立體的按鈕,而不是一個裏面只有無聊的白色矩形和文本的按鈕。

     你的下一步是爲這個按鈕設置在高亮時的背景圖。這是在用戶點擊按鈕後的狀態。它有一個設置button_tap_selected.png的背景底子。

s?func=mbox:getMessageData&sid=DCUpMfShB

你可能已經發現你的按鈕的這一點上看起來有點被壓扁了。這是因爲你限制的固定寬高比圖片本身要小。

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

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

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



s?func=mbox:getMessageData&sid=DCUpMfShB

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

s?func=mbox:getMessageData&sid=DCUpMfShB

Build並運行,享受你的大按鈕!

s?func=mbox:getMessageData&sid=DCUpMfShB

添加屏幕的圖片

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

     你將要用這個圖片類來創建一個邊框。所以你想擺放並改變它的大小以置於它拉伸到從屏幕的左邊到右邊,並在屏幕的上方。同樣的方法,在下面放置一個圖片作爲下邊框。

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

s?func=mbox:getMessageData&sid=DCUpMfShB

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

s?func=mbox:getMessageData&sid=DCUpMfShB

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

     對於下面的圖片視圖做相同的操作。嘗試着按照之前的指導設置約束,如果你出錯,檢查出錯的原因(按照上面的指導做)。

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

s?func=mbox:getMessageData&sid=DCUpMfShB

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

s?func=mbox:getMessageData&sid=DCUpMfShB


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

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

view.backgroundColor = UIColor.purpleColor()

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

     現在運行App檢查它看起來像什麼。

s?func=mbox:getMessageData&sid=DCUpMfShB


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

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

這行代碼可以讓圖片填滿整個屏幕。運行程序,看看會發生什麼。

s?func=mbox:getMessageData&sid=DCUpMfShB


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

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


運行程序看看現在會發生什麼。

s?func=mbox:getMessageData&sid=DCUpMfShB


Label的位置和大小

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

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

s?func=mbox:getMessageData&sid=DCUpMfShB


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

s?func=mbox:getMessageData&sid=DCUpMfShB

然後用Pin按鈕來添加約束設置它的寬爲146高102:

s?func=mbox:getMessageData&sid=DCUpMfShB


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

來申請約束。

     由於最後的修改,你現在用的Label的背景色與它的文本顏色基本相同。解決這個問題,將文本顏色改爲淺藍色剩下的interface都是好的。用爲些值做爲最好的結果。確保你對timeLabel和scoreLabel都做了這些。

s?func=mbox:getMessageData&sid=DCUpMfShB

     也要設置中心對齊。

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

添加聲音

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

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

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

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

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類,並帶有兩個參數:文件名 和 類型。讓我們通過下面的部分看看它做了什麼。

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

     2.你將會發現audioPlayer是一個可選值。可能狀況是AVAudioPlayer沒有創建,在設備上是嘗試着實例化它。

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

     4.如果一切順利,AVAudioPlayer類將會被返回!

     現在你需要處理設置AVAudioPlayer類的方法,是時候用到它了!在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

}

     這裏你創建的第一個player,如果這些player是能被創建的,這個類將會分配實例變量。

     這一點在ViewDidLoad中,在你的代碼裏你將會有三個已經準備好的聲音可以被調用。

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

buttonBeep?.play()


     在變量名後面添加問題標誌,你會嘗試着調用一個可選類型的方法。如果有一個類在這個方法裏被調用。否則代碼將會被忽略。

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

secondBeep?.play()

     你馬上就要完成了!

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

    

backgroundMusic?.volume = 0.3

backgroundMusic?.play()

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

     現在最後一次運行你的充滿光榮經歷的和個人特色的app吧!

s?func=mbox:getMessageData&sid=DCUpMfShB



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章