IOS的項目多數會遇到控制狀態欄和導航欄的問題,比如隱藏狀態欄、控制狀態欄的文字顏色等,導航欄也有同樣需求。本文總結一下操作方法。
首先一點,IOS的界面分為狀態欄和導航欄,狀態欄是指顯示電池、時間的最頂部的一個窄條,高度為20個點;而導航欄是緊接著狀態欄的44個點高度的橫條,一般用于顯示app標題,返回按鈕等操作按鈕。
在ios7之前,狀態欄和導航欄是分開的,而從ios7開始狀態欄和導航欄交織在一起了,狀態欄變為透明,導航欄的高度變為44+20=64:
狀態欄控制
對狀態欄的控制分兩種情況:全局設置和分頁面設置。控制這兩種模式的開關是info.plist文件的View controller-based status bar appearance配置項。
全局設置狀態欄
將info.plist文件的View controller-based status bar appearance設置為NO,即可開啟全局設置,也就是說你在VC中對狀態欄的控制都將無效,相比之下,是通過下面的代碼來全局控制:
注意,我們并不能對狀態欄的字體顏色做任意的控制,只有兩種選擇UIStatusBarStyleDefault和UIStatusBarStyleLightContent,前者是默認的黑色,而后者是白色。也就是說如果你的背景色是偏深色,那么設置狀態欄的字體顏色為白色。另外,我們可以全局設置狀態欄是否顯示,但是一般而言app不會對所有界面都不顯示狀態欄,而是只在特定的頁面需要隱藏狀態欄,比如對于視頻播放界面不希望顯示狀態欄。
對于狀態欄的背景色設置,上面提到從ios7開始狀態欄本身實際上是透明的,它的背景色其實取決于導航欄的背景色。下面會講導航欄的設置。
分頁面設置狀態欄
將info.plist文件的View controller-based status bar appearance設置為YES,即可開啟由VC來控制狀態欄的功能,在這種模式下,全局的設置將無效!!所以我們必須逐個頁面對狀態欄進行設置,否則狀態欄將維持默認的黑色字體和默認為顯示狀態。
字體設置
對于設置狀態欄字體顏色,分兩種情況:VC是否屬于UINavigationController中:
1) 當VC不在UINavigationController中時,在VC中添加一個方法
保險起見,在view的某個加載階段比如viewWillAppear中,執行:
2) 當VC在UINavigationController中時,VC并不能通過1)的方式控制狀態欄的顏色,詳見本文后面的參考資料,那么這個時候,有一個trick的方法可以在VC中間接的控制:
隱藏控制
對于控制狀態欄的隱藏同樣存在VC是否是根控制器的問題,也就說只有根控制器才能直接控制狀態欄的顯示與否。
1) 如果是VC本身就是根控制器,那么在VC中添加如下代碼:
當然,保險起見,在適當的時候調用
2) 如果VC不是根控制器,那么不像控制字體顏色那樣有trick,我們只能間接的通過在子VC中控制根VC,從而間接控制根控制器。那么這個方法就很多了,比如我的根VC是個tab的VC,首先現在tab的VC中,實現1):
在子VC中:
可以看到在子VC中通過設置根VC的屬性,并調用setNeedsStatusBarAppearanceUpdate后,根VC的prefersStatusBarHidden就會被調用,從而隱藏或顯示狀態欄。
導航欄控制
背景控制
在IOS7中使用barTintColor來控制導航欄的背景色:
這個設置方法可以在AppDelegate中設置,全局可以生效。
如果希望使用圖片來作為導航的背景,那么需要注意的是ios7中圖片的高度問題。上面提到過了,ios7導航欄的高度其實是算上狀態欄的,即44+20=64個點的高度。可以通過setBackgroundImage來設置:
前景控制
前景控制分為標題控制和返回按鈕(等系統按鈕)的控制
標題需要通過setTitleTextAttributes來設置,相對比較復雜一些,例如:
設置返回按鈕(等系統按鈕)可以通過TintColor,直接來設置顏色
顯示設置
有時我們希望導航欄不顯示,而有時又希望顯示,那么最好通過每個個體的VC來控制,如果某個VC需要與其他VC有所區別,那么最好是“負責到底”,即在進入VC時改變導航欄的顯示狀態,而退出時還原:
如何在有導航欄的情況下定位控件的Y
可能初學ios的同學(尤其是通過手寫代碼布局的同學)都會有這么個感受,為什么我的控件有的時候明明定位在VC上,但會被導航欄遮住,那么你可能會得出結論原點(0,0)是在屏幕的左上角被導航欄遮住的;而對于像UITableView這樣的,設置了全屏鋪滿,怎么就沒有被導航欄遮住呢?原點難道不在左上角?
筆者被這個問題困擾了很久,這里談一下最近的一個理解。我們拿UITextView來看
當我們把一個UITextView放到一個沒有導航的VC中時:
效果是這樣的,看起來并沒有什么問題
然而如果我們把這個VC放到一個導航控制器中,同樣的代碼卻是這樣結果
首先,看起來UITextView距離設備頂部的絕對距離似乎并沒有變化,但是請注意UITextView的滾動條,滾動條竟然沒有頂部對齊,而且文字也向下移位了,看起來空出一大塊。仔細看空出的這段高度其實剛好是導航欄的高度64個點!!經過搜索,我發現只要設置如下代碼即可恢復這種異常的狀況:
這下明白了,原來VC會對其內部的UIScrollView的內容部分進行一個Inset,這個Inset在上半部分剛好就對應導航欄的高度,而UIScrollView包括UITableView和UITextView等。到這里,似乎有些問題明朗了:
VC中的view默認會對UIScrollView做一個適應導航欄的處理,由此推測,其實只要是VC中的控件,都是從設備左上角的(0,0)開始算的,只是對于UIScrollView,VC會自動調整一下內容的位置而已。
在有導航的情況下,可視范圍的Y坐標就是從64開始的,除了UIScrollView的控件,定位的時候,都應當以(0,64)為原點;而UIScrollView如果是全屏的,那么無所謂,如果不是全屏的,請注意是否需要設置VC的automaticallyAdjustsScrollViewInsets。