本文章是一個系列，如果有興趣可以看看以下文章：
AppleWatch開發入門（1）——界面布局
AppleWatch開發入門（2）——代碼交互、控制器生命周期、界面跳轉
AppleWatch開發入門（3）——Table視圖的應用
AppleWatch開發入門（4）——Picker視圖的應用
AppleWatch開發入門（5）——Menu的使用
AppleWatch開發入門（6）——watchOS中通知的應用
AppleWatch開發入門（7）——AlertController
AppleWatch開發入門（8）——動畫
一、簡介
在 iPhone 開發中，最基本的布局方式是通過 frame 將控件的位置和大小固定在屏幕上，后來，由于手機屏幕的尺寸有了略微變化，有了 autoresizing 布局框架，可以設置子視圖隨父視圖的改變做一些相應的變化，再后來，iPhone 尺寸與分辨率也越來越多，適配各個屏幕也成為了 iOS 開發者遇到的新的問題，幸運的是，autolayout 機制的出現，大大減少在適配方面的成本。但是在 iWatch 的布局方式中，需要拋棄 iPhone 中的布局思路，接受一套不太一樣的布局框架。
首先，iWatch 的屏幕不大，目前有 38mm、40mm、42mm 和 44mm 四個尺寸，無法在這個有限的空間里做非常復雜的界面效果，因此，在開發中應便于使用、一目了然。iWatch 上的布局方式采用的是一種平面堆放的方式，沒有 frame，也沒有約束，控件的布局方式只是一個挨著一個的平面堆放，也不可重疊。但在 iWatch 中提供了 Group 這樣一種布局方式，可以讓我們在布局中體現自由與個性的方面。
二、創建項目工程
創建工程就不做詳細描述了，直接下一步就行。
三、基礎的堆放布局
打開 WatchKit APP 中的 storyboard，這就是整個 iWatch 布局的地方。在 iWatch 開發中，目前只能用 storyboard 來開發。
iWatch 的布局采用的是最基礎的堆放方式，從上到下依次排開，例如，我們添加三個 Label，效果如下：
通過拖動控件改變順序。注意，這里僅可改變其上下位置。
這種方式的布局高度并沒有限制，我們可以一直往下排列，在 iWatch上則會出現上下滑動的效果。
四、使用 Group 進行復雜的界面布局
通過上面的布局方式，我們只能進行縱向的排列布局，這并不能達到我們的需求，WatchKit 中提供那一套布局的模型：Group。
可以這樣理解，Group 默認透明，它的主要作用是提供布局，可以將屏幕分成了幾各分區，我們可以設置各個分區的排列方式，例如水平或者垂直，通過這樣的思路，完成復雜的 iWatch 界面布局。
直接拖一個 Group 到界面上，然后將需要水平布局的控件放在 Group 里面：
然后運行程序
擴展：所謂Group
Group 在界面布局上，不僅可以起到分區屏幕的作用，其還可以設置一些屬性來使布局更加漂亮。在 storyBoard 右側的設置菜單中，我們可以對這些屬性進行操作：
- Layout：設置布局模式，分為 水平布局 和 垂直布局 兩種；
- Insert：可以設置內容區域偏移量，通過這個屬性，我們可以使其中填充的控件四周留白；
- Spacing：其中填充的控件的間距；
- Background：設置 Group 的背景圖案；
- Mode：設置背景圖案的填充方式；
- Animate：出現時帶動畫；
- Color：設置 Group 的背景顏色；
- Radius：設置 Group 的圓角度。
四、布局中控件的位置和尺寸設置
對于控件的尺寸，有三種模式，控件的 Width 和 Height 都是通過這三個模式設置的：
在 iPhone 中，通過 frame 或者約束來控制控件的位置和尺寸，而在iWatch 中則簡單很多，尺寸和位置都是固定的模式，我們只需要做一些設置即可。
1. 控件尺寸的控制
Size To Fit Content：控件尺寸與內容相關，例如，Label 中字數的多少決定了 Label 的尺寸。
Relative to Container：控件尺寸按照容器尺寸的比例設置。例如設置為 0.5，則當前控件的尺寸就是容納其 Group 的一半。
Fixed：設置一個固定的值。
2. 控件位置的控制
因為 iWatch 的界面十分簡潔，對于控件的位置設置，是通過水平和垂直兩個維度來設置的，通過設置每個維度的屬性來控制其在容納它的父控件中的位置：
五、圖片設置
圖片的使用有大坑。
關于圖片素材，你可以發現，在 App 和 Extension 文件夾中各有一個 Assets.xcasssets 組，只有將素材放入這里面，iWatch才能使用。
加載圖片的方法有一下幾種，這幾種方法也有大坑。
@available(watchOS 2.0, *)
open class WKInterfaceImage : WKInterfaceObject, WKImageAnimatable {
open func setImage(_ image: UIImage?)
open func setImageData(_ imageData: Data?)
open func setImageNamed(_ imageName: String?)
open func setTintColor(_ tintColor: UIColor?)
}
圖片使用一定要特別注意：
1. Interface.storyboard 只能加載 WatchKit App 中 Assets.xcassets 的圖片。
2. func setImageNamed(_ imageName: String?) 方法只能加載 WatchKit App 中 Assets.xcassets 的圖片。
3. func setImage(_ image: UIImage?) 方法只能加載 WatchKit Extension 中 Assets.xcassets 的圖片。
4. func setImageData(_ imageData: Data?) 方法只能加載 WatchKit Extension 中 Assets.xcassets 的圖片。
