AppleWatch開發入門二——界面佈局

AppleWatch開發入門二——界面佈局

1、簡介

        在iphone開發中，最基本的佈局方式是經過frame，將控件的位置和大小固定在屏幕上，後來，因爲手機屏幕的尺寸有了略微變化，有了autoresizing的佈局框架，咱們能夠設置子視圖隨父視圖的改變作一些相應的變化，再後來，iphone的尺寸與分辨率也愈來愈多，適配各個屏幕也成爲了iOS開發者遇到的新的問題，幸運的是，autolayout機制的出現，大大減少了開發者在適配方面的成本。以上提到的兩種佈局方式，在之前博客中有討論：

使用autoresizing進行動態佈局：http://my.oschina.net/u/2340880/blog/423357

使用autolayout進行動態佈局：http://my.oschina.net/u/2340880/blog/423500

        在watch的佈局方式中，咱們須要拋棄iphone裏的思路，從新接受一套新的佈局框架。

        首先，watch的屏幕不大，目前只有38mm和42mm兩個尺寸，咱們不可能在這個有限的空間裏作很是複雜的界面效果，所以，在界面開發中，應該遵循便於使用和一目瞭然的原則。watch上的佈局方式採用的是一種平面堆放的方式，再也不有frame，也再也不有約束，控件的佈局方式只是一個挨着一個的平面堆放，也不可重疊。但在watch中，提供了group這樣一種佈局方式，可讓咱們在佈局中體現自由與個性的方面。         

2、最基礎的堆放佈局

        咱們在不使用group的時候，watch的佈局採用的是最基礎的堆放方式，從上到下依次排開，例如，咱們添加四個label，效果以下：

經過改變label的添加順序，能夠改變其上下位置：

這種方式的佈局高度並無限制，咱們能夠一直往下排列，在watch上，會出現滑動的效果：

    

3、使用Group進行復雜的界面佈局

        經過上面的佈局方式，咱們只能進行縱向的排列布局，這並不能達到咱們的需求，WatchKit中提供那一套佈局的模型：Group。

        能夠這樣理解，group就是將屏幕分紅了幾各分區，咱們能夠設置各個分區的排列方式，例如水平或者垂直，經過這樣的思路，完成複雜的watch界面佈局，例以下面的效果：

這樣效果的一個界面，就是將在屏幕中添加了三個Group，最上面的Gorup設置爲水平排列模式，在其中添加了兩個按鈕和一個分割線，中間一個Group是垂直排列模式，放入了一個選擇器和一個按鈕，最下面一個Group也是水平排列模式，放入了一個按鈕和一個時間欄。

擴展：所謂Group

        Group在界面佈局上，不只能夠起到分區屏幕的做用，其還能夠設置一些屬性來使佈局更加漂亮。在storyBoard右側的設置菜單中，咱們能夠對這些屬性進行操做：

Layout：設置佈局模式，分爲水平佈局和垂直佈局兩種

insert：能夠設置內容區域偏移量，經過這個屬性，咱們可使其中填充的控件四周留白

Spacing：其中填充的控件的間距

BackGround：設置Group的背景圖案

Mode：設置背景圖案的填充方式

Animate：出現時帶動畫

color：設置Group的背景顏色

Radius：設置Group的圓角度

4、佈局中控件的位置和尺寸設置

        在iphone中，咱們使用frame或者約束來控制控件的位置和尺寸，在watch中則簡單不少，尺寸和位置都是固定的模式，咱們只須要作一些設置便可。

一、控件尺寸的控制

        對於控件的尺寸，有三種模式，控件的width和Height都是經過這三個模式設置的：

Relative to Container：自身的尺寸是按照容器的尺寸比例設置的。例如設置爲0.5的話，當前控件的尺寸就是容納其Group的一半。

Size To Fit Content:自身的尺寸與自身內容相關，例如，label中字數的多少決定了label的尺寸。

Fixed：手動設置一個固定的值。

二、控件位置的控制

        由於watch的界面十分簡潔，對於控件的位置設置，是經過水平和垂直兩個維度來設置的，經過設置每一個維度的屬性來控制其在容納它的Group中的位置：

Horizontal：left（左），center（中心），right（右）

Vertical：top（上），center（中心），bottom（下）

 

一點注意:

        關於圖片素材，你能夠發現，在Extension和App文件夾中各有一個Assets.xcasssets組，只有將素材放入APP文件夾下的這個組watch才能使用。

 

 

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592