隨著iOS開發(fā)發(fā)展至今庆捺，可以說在UI制作上大家逐漸分化為了三種主要流派：使用代碼手寫UI及布局拇砰；使用單個(gè)xib文件組織viewController或者view；使用StoryBoard來通過單個(gè)或很少的幾個(gè)文件構(gòu)建全部UI.? 我們來看看三種方式的主要區(qū)別.
-
手寫代碼:
代碼UI可以說具有最好的代碼重用性.如果你的目的是寫一些可以高度重用的控件提供給其他開發(fā)者使用，那毫無疑問最好的選擇應(yīng)該是使用代碼來完成UIView的子類.這樣進(jìn)一步的修改和其他開發(fā)者在使用時(shí)，都會(huì)方便不少.使用代碼也是最為強(qiáng)大的饲握，會(huì)有xib或者StoryBoard做不了的事情，但是使用代碼最終一定能夠完成所要的需求.
-
XIB:
其實(shí)IB和xib是從iOS SDK初次面世開始就是捆綁在開發(fā)者工具套裝內(nèi)的內(nèi)容了，而到了Xcode 4之后更被直接集成到了Xcode中成為了IDE的一部分. xib設(shè)計(jì)的一大目的其實(shí)是為了良好的MVC：一般來說救欧，單個(gè)的xib文件對(duì)應(yīng)一個(gè)ViewController衰粹，而對(duì)于一些自定義的view，往往也會(huì)使用單個(gè)xib并從main bundle進(jìn)行加載的方式來載入.IB幫助完成view的創(chuàng)建笆怠，布局和與file owner的關(guān)系映射等一些列工作. 對(duì)于初學(xué)者來說铝耻，牢記xib的文件都是view的內(nèi)容，有助于建立起較好的MVC的概念骑疆，從而在開發(fā)中避免或少走彎路.
最大的問題在于xib中的設(shè)置往往并非最終設(shè)置田篇，在代碼中你將有機(jī)會(huì)覆蓋你在xib文件中進(jìn)行的UI設(shè)計(jì).在不同的地方對(duì)同一個(gè)屬性進(jìn)行設(shè)置，這在之后的維護(hù)中將會(huì)是噩夢(mèng)般的存在.因?yàn)槠鋵?shí)IB還是有所局限的箍铭，它沒有邏輯判斷，也很難在運(yùn)行時(shí)進(jìn)行配置.
-
StoryBoard:
簡單理解來說椎镣，可以把StoryBoard看做是一組viewController對(duì)應(yīng)的xib诈火，以及它們之間的轉(zhuǎn)換方式的集合.在StoryBoard中不僅可以看到每個(gè)ViewController的布局樣式，也可以明確地知道各個(gè)ViewController之間的轉(zhuǎn)換關(guān)系.
現(xiàn)在StoryBoard面臨的最大問題就是多人協(xié)作.因?yàn)樗械腢I都定義在一個(gè)文件中状答，因此很多開發(fā)者個(gè)人或企業(yè)的技術(shù)負(fù)責(zé)人認(rèn)為StoryBoard是無法進(jìn)行協(xié)作開發(fā)的冷守，其實(shí)這更多的是一種對(duì)StoryBoard的陌生所造成的誤解.雖然Apple并沒有在WWDC明確提及，但是沒有人規(guī)定整個(gè)項(xiàng)目只能有一個(gè)StoryBoard文件.
現(xiàn)在會(huì)有一些對(duì)于StoryBoard性能上的擔(dān)憂. 因?yàn)橄鄬?duì)于單個(gè)xib來說惊科，StoryBoard文件往往更大拍摇，加載速度也相應(yīng)變慢.
今天我們就來看看StoryBoard的創(chuàng)建以及使用
- 創(chuàng)建StoryBoard最好是在ARC下創(chuàng)建
- 一般情況下, 程序都是寫在Xcode默認(rèn)的Main.storyboard里面. 但是如有特殊需求, 可自定義StoryBoard:
- 創(chuàng)建自定義StoryBoard后, 記得要修改Main Interface為自己定義的StoryBoard:
- 大家記得主界面這里Is Initial View Controller要記得勾選, 這樣紅圈里面的小箭頭才會(huì)出現(xiàn), 表示程序運(yùn)行從這個(gè)界面開始
- 下面小編以View為例子示范一下視圖的編輯, 右上角的6個(gè)小圖標(biāo)大概表示對(duì)控件6種類型屬性的設(shè)置, 我們會(huì)常用第3,4,5個(gè)
- Storyboard下Xcode右下角, 大家在下方Filter搜索欄可搜索自己想要添加的控件類型, 并拖拽至屏幕中央的View Controller上, 這里我為大家舉例添加一個(gè)Label控件
大家可以看到在鼠標(biāo)選中當(dāng)前Label時(shí), 可在Xcode右側(cè)欄對(duì)Label進(jìn)行各種屬性的控制, 包括文字內(nèi)容, 字體, 對(duì)齊方式等, 以及Label繼承父類View的一些屬性, 背景顏色backgroundcolor, 透明度alpha等, 大家就慢慢的去摸索探究吧
右下角Filter搜索欄左邊的是4個(gè)關(guān)于對(duì)控件frame設(shè)置約束的小圖標(biāo), 注釋我都標(biāo)在圖上面了
- 注意一切要先鼠標(biāo)點(diǎn)擊要編輯的控件下操作(ps:在鼠標(biāo)選中當(dāng)前控件的情況下按住Alt可查看當(dāng)前控件距離上下左右邊框的像素), 首先第一步, 灰色箭頭?的是是否添加邊框約束, 一般情況下此處要取消勾選, 因?yàn)槿绻砑舆吙蚣s束, 會(huì)導(dǎo)致我們控件的frame發(fā)生偏移, 第二部選擇要約束的條件, 上下左右四個(gè)方向, 圖中試?yán)募s束是距離上面控件/邊框100像素, 距離左側(cè)控件/邊框100像素, 距離右側(cè)控件/邊框100像素, 同時(shí)設(shè)定控件的寬Width為50像素, 第三步紅色箭頭點(diǎn)擊Add4為Label添加這4個(gè)約束.
- Xcode右側(cè)欄選中小尺子的情況下可以查看當(dāng)前選中的控件被設(shè)定的全部約束.并可以通過點(diǎn)擊Edit進(jìn)行約束的修改, 右下角4小圖標(biāo)中的最后一個(gè)中的UpdateFrames(紅色箭頭)是將圖中的模糊frame移動(dòng)拉伸至約束frame, clearConstraints(藍(lán)色箭頭)顧名思義是清除對(duì)當(dāng)前選中控件的全部約束. All Views in View Controller欄里是對(duì)該視圖下所有控件約束的整體控制.
