iOS開發(fā)tips-UINavigationBar的切換效果

概述

在iOS系統(tǒng)中，如果控制器是以push方式進(jìn)行管理的話，那么事實(shí)上多個(gè)控制器是共享的同一個(gè)導(dǎo)航欄。當(dāng)然iOS系統(tǒng)的設(shè)計(jì)無(wú)可厚非，但是國(guó)內(nèi)的應(yīng)用經(jīng)常會(huì)遇到很多個(gè)性的設(shè)計(jì)，就比如說(shuō)A push到 B，A可能有導(dǎo)航欄，但是B控制器要求導(dǎo)航欄是透明的，這樣一來(lái)A和B由于共用同一個(gè)導(dǎo)航欄就會(huì)讓整個(gè)切換操作不易管理，何況從iOS 7開始不僅僅是點(diǎn)擊返回按鈕瞬間返回A那么簡(jiǎn)單，還要支持通過(guò)手勢(shì)操作從B緩慢返回到A的導(dǎo)航欄漸變效果。本文就簡(jiǎn)單看一下如何能夠更加合理的設(shè)計(jì)導(dǎo)航欄切換的效果以避免開發(fā)中由于導(dǎo)航欄管理不善而造成管理混亂的狀況。

導(dǎo)航欄

在開始今天的話題之前，先看一下關(guān)于UINavigationBar的一些常見設(shè)計(jì)，要想清楚的了解導(dǎo)航欄的切換，弄清UINavigationBar的一些常用設(shè)置是必不可少的。簡(jiǎn)單起見，這里僅僅列出具體設(shè)置方式，不再一一贅述其細(xì)節(jié)：

barbuttonitem顏色設(shè)置:navigationBar.tintColor

這種方式包括push中的返回按鈕，不過(guò)返回按鈕可以通過(guò)自定義圖片達(dá)到調(diào)整顏色效果navigationBar.backIndicatorImage及navigationBar.backIndicatorTransitionMaskImage。
此外，注意字體大小等則必須通過(guò)UIBarButtonItem的setTitleTextAttributes設(shè)置，或者干脆自定義customView

NavigationBar title顏色設(shè)置：navigationBar.titleTextAttributes

注意：如果個(gè)性的標(biāo)題欄，例如背景圖則可以直接設(shè)置navigationItem.titleView)

返回按鈕移除標(biāo)題：backBarButtonItem.setBackButtonTitlePositionAdjustment將標(biāo)題移除屏幕外

導(dǎo)航欄顏色設(shè)置：navigationBar.barTintColor

注意：也可以使用navigationBar.setBackgroundImage方法指定一個(gè)不同顏色的圖片修改導(dǎo)航欄背景色。

另外，navigationBar.barStyle是對(duì)于導(dǎo)航欄整體風(fēng)格的設(shè)置，默認(rèn)為default（白色背景、黑色文字、狀態(tài)欄文字也是黑色），你可以設(shè)置成black（黑色背景、白色文字，狀態(tài)欄文字也是白色）。也就是說(shuō)它不僅影響到導(dǎo)航欄背景色和標(biāo)題顏色等，也影響狀態(tài)欄風(fēng)格。不過(guò)當(dāng)這個(gè)設(shè)置和上面的設(shè)置發(fā)生沖突時(shí)，會(huì)以上面的獨(dú)立設(shè)置為準(zhǔn)。

isTranslucent是另一個(gè)導(dǎo)航欄常用屬性，從iOS 7開始加入，默認(rèn)為true代表導(dǎo)航欄半透明。如果通過(guò)navigationBar.setBackgroundImage來(lái)修改導(dǎo)航欄背景色，導(dǎo)航isTranslucent=true時(shí)即使圖片顏色不透明那么系統(tǒng)也會(huì)修改圖片的alpha達(dá)到半透明效果（這種情況_UIBarBackground透明，修改圖片alpha。但是這種半透明效果并非系統(tǒng)默認(rèn)的毛玻璃效果，系統(tǒng)默認(rèn)的的毛玻璃效果是iOS增加了UIVisualEffectView來(lái)實(shí)現(xiàn)的，而自定義背景之后則不會(huì)自動(dòng)增加UIVisualEffectView）；如果isTranslucent=false那么即使圖片顏色透明，系統(tǒng)也會(huì)將其調(diào)整為不透明效果（這種情況是將_UIBarBackground設(shè)置為白色或黑色，具體依據(jù)barStyle確定）。但是如果是通過(guò)barTintColor修改背景色的話，即使isTranslucent=true也無(wú)法達(dá)到半透明效果。

