iOS開發tips-UINavigationBar的切換效果

概述

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

導航欄

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

barbuttonitem顏色設置:navigationBar.tintColor

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

NavigationBar title顏色設置：navigationBar.titleTextAttributes

注意：如果個性的標題欄，例如背景圖則可以直接設置navigationItem.titleView)

返回按鈕移除標題：backBarButtonItem.setBackButtonTitlePositionAdjustment將標題移除屏幕外

導航欄顏色設置：navigationBar.barTintColor

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

另外，navigationBar.barStyle是對于導航欄整體風格的設置，默認為default（白色背景、黑色文字、狀態欄文字也是黑色），你可以設置成black（黑色背景、白色文字，狀態欄文字也是白色）。也就是說它不僅影響到導航欄背景色和標題顏色等，也影響狀態欄風格。不過當這個設置和上面的設置發生沖突時，會以上面的獨立設置為準。

isTranslucent是另一個導航欄常用屬性，從iOS 7開始加入，默認為true代表導航欄半透明。如果通過navigationBar.setBackgroundImage來修改導航欄背景色，導航isTranslucent=true時即使圖片顏色不透明那么系統也會修改圖片的alpha達到半透明效果（這種情況_UIBarBackground透明，修改圖片alpha。但是這種半透明效果并非系統默認的毛玻璃效果，系統默認的的毛玻璃效果是iOS增加了UIVisualEffectView來實現的，而自定義背景之后則不會自動增加UIVisualEffectView）；如果isTranslucent=false那么即使圖片顏色透明，系統也會將其調整為不透明效果（這種情況是將_UIBarBackground設置為白色或黑色，具體依據barStyle確定）。但是如果是通過barTintColor修改背景色的話，即使isTranslucent=true也無法達到半透明效果。

有了上面的結論之后，要實現導航欄透明效果只需要通過navigationBar.setBackgroundImage設置一個透明圖片，然后設置isTranslucent=true即可。

導航欄切換效果

導航欄的切換效果其實主要是不同顏色的導航欄切換或者從透明到不透明切換。不管是哪種切換，最直觀的方式肯定是在viewWillAppear中設置當前控制器的導航欄樣式（當然，如果一個應用中僅僅個別界面需要特殊設置，也可以在這個控制器中設置特殊樣式，然后再viewWillDisappear中恢復設置，但通常不推薦這么做，因為如果后期特殊樣式增多會有很多坑），下面第一個demo中先看一下這么做的效果。

原始方式

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

方案1

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

注意：

1.上面的setNavigationBarHidden(hidden: Bool, animated: Bool)不能更換成navigationBar.isHidden)，否則達不到效果。
2.通過interactivePopGestureRecognizer.delegate=self來達到側滑返回效果時，多次push、pop會出現界面錯亂操作失效的問題，解決方式就是在適當的時候禁用側滑,詳見代碼中BaseNavigationController。
3.也有人將setNavigationBarHidden(hidden: Bool, animated: Bool)的調用放到UINavigationController的navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool)方法中，也不失一種辦法（不過這種方法不利于維護）

方案2

方案1最大的問題就是還必須自己添加UINavigationBar，而且由于隱藏了系統的導航欄，造成側滑手勢丟失。如果僅僅只是隱藏了導航欄的背景，而所有的navigationItem還是使用系統原有的，這樣一來就可以規避方案1的缺點，不僅如此，在手勢切換過程中navigationItem默認是有動畫切換效果的。demo3演示了這一用法：

當然，demo中為了不影響其他演示，使用了自定義導航控制器TransparentNavigationController并且在其中設置隱藏導航欄背景，實際開發中如果有必要你可以通過appearance統一隱藏所有的導航欄背景。
方案2效果相對來說已經比較完美了，不足的地方是如果要實現毛玻璃效果就需要自己處理。微信在這點上做了更細節的處理：在轉場過程中使用自定義導航欄背景，轉場切換完成以后替換成系統的導航欄效果，實現了對方案2的細節改進。如果你想實現半透明效果而又不想自己實現，可以考慮這種方式，否則方案2應該可以說是比較完美的方案。

切換動畫

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

當然，如果你愿意，可以通過demo4配合demo3實現更好的切換效果。
此外，也有人通過swizzle UINavigationController的_updateInteractiveTransition:方法在手勢切換過程中動態修改導航欄的透明度等來達到完美的過渡，但相比較于上面的公開方法并沒有太明顯的優勢。而且這只適用于從無到有的過渡，對于不同顏色的導航欄過渡也顯得無能為力。類似的還有使用iOS7新加入的UIViewControllerInteractiveTransitioning自定義轉場動畫，這跟swizzle _updateInteractiveTransition:并沒有明顯的區別。

擴展：全屏返回手勢

和導航欄相關的另一個問題就是側滑手勢返回。前面可以看到方案2相對方案1其中一個優點就是不用想辦法維護返回手勢失效的問題，但是不管哪種方案都不能全屏手勢返回。盡管這個需求如果蘋果從系統級設計實現將是易如反掌，但顯然蘋果覺得從邊緣側滑才是合理的，不過全屏側滑基本已經是目前國內app的標配了。

實現全屏側滑返回首先想到的是使用iOS7新增的UIViewControllerInteractiveTransitioning，這是蘋果推薦的方式，既然轉場可以自定義，當然添加個手勢返回也不會很復雜。但是這種方式的最大問題就是實現起來并沒有系統滑動那般絲滑，想要實現類似系統的切換效果還要好好下一番功夫。于是就有朋友想到自定義一個拖動手勢添加到全屏，而真正側滑的操作使用系統的方法，這也是目前很多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
 }

}

當然上面的實現并不太完美，多次滑動之后有時候還會出現bug，這需要一些條件控制，不過你可以利用Swizzle黑魔法將其應用到系統中所有的導航控制器中，這一點可以參考sunnyxx的開源庫FDFullscreenPopGesture

總結

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。