導航方式

Watch App中導航樣式分為兩種：分頁樣式(Page based) 和分層樣式(Hierarchical), 這兩種樣式是互斥的，所以不能混合使用只能選擇其一。Hierarchical方式可以通過pushController或者presentController來顯示二級頁面; 而Page based方式只能通過presentController來模態出新的二級頁面。

Page based

分頁樣式導航(Page-based)是一種呈現平面資訊集合的方式, 其中所有頁面都是平級的。在分頁樣式導航中, 使用者水平滑動或者垂直滑動以在頁面之間導航, 並且白點表示它們在頁面集中的位置。由於瀏覽大量頁面可能非常耗時, 因此請限制介面中包含的頁數。

Hierarchical

分層導航非常適合分層資訊的應用程式。它還可以更輕鬆地擴充套件應用的新內容。當用戶點選層次結構中的專案時，會出現一個新螢幕，顯示有關該專案的詳細資訊。通過垂直基於頁面的導航，使用者還可以使用數字表冠或在詳細檢視上垂直滑動，在不同行的詳細檢視之間快速導航。但要儘量避免建立深度超過2-3級的層次結構。

控制元件詳解

iOS中的大部分控制元件在 WatchOS中也在有, 比如: WKInterfaceLabel、WKInterfaceImage、WKInterfaceButton、WKInterfacePicker、WKInterfaceTable

、WKInterfaceSwitch、WKInterfaceSlider、等類。還有一些 WatchOS特有的類, 比如: WKInterfaceGroup、WKInterfaceSeparator、WKInterfaceMenu、WKInterfaceDate、WKInterfaceTimer等類。下面我將對部分控制元件進行詳細的使用說明。

WKInterfaceImage

Image相關控制元件

WatchOS中很多控制元件都可以與WKInterfaceImage類結合使用:
1.WKInterfaceGroup，WKInterfaceButton和WKInterfaceController

類允許您指定影象作為其背景。
2.WKInterfaceSlider類可以顯示增量和減量控制元件的自定義影象。
3.WKInterfaceMovie類顯示視訊或音訊內容的海報影象。
4.WKInterfacePicker類顯示可包含影象的專案。

Image效能

關於圖片的使用有一個坑需要注意, 當我們為WKInterfaceImage類新增圖片時, 可能會遇到圖片不顯示的問題。這是因為所使用的方法和圖片資源庫是有一定的關係的。
1.當使用setImageNamed:或setBackgroundImageNamed:方法新增圖片時, 應該使用 Watch App包內Assets.xcassets中的已有的圖片資源。
2.當使用setImage:、setImageData:、setBackgroundImage:或setBackgroundImageData:方法新增圖片時, 應該使用 WatchKit Extension包內Assets.xcassets中的圖片資源。

使用第2條的方式時, 會先在 WatchKit Extension中建立 Image, 然後在傳輸到 WatchKit App中進行顯示。而在第1條中按名稱指定影象更有效，因為只需要將名稱字串傳輸到您的Watch App中, 然後會在 Watch App包中搜索指定名稱的影象檔案, 並進行顯示。所以指定影象的最有效方法是將它們儲存在 Watch App包中，並使用setImageNamed:或setBackgroundImageNamed:適當地配置相應的物件。

WKInterfaceGroup

WKInterfaceGroup在 WatchOS中的一個很特別的類, 它是一個容器性質的控制元件, 能為其他控制元件提供額外的佈局。Group可以指定其所包含控制元件的排列方向, 橫向或者縱向, 也可以設定間距和內嵌。它還能為自己新增背景圖片, 作為一個種控制元件疊加的效果這是一個不錯的選擇, 因為在 WatchOS中是不允許控制元件相互重疊的, 除了像Group這樣容器類的控制元件。

Group中還有一些屬性如下:

WKAlertControllerStyle

自 WatchOS 2.0開始, 就已經支援系統 Alert了, WKAlertControllerStyle列舉型別包含以下三種:

public enum WKAlertControllerStyle : Int {
    case alert
    case sideBySideButtonsAlert
    case actionSheet
}

它們對應的樣式是這樣的:

程式碼描述

在當前頁面建立三個按鈕, 點選事件別分展示不同型別的 Alert。

具體程式碼如下:

@IBAction func presentAlertStyleAction() {

    let confirmAction = WKAlertAction(title: "Ok", style: .default) {
        print("Ok")
    }
    let denyAction = WKAlertAction(title: "Deny", style: .destructive) {
        print("Deny")
    }
    let cancelAction = WKAlertAction(title: "Cancel", style: .cancel) {
        print("Cancel")
    }
    presentAlert(withTitle: "Tip", message: "Do you want to see it.", preferredStyle: .alert, actions: [confirmAction, denyAction, cancelAction])
}


