XIB、Storyboard操作小技巧

Jayce濤發表於2015-02-13

本文收集了其他優秀博主,論壇上的相關技巧,及自己總結出的一些tips,小白級tip,大神們請輕噴,或給出建議分享,謝謝!
SB push Tab時隱藏Tab
相信有很多人和我一樣,開始使用 tabBar 時苦惱過在 tabBar 內建的 viewControllers 裡新增 navigationController 的問題
蘋果是希望我們使用 tabBar 時是作為根檢視的,當然如果你固執地將其作為 navigationController 的 rootViewController 也是可以執行成功並達到自己的目的的,但是像不定時炸彈一樣,會出現莫名其妙地程式執行即崩潰的問題,等出了問題再去改初始的檢視框架是件很痛苦地事,別問我怎麼知道的,我只想說,請不要忽略蘋果給你的提示。。即便可以達到想要的效果。
所以要使用 navigationController 來push 檢視就只能將 TabBar 的 viewControllers 中想要做 push 操作的檢視控制器設定為 navigationController,直接做 push 操作會帶上 tabBar .
解決方式
storyboard:在你想要push的viewController的通用設定中將Hide Bottom Bar On Push一項勾選上既可
程式碼:
self.hidesBottomBarWhenPushed = YES;
操作示意圖1這裡寫圖片描述
PS:上圖中 Extend Edges 中的 Under Top Bars 屬性,在你的檢視從nv push 過來時有一段距離的空白時,將此選項勾選去除一般可以解決
設定圓角
大家都愛圓角,button,彈出檢視等 不加圓角怎麼看怎麼像Demo有沒有,但是每次都要寫那幾句程式碼真是夠了,當然也可以封裝了之後呼叫,這是其一,但在除錯程式時想盡快看到效果時,可用直接在xib和xb的檢視中設定。
選中view,選中右邊工作欄的class選項,在 User Defined Runtime Attributes 區域新增自己想為view新增的屬性既可,大家可以看到Type選項有很多種,所以,但凡是屬性為Type中的某種的都可以通過這種方式來設定, layer邊框顏色 也可以直接設定,而不用再糾結RGB的數值等,可以直接取色,這裡相關的tips我就不一一列舉,拋磚引玉
操作示意圖2這裡寫圖片描述
SB中單獨的View
很多人以為storyboard將單獨的view去除了,以至於在VC中希望新增單獨的view時,總是要去建立單獨的xib,或是程式碼書寫。
其實在SB的VC中新增View檢視,佈局完成後,將其拖動到 First Responder Exit 並列的位置,同樣可以建立對映,為控制元件新增響應事件等,等同於以前xib中各個獨立的檢視,只是不能直觀地看到這些檢視的佈局,如要檢視佈局狀態,還得拖動到viewController的主視窗中進行檢視
操作示意圖3這裡寫圖片描述
視覺化座標距離
IB最煩人的問題就是對齊。用程式碼的時候我們可以明確地指定x,y座標,但是換到IB的時候我們更多的時候是靠拖拽UIView來佈局。比如需要三個間隔相同的label,除了用強大的肉眼來估測距離是否相等以外,難道只能乖乖分別選中三個label,記下它們的座標然後開啟計算器來做加減法麼?
顯然不要那麼笨,試試看選中一個label,然後按住option鍵並將滑鼠移動到其他label上試試?你可以發現view之間的距離都以很容易理解的方式顯示出來了。不僅是同層次的view,被選中view與其他層次的view之間的距離關係也可以同樣顯示。
選擇之後效果與下文新增輔助線示例圖類似
將多個view檢視合併到一個檢視層級
有時候新增了多個控制元件,而且千辛萬苦終於調整好了對齊,間距
操作示意圖4這裡寫圖片描述
發現要將這些控制元件放在一個父類檢視中方便操作,最直觀地,拖動一個 view 到皮膚上,選中這些控制元件,拖拽到這個 view 上,悲劇就發生了,難道只能再次睜大雙眼,一個個對齊,調整麼
操作示意圖5這裡寫圖片描述
顯然不用,選中這些控制元件,選擇選單欄上 Editor->Embed in->View/Scroll view
操作示意圖6這裡寫圖片描述
最終控制元件還是按照原來樣式排練在一個view上
操作示意圖7這裡寫圖片描述
同樣,要將其從父類view上移到另一個檢視,選擇上圖中 Editor->Unembed 就可以了
為檢視新增輔助線
搞設計的一般都知道輔助線是多麼重要,我們在為檢視佈局時也可以為檢視新增輔助線,方便我們佈局時更加準確
新增 :雙擊某個View,按下 shift + Command + - 新增橫向輔助線, shift + Command+ | 新增縱向輔助線,新增的位置都是 左右/上下 居中的
移動 :游標移動到線上時會出現可拖動的按鈕,按住 左右/上下 拖動到想要的位置,拖動時可以看到輔助線線距離檢視左右/上下的距離
刪除 :方式也很簡單,與刪除斷點方式一樣,快速拖動到檢視看不見的地方即可刪除
操作示意圖8這裡寫圖片描述

相關文章