本節書摘來自華章計算機《swift ios應用開發實戰》一書中的第2章，第2.3節,作者：劉銘 著， 更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
此前我們在圖2-3和圖2-5中分别看到了一個空白視圖和一個含有多個界面元素的視圖。下面我們就通過動手實踐來完成使用者界面的搭建。
打開calculator項目中的main.storyboard檔案，確定文檔大綱可見，此時ib編輯器中隻呈現一個view controller視圖控制器的view。
從xcode 4.5開始，ib針對使用者界面的布局加入了自動布局（auto layout）特性，并且該特性在xcode 5中得到了很大的改進。如果說在xcode 5中使用自動布局特性還是一種可選方式，那麼在xcode 6中，它就是唯一的使用者界面搭建方式了。關于自動布局特性我們會在後面章節詳細介紹。
2.3.1 設定界面的預覽視窗
在xcode 6之前，當我們使用ib來搭建iphone界面的時候，需要通過ios模拟器或者在iphone真機上檢視最終的效果。現在，我們可以直接通過ib的預覽視窗來實時檢視所搭建界面的效果。
步驟1 在項目導航中選擇main.storyboard檔案，在xcode工具欄的editor選擇器中選擇助手編輯器（assistant editor），此時編輯區域被分割為左右兩部分。為了增加編輯區域的可見範圍，可以關閉導航區域和實用工具區域，如圖2-7所示。
步驟2 點選編輯區域中右側視窗頂部的助手圖示，在彈出的菜單中選擇“preview→main.storyboard (preview)”，如圖2-8所示。此時右側視窗變成了iphone視圖大小，這個預覽視圖的效果就是最終呈現在iphone手機上的效果。
步驟3 為了預覽所搭建好的界面在不同螢幕尺寸的iphone上的效果，點選預覽視窗左下角的“+”圖示，切換螢幕尺寸，如圖2-9所示。這裡我們可以選擇iphone 3.5-inch或iphone 4-inch。
2.3.2 向視圖添加界面元素
要想添加界面元素到視圖之中，隻要将其從對象庫拖曳到視圖裡面相應的位置即可。
步驟1 在項目導航視窗中選擇main.storyboard檔案，此時在ib編輯器中所呈現的使用者界面非常簡單，隻有一個場景—view controller scene。
我們将會在該視圖中添加一個label對象和若幹個button對象。其中label對象用于顯示輸入的數值和計算的結果。而那些button對象則會充當電腦按鍵的角色。
步驟2 從xcode右下角的對象庫中找到label對象，然後将其拖曳到視圖之中，适當調整其大小，如圖2-10所示。
此時我們會在視圖大綱中發現，在view controller scene裡面的view對象中包含了一個label對象。
當我們将視圖對象添加到控制器的視圖中以後，在右側的預覽視窗中就會看到實際的效果，這對于程式員來說就是一種莫名的“慰藉”。
步驟3 選中新添加的label對象，使用option+command+4快捷鍵切換到屬性檢視窗。在label部分，将label的内容改為0，color設定為white color，font大小設定為24，alignment設定為右對齊。在view部分，将background設定為light gray color。
步驟4 繼續選中label對象，使用option+command+5快捷鍵切換到大小檢視窗（size inspector），檢視label的width值為288和height的值為50（你建立項目的數值不見得與這兩個值完全吻合），那麼這個label的寬度和高度的機關是什麼呢？答案是點。
在項目中的label對象，它的大小是288×50點，而實際大小則是576×100像素，1個點等于2個像素。為什麼要有點和像素呢？主要原因是retina。iphone 4以前的設定不具備retina屏，是以在其上面開發應用，1個點等于1個像素。但是，在具有retina屏的裝置上，蘋果采用2倍的比例因子，主要是為了減輕開發的複雜度。以iphone 4s為例，它的實際螢幕像素值是640×960，在為其設計使用者界面的時候以點（point）作為機關，這樣在iphone 4以前的裝置上運作calculator項目，label的大小是288×50像素。在iphone 4及以後的裝置上運作calculator項目，label的大小是576×100像素值（288×50點）。而這些大小的設定與程式員無關，蘋果會自動根據裝置類型選擇相應的比例因子。
步驟5 在label的下方添加多個uibutton控件，然後修改按鈕中的文字内容和大小，如果你願意，還可以改變每個按鈕的文字顔色，如圖2-11所示。
在添加計數器按鈕的時候，我們可以通過複制/粘貼的方式完成按鈕的建立。
2.3.3 interface builder的布局工具
interface builder提供了一些有用的工具來幫助開發者對界面布局進行調整。
參考線
當我們在視圖中拖曳某個對象的時候，就會注意到有參考線出現，如圖2-12所示。參考線可以幫助我們對界面進行更好布局。
參考線是自動出現在視圖之中的，它會進行合理地磁力停靠，這樣可以防止界面元素被放置在視圖的邊緣，避免了使用者手指無法觸控的情況。
我們還可以手動增加自定義的參考線到視圖之中，在菜單中選擇editor，點選add horizontal guide或add vertical guide即可。如果要移除參考線，直接将其拖曳出編輯區即可。
選擇句柄
除了參考線以外，大部分的界面元素都有選擇句柄用于調整對象的寬度和高度。當選中某個對象時，其周圍的8個位置會出現小矩形，拖曳它們就可以改變其大小，如圖2-13所示。
如果我們在視圖中添加了slider對象，就會發現它的高度是不能修改的。在對象庫中的部分視圖對象，其大小是不能調整的，蘋果之是以這麼做，是考慮到ios應用程式的規格要有一定的統一性。
對齊
要想在視圖中快速對齊幾個對象，需要先拖曳出一個矩形将它們全部包含進去，或者按住shift鍵選擇需要對齊的對象，然後選擇菜單中的“editor→align”，選取相應的對齊方式即可。
如果需要對視圖的位置進行微調，可以在選中它以後按上、下、左、右鍵去調整4個方向的位置，每按一次隻會移動1個點（對retina螢幕來說是2個像素）。
大小檢視窗
除了選擇句柄以外，還有一個可以幫助我們調整對象大小的工具就是大小檢視窗（the size inspector）。在interface builder中有很多檢視窗，如屬性、幫助、辨別、大小和關聯。其中，大小檢視窗不僅用于設定對象的大小尺寸，還可以設定位置和停靠。
在場景中標明一個視圖對象，然後按住option鍵再移動滑鼠懸停在另一個對象上，就會出現兩個對象之間的距離數值，這個數值是以點（point）為機關的。