上節分享了用純代碼方式進行UI開發。但純代碼UI開發有個缺點，就是不夠直觀，UI修改後不能馬上看到效果，需要在App編譯運行後才能看到UI效果，這明顯影響開發效率。
這節介紹一下，蘋果公司推薦的一種UI開發方式：storyboard，即故事板。使用storyboard開發的優點就是比較直觀，頁面效果以及頁面之間的跳轉關係一目瞭然。
但是storyboard也有一個問題：協作問題。比如一個多人協作項目，多人同時修改了同一個storyboard，那麼在項目合併時會有很大問題，所以實際多人協作項目中，很多公司開發依然是使用純代碼方式。一種解決這種衝突的方案是：UI模塊化。將整個App的UI頁面按照功能劃分為若干模塊，不同UI模塊對應不同的storyboard，每個人只能修改自己所負責的storyboard，如果要越界修改，必須事先溝通，這樣可以避免衝突出現。
一、創建項目
打開Xcode軟件，創建一個"Single View App"項目，項目命名為：Storyboard,不清楚怎麼創建工程的人，請參看 。
二、storyboard界面簡介
點擊項目界面左側目錄裡的Main.storyboard文件，可以看到storyboard的編輯界面，分為三個大的區域(紅色方框），分別介紹一下：
1.區域1(左側)：用目錄層次結構的方式，顯示storyboard中包含的頁面及其子視圖。從這裡，我們可以看到storyboard中包含多少個頁面，每個頁面上包含多少個子視圖，子視圖又包含多少自己的子視圖...。我們可以看到，工程創建後storyboard就已經包含了一個默認的頁面，名字叫：View Controller。這個名字是不是很眼熟，沒錯的，就是對應到ViewController.swift文件中定義的ViewController類。你肯定要問我：你怎麼確定就是ViewController.swift裡的那個 ViewController類? 按照下圖紅色方塊標示的順序點擊，你就可以看到，方框3的左側class(類)名稱就是ViewController。就是在這個地方，ViewController類被綁定到storyboard上。
上一節介紹的純代碼UI編程，就是在頁面(ViewController類)裡面通過代碼方式添加各種UI視圖。這節我們將介紹通過storyboard，在頁面裡添加UI視圖。你會發現通過storyboard來添加UI視圖，要簡單直觀的多。
2.區域2(中間)：用來展示storyboard中各個頁面呈現給用戶的實際效果，上圖顯示的就是ViewController這個頁面。
3.區域3(右側)：是屬性面板，主要用於顯示和設置頁面及其所含視圖的各種參數，比如設置按鈕的顏色、字體、尺寸、約束等參數。
三、添加Label視圖
接下來，我們在ViewController這個頁面中添加一個Label視圖，Label視圖是用來顯示一段文字的視圖。如下圖所示：
1. 首先點擊開發界面右上角紅色方框1，會打開一個選擇視圖的對話框。
2. 然後用鼠標左鍵按住紅色方框2有“Label”字眼的這個視圖，拖動到中間的空白頁面上然後鬆開鼠標左鍵，如下圖中的箭頭所示。注意：要按住鼠標左鍵拖動，中途不要鬆開，拖到目標位置後再鬆開。這時我們已經在頁面中添加了一個Label視圖。
這時你可以點擊編譯運行App後，在手機模擬器就可以看到App頁面中間多了"Label"這行字
四、修改視圖屬性
我們接著修改Label的一些屬性，點擊一下左側紅色方框1位置，選中這個Label這個視圖，然後再點擊右上角紅色方框2，打開屬性面板，在紅色方框3這個位置可以修改要顯示的文字內容，接著在紅色方框4點擊最右側的藍色上下箭頭在彈出的框中選擇紅色顏色，最後將紅色方框5的兩個數值修改為-3，這時就可以看到，文字產生了重影效果，影子是紅色。其他還有很多屬性，在此不一一做介紹了。
設置後的效果如下圖所示：
五、視圖約束
1. 添加約束
接下來我們來關心一下視圖的位置問題。其實上面的視圖在頁面上已經佔有一個位置了，我們可以通過下面方式查看：首先點擊紅色方框1，選中這個Label視圖；然後點擊紅色方框2，打開佈局參數卡片；紅色方框群3有四個參數：x、y分別是Label視圖左上角頂點相對於整個頁面的x座標和y座標（整個頁面的座標是以整個頁面左上角為座標原點，向右為x軸的正方向，向下為y軸的正方向），width和height分別對應Label視圖的寬度和高度。
但是，上述這些Label視圖的尺寸都是固定值。這種固定位置明顯不能滿足不同尺寸手機屏幕的要求。假設我們目的是讓Label視圖顯示在屏幕正中間，我們通過調整上面x、y、width、height參數，讓Label視圖在4英寸屏幕上顯示在屏幕中間。但是，當我們把App再安裝到手機屏幕尺寸5英寸上看，Label視圖就會跑到手機屏幕偏左上角的位置，這是我們不想看到的。因此，iOS提供了一套佈局方法：約束。
下面我們通過約束讓我們的Label視圖達到如下的期望位置：Label視圖在頁面中水平居中，並且距離頁面的上邊的距離固定為50。為了達到這個目的，我們需要用到兩類約束：
1.第一類就是上面那樣，設置目標視圖到某個參照物的距離以及視圖本身的尺寸。
2.第二類是對齊約束，比如視圖的左邊與某個參照物的左邊對齊，或者視圖的中心點與參照物的中心點對齊等。
先設置水平居中，要用到第二類約束，如下圖所示，點擊紅色方框1選中這個Label視圖，再點擊紅色方框2彈出對齊約束頁面，在紅色方框3處打勾，這個選項就是設置水平居中的，最後點擊紅色方框4確認添加這個約束。
設置後的效果如下圖，可以看到已經水平居中了。
接著，我們再設置到頁面上邊的距離為50，用到第一類約束。如下圖所示點擊紅色方框1的圖標，彈出添加約束對話框，然後在紅色方框2處的輸入框裡輸入50，輸入後我們可以看到輸入框底下的那個象"工"字的紅色線變成實線，其他相鄰的幾個沒有設置的依然還是虛線，這表示已經設置了這個約束，最後還要點擊一下紅色方框3，確認設置這個約束。至於其他的選項用猜應該也能猜個大概，在這裡就不做介紹了。
設置後的效果如下圖所示：
這樣設置後，不論屏幕是大是小，這個視圖（標題）就始終處於屏幕的水平中央，並且距離上邊距為50。就不會出現位置跑偏這種尷尬的事情。
2. 清除約束
如果不小心設置了不想要的約束，要怎麼清除掉呢？如下圖所示，先點擊紅色方框1，彈出對話框。如果點擊紅色方框2，代表要清除掉當前選中視圖的所有約束。如果點擊紅色方框3，代表要清除當前頁面上所有視圖的所有約束，所以紅色方框3點擊操作要慎重。
3.修改約束
如下圖所示，點擊右上角紅色方框1那個類似尺子的圖標，打開Label視圖尺寸設置面板，這個面板很長，有一部分可能會被遮住看不見，滾動條往下拉就可以了。可以看到紅色方框2就是我們上面剛設置的兩個約束。我們要將第二個約束的值改為距離上邊10，雙擊（注意是雙擊）下面那個紅色方框。
如下圖所示，這時尺寸面板切換到了約束編輯界面，紅色方框中的值就是我們要修改的，可以看到當前值為50，就是我們添加約束時設置的值，將其改為10，然後鍵盤迴車。下圖左側頁面可以看到Label視圖距離頁面上邊距變小了。
注意：在添加約束、清除約束、修改約束之前，都要確認一下當前選中的是哪個視圖，否則很容易改錯視圖，造成不必要的麻煩。
本系列會持續更新，有興趣的同學，請關注我。
閱讀更多 移動大電猿 的文章
