本文章是一個(gè)系列拆撼，如果有興趣可以看看以下文章：
AppleWatch開(kāi)發(fā)入門(mén)（1）——界面布局
AppleWatch開(kāi)發(fā)入門(mén)（2）——代碼交互、控制器生命周期、界面跳轉(zhuǎn)
AppleWatch開(kāi)發(fā)入門(mén)（3）——Table視圖的應(yīng)用
AppleWatch開(kāi)發(fā)入門(mén)（4）——Picker視圖的應(yīng)用
AppleWatch開(kāi)發(fā)入門(mén)（5）——Menu的使用
AppleWatch開(kāi)發(fā)入門(mén)（6）——watchOS中通知的應(yīng)用
AppleWatch開(kāi)發(fā)入門(mén)（7）——AlertController
AppleWatch開(kāi)發(fā)入門(mén)（8）——?jiǎng)赢?huà)
一、簡(jiǎn)介
在 iPhone 開(kāi)發(fā)中涎永，最基本的布局方式是通過(guò) frame 將控件的位置和大小固定在屏幕上，后來(lái)鹿响，由于手機(jī)屏幕的尺寸有了略微變化羡微，有了 autoresizing 布局框架，可以設(shè)置子視圖隨父視圖的改變做一些相應(yīng)的變化惶我，再后來(lái)拷淘，iPhone 尺寸與分辨率也越來(lái)越多，適配各個(gè)屏幕也成為了 iOS 開(kāi)發(fā)者遇到的新的問(wèn)題指孤，幸運(yùn)的是，autolayout 機(jī)制的出現(xiàn)，大大減少在適配方面的成本恃轩。但是在 iWatch 的布局方式中结洼，需要拋棄 iPhone 中的布局思路，接受一套不太一樣的布局框架叉跛。
首先松忍，iWatch 的屏幕不大，目前有 38mm筷厘、40mm鸣峭、42mm 和 44mm 四個(gè)尺寸，無(wú)法在這個(gè)有限的空間里做非常復(fù)雜的界面效果酥艳，因此摊溶，在開(kāi)發(fā)中應(yīng)便于使用、一目了然充石。iWatch 上的布局方式采用的是一種平面堆放的方式莫换，沒(méi)有 frame，也沒(méi)有約束骤铃，控件的布局方式只是一個(gè)挨著一個(gè)的平面堆放拉岁，也不可重疊。但在 iWatch 中提供了 Group 這樣一種布局方式惰爬，可以讓我們?cè)诓季种畜w現(xiàn)自由與個(gè)性的方面喊暖。
二、創(chuàng)建項(xiàng)目工程
創(chuàng)建工程就不做詳細(xì)描述了撕瞧，直接下一步就行陵叽。
三、基礎(chǔ)的堆放布局
打開(kāi) WatchKit APP 中的 storyboard风范，這就是整個(gè) iWatch 布局的地方咨跌。在 iWatch 開(kāi)發(fā)中，目前只能用 storyboard 來(lái)開(kāi)發(fā)硼婿。
iWatch 的布局采用的是最基礎(chǔ)的堆放方式锌半，從上到下依次排開(kāi)，例如寇漫，我們添加三個(gè) Label刊殉，效果如下：
通過(guò)拖動(dòng)控件改變順序。注意州胳，這里僅可改變其上下位置记焊。
這種方式的布局高度并沒(méi)有限制，我們可以一直往下排列栓撞，在 iWatch上則會(huì)出現(xiàn)上下滑動(dòng)的效果遍膜。
四碗硬、使用 Group 進(jìn)行復(fù)雜的界面布局
通過(guò)上面的布局方式，我們只能進(jìn)行縱向的排列布局瓢颅，這并不能達(dá)到我們的需求恩尾，WatchKit 中提供那一套布局的模型：Group。
可以這樣理解挽懦，Group 默認(rèn)透明翰意，它的主要作用是提供布局，可以將屏幕分成了幾各分區(qū)信柿，我們可以設(shè)置各個(gè)分區(qū)的排列方式冀偶，例如水平或者垂直，通過(guò)這樣的思路渔嚷，完成復(fù)雜的 iWatch 界面布局进鸠。
直接拖一個(gè) Group 到界面上，然后將需要水平布局的控件放在 Group 里面：
然后運(yùn)行程序
擴(kuò)展：所謂Group
Group 在界面布局上圃伶，不僅可以起到分區(qū)屏幕的作用堤如，其還可以設(shè)置一些屬性來(lái)使布局更加漂亮。在 storyBoard 右側(cè)的設(shè)置菜單中窒朋，我們可以對(duì)這些屬性進(jìn)行操作：
- Layout：設(shè)置布局模式搀罢，分為 水平布局 和 垂直布局 兩種；
- Insert：可以設(shè)置內(nèi)容區(qū)域偏移量侥猩，通過(guò)這個(gè)屬性榔至，我們可以使其中填充的控件四周留白；
- Spacing：其中填充的控件的間距欺劳；
- Background：設(shè)置 Group 的背景圖案唧取；
- Mode：設(shè)置背景圖案的填充方式；
- Animate：出現(xiàn)時(shí)帶動(dòng)畫(huà)划提；
- Color：設(shè)置 Group 的背景顏色枫弟；
- Radius：設(shè)置 Group 的圓角度。
四鹏往、布局中控件的位置和尺寸設(shè)置
對(duì)于控件的尺寸淡诗，有三種模式，控件的 Width 和 Height 都是通過(guò)這三個(gè)模式設(shè)置的：
在 iPhone 中伊履，通過(guò) frame 或者約束來(lái)控制控件的位置和尺寸韩容，而在iWatch 中則簡(jiǎn)單很多，尺寸和位置都是固定的模式唐瀑，我們只需要做一些設(shè)置即可群凶。
1. 控件尺寸的控制
Size To Fit Content：控件尺寸與內(nèi)容相關(guān)，例如哄辣，Label 中字?jǐn)?shù)的多少?zèng)Q定了 Label 的尺寸请梢。
Relative to Container：控件尺寸按照容器尺寸的比例設(shè)置赠尾。例如設(shè)置為 0.5，則當(dāng)前控件的尺寸就是容納其 Group 的一半毅弧。
Fixed：設(shè)置一個(gè)固定的值萍虽。
2. 控件位置的控制
因?yàn)?iWatch 的界面十分簡(jiǎn)潔，對(duì)于控件的位置設(shè)置形真，是通過(guò)水平和垂直兩個(gè)維度來(lái)設(shè)置的，通過(guò)設(shè)置每個(gè)維度的屬性來(lái)控制其在容納它的父控件中的位置：
五超全、圖片設(shè)置
圖片的使用有大坑咆霜。
關(guān)于圖片素材，你可以發(fā)現(xiàn)嘶朱，在 App 和 Extension 文件夾中各有一個(gè) 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 的圖片戳寸。