有了上面的結(jié)論之后，要實(shí)現(xiàn)導(dǎo)航欄透明效果只需要通過(guò)navigationBar.setBackgroundImage設(shè)置一個(gè)透明圖片，然后設(shè)置isTranslucent=true即可。

導(dǎo)航欄切換效果

導(dǎo)航欄的切換效果其實(shí)主要是不同顏色的導(dǎo)航欄切換或者從透明到不透明切換。不管是哪種切換，最直觀的方式肯定是在viewWillAppear中設(shè)置當(dāng)前控制器的導(dǎo)航欄樣式（當(dāng)然，如果一個(gè)應(yīng)用中僅僅個(gè)別界面需要特殊設(shè)置，也可以在這個(gè)控制器中設(shè)置特殊樣式，然后再viewWillDisappear中恢復(fù)設(shè)置，但通常不推薦這么做，因?yàn)槿绻笃谔厥鈽邮皆龆鄷?huì)有很多坑），下面第一個(gè)demo中先看一下這么做的效果。

原始方式

viewWillAppear()中獨(dú)立設(shè)置當(dāng)前控制器的樣式固然是最容易想到也是最好實(shí)現(xiàn)的方式，這種方式不僅支持默然的push、pop，同樣支持手勢(shì)返回操作，但是缺點(diǎn)也很明顯，那就是手勢(shì)操作時(shí)切換效果很突兀。demo1演示了這個(gè)效果：

方案1

Demo1的效果是最原始的方式，易實(shí)現(xiàn)，但效果不好。事實(shí)上蘋果也注意到了這個(gè)問(wèn)題，所以提供了一個(gè)setNavigationBarHidden(<#T##hidden: Bool##Bool#>, animated: <#T##Bool#>)方法用于隱藏和重新展示導(dǎo)航條，這樣一來(lái)對(duì)于透明導(dǎo)航條只有在viewWillAppear中隱藏導(dǎo)航條，在viewWillDisappear中重新展示即可。而對(duì)于切換不同顏色的導(dǎo)航條則只需要隱藏用這個(gè)方法隱藏導(dǎo)航條然后自定義一個(gè)UINavigationBar增加到導(dǎo)航條的位置（添加一個(gè)假的導(dǎo)航條）。不過(guò)這種方式的由于隱藏了導(dǎo)航條，那么側(cè)滑返回手勢(shì)也會(huì)消失，解決方式是重新設(shè)置當(dāng)前控制器的interactivePopGestureRecognizer.delegate=self，demo2演示了這個(gè)效果：

注意：

1.上面的setNavigationBarHidden(hidden: Bool, animated: Bool)不能更換成navigationBar.isHidden)，否則達(dá)不到效果。
2.通過(guò)interactivePopGestureRecognizer.delegate=self來(lái)達(dá)到側(cè)滑返回效果時(shí)，多次push、pop會(huì)出現(xiàn)界面錯(cuò)亂操作失效的問(wèn)題，解決方式就是在適當(dāng)?shù)臅r(shí)候禁用側(cè)滑,詳見代碼中BaseNavigationController。
3.也有人將setNavigationBarHidden(hidden: Bool, animated: Bool)的調(diào)用放到UINavigationController的navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool)方法中，也不失一種辦法（不過(guò)這種方法不利于維護(hù)）

方案2