@IBAction func presentSideBySideStyleAction() {

    let confirmAction = WKAlertAction(title: "Ok", style: .default) {
        print("Ok")
    }
    let denyAction = WKAlertAction(title: "Deny", style: .destructive) {
        print("Deny")
    }
    presentAlert(withTitle: "Tip", message: "Do you want to see it.", preferredStyle: .sideBySideButtonsAlert, actions: [confirmAction, denyAction])
}


@IBAction func presentSheetStyleAction() {

    let confirmAction = WKAlertAction(title: "Ok", style: .default) {
        print("Ok")
    }
    let denyAction = WKAlertAction(title: "Deny", style: .destructive) {
        print("Deny")
    }
    let cancelAction = WKAlertAction(title: "Custom Cancel", style: .cancel) {
        print("Cancel")
    }
    presentAlert(withTitle: "Tip", message: "Do you want to see it.", preferredStyle: .actionSheet, actions: [confirmAction, denyAction, cancelAction])
}

執行效果

WKInterfacePicker

WKInterfacePicker的Style屬性有三種, 分別是List、Stack、Sequence。Focus Style屬性也有三種分別是None、Outline、Outline with Caption。

在 Storyboard中我們先新增3個Picker, 然後要對它們進行設定不同的Style屬性和Focus Style屬性。目的是為了, 對比它們之前的區別。

程式碼描述

3個Picker關聯到程式碼檔案, 懶載入配置資料:

@IBOutlet var listPicker: WKInterfacePicker!
@IBOutlet var stackPicker: WKInterfacePicker!
@IBOutlet var sequencePicker: WKInterfacePicker!

lazy var itemArray: [WKPickerItem] = {
    var its = [WKPickerItem]()
    let titles = ["①", "②", "③", "④", "⑤"]
    let captions = ["① is one", "② is two", "③ is three", "④ is four", "⑤ is five"]

    for i in 0...4 {
        let item = WKPickerItem()
        item.title = titles[i]
        item.caption = captions[i]
        let string = "item_type_\(i + 1)"
        item.accessoryImage = WKImage(imageName: string)
        item.contentImage = WKImage(imageName: string)
        its.append(item)
    }
    return its
}() 

初始化的時候, 對3個Picker進行配置:

override func awake(withContext context: Any?) {
    super.awake(withContext: context)

    listPicker.setItems(itemArray)
    stackPicker.setItems(itemArray)
    sequencePicker.setItems(itemArray)

    listPicker.focus()
}

為Picker新增的Action:

@IBAction func listPickerSelect(_ value: Int) {
    print(itemArray[value].title!)
}

@IBAction func stackPickerSelect(_ value: Int) {
    print(itemArray[value].title!)
}

@IBAction func sequencePickerSelect(_ value: Int) {
    print(itemArray[value].title!)
}

重寫在WKInterfaceController類中有關於Picker的方法, 當Picker獲得焦點、失去焦點、選擇保持穩定時會觸發的方法:

override func pickerDidFocus(_ picker: WKInterfacePicker) {
    if picker == listPicker {
        print("ListPicker Did Focus")
    } else if picker == stackPicker {
        print("StackPicker Did Focus")
    } else {
        print("SequencePicker Did Focus")
    }
}

override func pickerDidResignFocus(_ picker: WKInterfacePicker) {
    if picker == listPicker {
        print("ListPicker Did Resign Focus")
    } else if picker == stackPicker {
        print("StackPicker Did Resign Focus")
    } else {
        print("SequencePicker Did Resign Focus")
    }
}

override func pickerDidSettle(_ picker: WKInterfacePicker) {
    if picker == listPicker {
        print("ListPicker Did Settle")
    } else if picker == stackPicker {
        print("StackPicker Did Settle")
    } else {
        print("SequencePicker settle")
    }
}

執行效果

List and None:

Stack and Outline:

Sequence and Outline with Caption:

WKInterfaceTable

WKInterfaceTable和 UITableView的區別

在 iOS中的 UITableView使用範圍是很廣的, 它可以實現列表性質的複雜功能。那麼在 WatchOS中對應的類是WKInterfaceTable, 但功能上來說相對簡單了許多。

1.Table只有行的概念, 沒有分割槽, 沒有頭尾檢視的概念。
2.Table通過Gruop進行自適應佈局, 所以沒有行高等設定。
3.Table沒有代理, 所有行的資料都是採用靜態配置的方式。
4.Table的點選事件也是依靠重寫WKInterfaceController的方法來實現的。
5.Table中是通過自定義的TableRowController來進行控制 TableRow上顯示的內容的。TableRowController是一個繼承於NSObject的類, 其實從根本上與 iOS中的UITableViewCell類似。

如何使用Table

