[譯]在Swift中編寫 watchOS 2 Hello World 程序

猛戳閱讀最終版@SwiftGG，最終版語句銜接更流暢，閱讀起來更易懂

過去的幾個月我一直保持著寫博客的習慣，但是現(xiàn)在我得專心工作了。最近在做一些 watchOS 2 相關的更新工作，而且我覺得如果出個系列教程會對大家很有幫助。而首要的事情就是我們需要知道如何開發(fā)第一個 watchOS 2 應用。所以現(xiàn)在就來開發(fā)一個 watchOS 2 風格的 “Hello World!“吧！

在教程開始前，我想告訴你們一些用 Swift 在 iOS、watchOS、tvOS 或者 OS X 上編程的知識，因此，如果你有想通過 Coding Explorer Blog 了解的任何話題，請通過 Twitter @CodingExplorer 或者 Contact Page 來提出你的建議。

創(chuàng)建你的 watchOS 2 應用

打開 Xcode， 創(chuàng)建一個新項目，可以通過初始界面，也可以通過菜單（File → New → Project…）。然后，定位到 watchOS 部分并選擇 Application，現(xiàn)在界面看起來是這樣的：

因為只有“iOS App with WatchKit App“這一個選項，所以選中并點擊 next。到這一步，需要給應用起個名字然后做幾個選擇來初始化項目。我們把應用命名為“HelloWatch“。簡單起見，你可以把下方的 the Notification Scene、Glance Scene 等選項關閉。雖然它們很有用，但是在這個項目我們只需要生成一個簡單的“Hello World“應用。當然，你需要確保將 Language 選項設置為 “Swift“。

這個項目是不會生成 iOS 應用的。如果你對在 iOS 上寫一個 Hello World 應用感興趣，請參閱 Hello World! Your first iOS App in Swift。選擇項目的保存位置，現(xiàn)在我們就可以開始了。選中導航面板上 “HelloWatch WatchKit App“ 分組中的 Interface.storyboard。

這個文件就是 watchOS 應用的界面文件。和 iOS “Hello World“應用類似，我們在應用中放置一個 label 和一個 button，然后點擊 button 會改變 label 的文本內(nèi)容。

所以我們從 Object Library 拖一個 label 和 button 到 storyboard 上，然后把 label 放置在 button 的上方：

這時 label 看起來會比較擁擠，所以我們通過設置 Width 為“Relative to Container“ ，并將其值設置為 1 的方式來把 label 的寬度設置為屏幕的寬度。這個值代表了和屏幕寬高的百分比，所以 1 就是 100%，0.5 就是 50％ 等等。然后我們在垂直方向上也給它設置更多的空間，把 Height 設置為“Relative to Container“ 然后將其值設置為 0.25 （即屏幕高度的25%）。最后我們把 Text 設置為“App Loaded…“，如果你喜歡還可以將其設置為居中顯示。

給 watchOS UI 添加一些 Swift 代碼

UI 已經(jīng) OK 了?，F(xiàn)在我們把它和代碼連接起來，然后讓 button 去做一些事情。最簡單的方式就是打開輔助編輯器。點擊右上方的斜 venn 圖標即可：

如果需要操作空間大一點，你可以通過最右邊的按鈕（圖標是右側包含長條的方框）關閉工具面板。

然后，從 label 開始用 Ctrl＋拖動或者右擊拖動的方式拉一條線到代碼中（根據(jù)慣例，一般是在類的頂部）。然后就會彈出對話框讓你給 label 的 outlet 命名。我們把它叫做 “displayLabel“。按照慣例我仍然建議采用駱駝命名法來給它們（也包括所有的變量）命名，以小寫字母開始，然后接下來的每個單詞的首字母都大寫（因為我們不能在變量名中加空格，所以我們以這樣的方式來表明這是一個新的單詞）。

接下來，我們對 button 做同樣的操作。從 button 開始用 Ctrl + 拖動的方式拉一條線到代碼中（可以是類范圍內(nèi)的任意位置，據(jù)我所知，除了放在 outlet 下方，沒有其它特殊的慣例）然后創(chuàng)建一個 action。一定要確保連接的方式是 “action“。如果你創(chuàng)建的是 outlet，它可以讓你改變 button 本身的狀態(tài)，比如它的文本，但這不是我們在這里想做的事情：

再次確認這是一個 “Action“。它會創(chuàng)建一個叫 “buttonTapped“的方法，我們在這個方法里面寫我們的代碼。改變 WKInterfaceLabel 文本的代碼非常簡單，如下：

@IBAction func buttonTapped() {
    displayLabel.setText("Hello World!")
}

我們的方法中間只有1行代碼。我們調用了 WKInterfaceLabel 的 “setText“方法，然后把新的文本做為參數(shù)傳遞給它。在 iOS 中，我們通過一個叫“text“的屬性就可以輕松滴改變 label 的顯示內(nèi)容。但是在目前來說，watchOS 并沒有這樣一個屬性，而且我們甚至不能通過程序把文本內(nèi)容再讀出來，預計下一版本的 watchOS 會加入這個屬性，但是現(xiàn)在我們?nèi)匀恢荒苡谩皊etText“方法去設置文本內(nèi)容。

大功告成。如果你有 Apple Watch，你可以把你的手機連接到 Mac，然后安裝這個應用到手機上，或者你也可以使用模擬器。在左上角選擇“HelloWatch WatchKit App“這個 target，然后選擇任意一個你想用的 Phone 和 Watch 模擬器（或者選擇具體的iPhone，如果你想在真機上測試的話）。然后點擊 play 按鈕就可以了。你可能需要多點擊“play“按鈕幾次（尤其當你電腦沒有 SSD 的情況下，這可以減少加載模擬器的時間），最終你會見到下面的畫面：

然后當你點擊 button 之后就會看到：

完整起見，InterfaceController.swift 文件的所有代碼如下：

import WatchKit
import Foundation




class InterfaceController: WKInterfaceController {

    
    @IBOutlet var displayLabel: WKInterfaceLabel!


    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)

        
        // Configure interface objects here.
    }

    
    @IBAction func buttonTapped() {
        displayLabel.setText("Hello World!")
    }


    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }


    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }


}

上面的大部分代碼都是模版自動生成的。

總結

文章中的代碼都是在 Xcode 7.1.1 中進行測試的。

這就是 watchOS 2 中“Hello World!“應用了。你會發(fā)現(xiàn)這篇教程非常簡單，其實這是有意為之。接下來的教程會經(jīng)常引用這篇教程，這樣就可以避免重復制作 watchOS 應用時前面的一些設置步驟。這個系列接下來的一些文章會更有趣一些，包括使用 WatchConnectivity 在 iOS 和 watchOS 2 應用之間傳遞數(shù)據(jù)，或者實現(xiàn)并發(fā)。敬請期待更多的 watchOS 和 Swift 教程！

希望這篇文章對你有用。如果你覺得有用，請不要猶豫，把它分享到你的 Twitter 或者你喜歡的社交媒體，每次分享都會很有用。當然，如果你有任何問題，請馬上通過 Contact Page 或者 Twitter @CodingExplorer 聯(lián)系我，我會看看我能幫到什么。謝謝！