方案1最大的問(wèn)題就是還必須自己添加UINavigationBar，而且由于隱藏了系統(tǒng)的導(dǎo)航欄，造成側(cè)滑手勢(shì)丟失。如果僅僅只是隱藏了導(dǎo)航欄的背景，而所有的navigationItem還是使用系統(tǒng)原有的，這樣一來(lái)就可以規(guī)避方案1的缺點(diǎn)，不僅如此，在手勢(shì)切換過(guò)程中navigationItem默認(rèn)是有動(dòng)畫切換效果的。demo3演示了這一用法：

當(dāng)然，demo中為了不影響其他演示，使用了自定義導(dǎo)航控制器TransparentNavigationController并且在其中設(shè)置隱藏導(dǎo)航欄背景，實(shí)際開發(fā)中如果有必要你可以通過(guò)appearance統(tǒng)一隱藏所有的導(dǎo)航欄背景。
方案2效果相對(duì)來(lái)說(shuō)已經(jīng)比較完美了，不足的地方是如果要實(shí)現(xiàn)毛玻璃效果就需要自己處理。微信在這點(diǎn)上做了更細(xì)節(jié)的處理：在轉(zhuǎn)場(chǎng)過(guò)程中使用自定義導(dǎo)航欄背景，轉(zhuǎn)場(chǎng)切換完成以后替換成系統(tǒng)的導(dǎo)航欄效果，實(shí)現(xiàn)了對(duì)方案2的細(xì)節(jié)改進(jìn)。如果你想實(shí)現(xiàn)半透明效果而又不想自己實(shí)現(xiàn)，可以考慮這種方式，否則方案2應(yīng)該可以說(shuō)是比較完美的方案。

切換動(dòng)畫

其實(shí)多數(shù)App都采用的前面提到的解決方案，但是類似于手QQ進(jìn)入QQ空間的切換就沒(méi)有這么處理（考慮可能是出于QQ空間界面的導(dǎo)航欄上拉還需要導(dǎo)航欄漸顯而有意這么處理的），手QQ要實(shí)現(xiàn)的效果是從動(dòng)態(tài)到空間導(dǎo)航欄從藍(lán)色逐漸消失，而從空間回來(lái)則相反。實(shí)現(xiàn)這個(gè)過(guò)程其實(shí)最主要的是考慮手勢(shì)返回時(shí)透明度的設(shè)置和返回進(jìn)度保持一致，好在蘋果已經(jīng)提供了現(xiàn)成的api供我們調(diào)用，這就是self.transitionCoordinator.animateAlongsideTransition(in view: UIView?, animation: ((UIViewControllerTransitionCoordinatorContext) -> Swift.Void)?, completion: ((UIViewControllerTransitionCoordinatorContext) -> Swift.Void)? = nil)，默認(rèn)轉(zhuǎn)場(chǎng)時(shí)會(huì)通過(guò)這個(gè)動(dòng)畫回調(diào)計(jì)算出block的中間插值，無(wú)論手勢(shì)停留在哪一時(shí)刻都能確保動(dòng)畫插值保持一致，從而達(dá)到類似于QQ空間的手勢(shì)切換效果。demo4演示了這一實(shí)現(xiàn)：

當(dāng)然，如果你愿意，可以通過(guò)demo4配合demo3實(shí)現(xiàn)更好的切換效果。
此外，也有人通過(guò)swizzle UINavigationController的_updateInteractiveTransition:方法在手勢(shì)切換過(guò)程中動(dòng)態(tài)修改導(dǎo)航欄的透明度等來(lái)達(dá)到完美的過(guò)渡，但相比較于上面的公開方法并沒(méi)有太明顯的優(yōu)勢(shì)。而且這只適用于從無(wú)到有的過(guò)渡，對(duì)于不同顏色的導(dǎo)航欄過(guò)渡也顯得無(wú)能為力。類似的還有使用iOS7新加入的UIViewControllerInteractiveTransitioning自定義轉(zhuǎn)場(chǎng)動(dòng)畫，這跟swizzle _updateInteractiveTransition:并沒(méi)有明顯的區(qū)別。

擴(kuò)展：全屏返回手勢(shì)

和導(dǎo)航欄相關(guān)的另一個(gè)問(wèn)題就是側(cè)滑手勢(shì)返回。前面可以看到方案2相對(duì)方案1其中一個(gè)優(yōu)點(diǎn)就是不用想辦法維護(hù)返回手勢(shì)失效的問(wèn)題，但是不管哪種方案都不能全屏手勢(shì)返回。盡管這個(gè)需求如果蘋果從系統(tǒng)級(jí)設(shè)計(jì)實(shí)現(xiàn)將是易如反掌，但顯然蘋果覺(jué)得從邊緣側(cè)滑才是合理的，不過(guò)全屏側(cè)滑基本已經(jīng)是目前國(guó)內(nèi)app的標(biāo)配了。

實(shí)現(xiàn)全屏側(cè)滑返回首先想到的是使用iOS7新增的UIViewControllerInteractiveTransitioning，這是蘋果推薦的方式，既然轉(zhuǎn)場(chǎng)可以自定義，當(dāng)然添加個(gè)手勢(shì)返回也不會(huì)很復(fù)雜。但是這種方式的最大問(wèn)題就是實(shí)現(xiàn)起來(lái)并沒(méi)有系統(tǒng)滑動(dòng)那般絲滑，想要實(shí)現(xiàn)類似系統(tǒng)的切換效果還要好好下一番功夫。于是就有朋友想到自定義一個(gè)拖動(dòng)手勢(shì)添加到全屏，而真正側(cè)滑的操作使用系統(tǒng)的方法，這也是目前很多app普遍使用的方式。在下面的demo5中演示了這一方法：

class FullScreenPoNavigationViewController: UINavigationController,UIGestureRecognizerDelegate {

 override func viewDidLoad() {
 super.viewDidLoad()

 let popGesture = self.interactivePopGestureRecognizer
 let popTarget = popGesture?.delegate
 let popView = popGesture!.view!
 popGesture?.isEnabled = false

 let popSelector = NSSelectorFromString("handleNavigationTransition:")
 let fullScreenPoGesture = UIPanGestureRecognizer(target: popTarget, action: popSelector)
 fullScreenPoGesture.delegate = self

 popView.addGestureRecognizer(fullScreenPoGesture)
 }

 func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
 if self.childViewControllers.count > 1 {
  return true
 }
 return false
 }

}

當(dāng)然上面的實(shí)現(xiàn)并不太完美，多次滑動(dòng)之后有時(shí)候還會(huì)出現(xiàn)bug，這需要一些條件控制，不過(guò)你可以利用Swizzle黑魔法將其應(yīng)用到系統(tǒng)中所有的導(dǎo)航控制器中，這一點(diǎn)可以參考sunnyxx的開源庫(kù)FDFullscreenPopGesture

總結(jié)

方案1自定義完整的導(dǎo)航欄和方案2僅僅自定義導(dǎo)航欄背景基本是當(dāng)前國(guó)內(nèi)絕大多數(shù)app的做法。但是類似于網(wǎng)易云音樂(lè)和微信等應(yīng)用也對(duì)方案1和方案2做了改進(jìn)，微信的改進(jìn)上面已經(jīng)提到了，網(wǎng)易云音樂(lè)使用的方式類似于方案1，但是它并沒(méi)有自定義導(dǎo)航欄而是巧妙的在導(dǎo)航欄外嵌套一個(gè)UINavigationController來(lái)實(shí)現(xiàn)（由于UINavigationController無(wú)法直接push另一個(gè)UINavigationController，所以外面還要再多嵌套一個(gè)UIViewController），這種方式規(guī)避了自定義導(dǎo)航欄的麻煩，但是也不是沒(méi)有缺點(diǎn)，例如如果你不是很清楚其中的結(jié)構(gòu)，想要拿到當(dāng)前控制器的導(dǎo)航控制器時(shí)可能會(huì)事與愿違。 除了上述方式還有一些其他方式實(shí)現(xiàn)導(dǎo)航欄的切換效果，例如通過(guò)截圖方式，但相對(duì)比較麻煩而且和原有實(shí)現(xiàn)方式也有所偏離，在此不再贅述，有興趣可以繼續(xù)探索。

代碼下載：tips-UINavigationBar的切換效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。