WatchKit入門：建立一個簡單的猜數遊戲

2015-03-20 10:33  編輯： suiling  分類：iOS開發  來源：appcoda  1  2950

Apple WatchWatchKit

招聘資訊：

• 急招移動開發工程師（iOS,Android）
• IOS軟體工程師快到碗裡來

原作者：julian engel  譯者：@TurtleFromMars

原文：WatchKit Introduction: Building a Simple Guess Game

編者注：如你所知，Apple已在Xcode 6.2 beta上附帶了WatchKit SDK，讓開發者為Apple Watch建立應用。您或許已經開始嘗試用WatchKit開發App，如果還沒起手，本篇入門教程就是為您準備的。這周Julo開發組的Julian會為您介紹WatchKit，展示如何利用它建立一個簡單的猜數遊戲，您将會了解如何建立Watch app，布局界面并測試應用。

我們這就開始教程吧。

Apple在2014年11月18日釋出的Xcode 6.2 beta中首次内置了WatchKit，該SDK可以讓開發者為Apple Watch建立應用。要想為Apple Watch開發應用，首先你需要一個蘋果開發者付費賬号，下載下傳Xcode 6.2 beta。本教程的示例App使用Swift語言編寫，對Swift語言程式設計基礎有一定要求。

正片開始

了解WatchKit App

現在Apple尚不允許開發者建立原生Watch app，目前你可以建構的三種Apple Watch 使用者體驗分别是WatchKit app，Glance和可操作式通知（actionable notification）。本教程集中講解WatchKit app，暫不涉及Glance和通知。

首先，Watch app不是獨立的應用，也就是說在使用者iPhone上運作的配對App必不可少，我們要建構的Watch app隻是iPhone app的擴充，Watch app的安裝和管理由iPhone app負責。另外，iPhone app與Watch app可以互相溝通，不過本教程不涵蓋這部分内容。

Apple Watch有38mm和42mm兩種螢幕尺寸，但不必分别設計使用者界面，Xcode會自動調整布局，适應螢幕尺寸。不過這裡用的不是Auto Layout，而是WatchKit獨有的布局系統。

示例App

今天我們要為Apple Watch建立一個簡單的猜數遊戲，遊戲規則如下：Watch app會先确定一個0到5之間的自然數，讓玩家進行猜測，然後檢測玩家是否猜中，顯示相應資訊。App界面如下：

建立WatchKit示例應用

我想你已經裝好了Xcode 6.2 beta 4（或更新版本），請用Single View Application模闆建立一個項目，命名為WatchKitDemo（随意命名即可），選擇語言為Swift，其他設定原封不動，項目儲存在你喜歡的地方。

之前講過，Watch app是iPhone app的擴充，要想建立Watch app，請在Xcode菜單上選擇Editor > Add Target，然後選擇Apple Watch > WatchKit App，建構Watch app必需的一切都可以用WatchKit App模闆自動生成。

取消選擇Include Notification Scene，其他選項不變，點選Finish，然後會彈出提示詢問是否激活新方案（scheme）。

點選Activate，即在Xcode項目中添加新方案，該方案可在Apple Watch模拟器中測試App。在項目導航欄中可以看到兩個新加的檔案夾：WatchKit Extension還有WatchKit App。

WatchKit app僅包含Storyboard和使用者界面相關資源，而負責應用邏輯、更新界面的代碼位于WatchKit extension。簡而言之，Watch app提供展現資訊的視圖、與使用者互動，而挑重擔的是iPhone app。

設計使用者界面

現在我們開始設計Watch app的使用者界面。選擇WatchKitDemo WatchKit App下的Interface.Storyboard檔案，與iOS app類似，Xcode提供Storyboard來為Watch app設計使用者界面。

首先向界面控制器（Interface Controller）中拖入一個文本标簽（Label），你會發現它自動定位到視圖控制器的頂部，這是因為Apple Watch螢幕尺寸很小，界面控制器被分為上（TOP）、中（CENTER）、下（BOTTOM）三大區域。現在選中文本标簽，在屬性檢查器的Position欄下可以設定橫縱位置，把Horizontal和Vertical都設為Center。

然後把文本改為“Your guess is: 3”，如圖：

接下來我們要讓使用者修改猜想的數字，向界面中拖入一個滑動條（Slider），然後如圖修改滑動條屬性：

由于猜數在0到5之間，設步長（steps）為5，這樣滑動條就被分成了5格，每格代表一個數字。我們想讓3作為預設數字，設值（value）為0.6，最小值（minimum）為0，最大值（maximum）為1。

設定完畢後，從對象庫拖入一個按鈕（Button），設标題為Guess，将垂直位置設為Center。

要建構完整的界面，我們還需要一個文本标簽，用來顯示使用者猜測結果是否正确。向視圖中拖入一個Label，設文本為“Press Guess to play”，然後修改垂直位置為Bottom，設字型的Min Scale（最小比例）為0.5，讓文本适應較窄的空間。最終設計如下：

代碼時間

好，搭完界面，開始寫代碼吧。前面說過，程式邏輯在WatchKit Extension中。InterfaceController.swift已經關聯剛剛設計完的Interface Controller。

打開源碼檔案，為文本标簽和滑動條分别建立outlet，然後在InterfaceController類中添加以下代碼：

1 2 3

@IBOutlet  var guessSlider: WKInterfaceSlider!          // the slider @IBOutlet  var guessLabel: WKInterfaceLabel!      // the label displaying the guess number @IBOutlet  var resultLabel: WKInterfaceLabel!     // Wrong/Correct Label

然後是這行代碼，建立猜測數字的變量：

1	var guessNumber = 3

項目基礎設施建立完成，現在把界面元素連接配接到相應的outlet。切回Interface.storyboard，開啟輔助編輯器，顯示剛剛在寫的代碼檔案，然後分别連接配接outlet和相應控件。

現在按住control從滑動條拖到代碼上，這次不是IBOutlet，選IBAction，命名為updateGuess。

會自動添加如下函數：

1	@IBAction func updateGuess(value: Float) { }

該方法将用于擷取使用者猜測的數字并更新文字提示，在其中插入這兩行代碼：

1 2	guessNumber = Int(value * 5) guessLabel.setText( "Your guess: \(guessNumber)" )

由于之前滑動條取值範圍被設為0到1，取值乘5所得才是我們實際需要的數字，随後更新文本标簽。

按住control從按鈕拖到代碼，再建立一個action方法，命名為startGuess，該方法生成一個随機數并與猜測數進行比較，并更新提示内容，代碼如下：

1 2 3 4 5 6 7 8 9

@IBAction func startGuess() { var randomNumber = Int(arc4random_uniform(6)) if (guessNumber == randomNumber) { resultLabel.setText( "Correct. You win!" ) }  else { resultLabel.setText( "Wrong. The number is \(randomNumber)" ) } }

代碼中首先使用arc4random_uniform(6)函數生成一個0到5的随機數，然後進行比較，顯示結果。

搞定。可以測試App了。

運作Watch App

要想運作App，請選擇“WatchKitDemo WatchKit App”方案，然後指定運作裝置，點選運作按鈕測試應用。在模拟器中還可以由Hardware > External Displays > Apple Watch - 38mm切換螢幕尺寸。

不錯吧？WatchKit初上手感覺如何？此處可以下載下傳項目檔案，以供參考。（譯注：下載下傳連結源為Dropbox，中國大陸需要翻牆。）