1.在Storyboard中, 為頁面新增一個Table。
2.新建一個TableRowController類繼承與 NSObject的 Cocoa Touch類。
3.在Storyboard中, 為新增的Table配置一個或多個TableRowController, 並設定ID。
3.在程式碼中, 為Table指定行數和TableRowController型別。
4.為TableRowController的每一行配置顯示的資料。

程式碼描述

Storyboard中的配置:

Table的配置及點選事件處理:

    @IBOutlet var table: WKInterfaceTable!
    let dataArray = {
        return [
            ["image": "item_type_0", "title": "Menu Action And Controller Life Cycle"],
            ["image": "item_type_1", "title": "Media Player"],
            ["image": "item_type_2", "title": "Picker Styles" ],
            ["image": "item_type_3", "title": "Interactive Between iPhone And Watch"],
            ["image": "item_type_3", "title": "Interactive Between iPhone And Watch"],
          ]
    }()


    override func awake(withContext context: Any?) {
        super.awake(withContext: context)

        // Set Row Number And Row Type
        table.setNumberOfRows(dataArray.count, withRowType: "ItemRowController")

        for (i, info) in dataArray.enumerated() {
            let cell = table.rowController(at: i) as! ItemRowController
            cell.titleLabel.setText(info["title"])
            cell.image.setImageNamed(info["image"])
        }
    }

    override func table(_ table: WKInterfaceTable, didSelectRowAt rowIndex: Int) {
        print(dataArray[rowIndex]["title"]!)
    }

執行效果

WKInterfaceMenu

Apple Watch的 Retina屏是支援 Force Touch功能的, 提供了一種新的互動方式。這是一個 WatchOS獨有的類, 當頁面中配置這 Menu時, 按壓螢幕將會啟用頁面中的Menu。並且顯示出Menu下的操作, 這些操作是另一個型別, WKInterfaceMenuItem。

Menu最多可顯示四個MenuItem, 它們可以關聯各自的點選事件, 從而進行你想要的各自操作。

程式碼描述

在 Storyboard中為頁面新增WKInterfaceMenu和WKInterfaceMenuItem, 併為MenuItem設定各自的Image和title。

程式碼關聯:

    @IBAction func menuActionInvest() {
        print(#function)
    }

    @IBAction func menuActionNotification() {
        print(#function)
    }

    @IBAction func menuActionQuestion() {
        print(#function)
    }

    @IBAction func menuActionShare() {
        print(#function)
    }

執行效果

WKInterfaceController中的Present方法

在 WatchOS中WKInterfaceController就相當於 iOS中的 UIVIewController, 同樣具有類似生命週期和方法。 這裡就不再贅述了, 想了解請檢視第一篇文章:Watch App架構及生命週期。

在這裡要說的是, 在WKInterfaceController中, 有許多重要的Present方法, 這些功能我們可以直接使用, 更加方便了我們的開發。
像平時使用的presentController, 還有上面Alert中涉及到一個, 另外, 還有一些關於文字錄入的, 音視訊播放的, 音訊錄製的。

open func presentController(withName name: String, context: Any?) // modal presentation

@available(watchOS 2.0, *)
open func presentAlert(withTitle title: String?, message: String?, preferredStyle: WKAlertControllerStyle, actions: [WKAlertAction])

文字錄入

presentTextInputController(withSuggestions: ["Hello!", "When are you free?", "Yes."], allowedInputMode: .plain) { (inputText) in
    if let stringArr = inputText {
        print(stringArr)
    }
}

音視訊播放

@IBAction func mp4PlayAction() {
    playMedia(name: "music", ex: ".mp4")
}

func playMedia(name: String, ex: String) {
    // MediaPlayer
    let URL = Bundle.main.url(forResource: name, withExtension: ex)
    let option = [WKMediaPlayerControllerOptionsAutoplayKey: true]

    presentMediaPlayerController(with: URL!, options: option) { (isEnd, endTime, error) in
        if error == nil {
            print("endTime=\(endTime)");
        } else {
            print("error=\(error!)")
        }
    }
}

音訊錄製

func textVoiceInput() {
    let option2: [String: Any] = [WKAudioRecorderControllerOptionsActionTitleKey: "傳送",
WKAudioRecorderControllerOptionsAutorecordKey: true,
WKAudioRecorderControllerOptionsMaximumDurationKey: 30]

    // Use App Group URL
    let uurl = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: "group.watchAppSampler.record")
    let uuurl = uurl!.appendingPathComponent("record.wav")

    presentAudioRecorderController(withOutputURL:uuurl , preset: .narrowBandSpeech, options: option2) { (didSave, error) in
        if error == nil {
            print("didSave=\(didSave)");
        } else {
            print("error=\(error!)")
        }
    }
}

WatchOS中的其它控制元件和類

在 WatchKit框架中, 還有其它許多的控制元件和類, 這裡就不在介紹了。附一張WatchOS 4.3版本下的所有類的全家福: