1. 程式人生 > >iOS開發tips-UINavigationBar的切換

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.backIndicatorImagenavigationBar.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演示了這個效果:

NaivgationBarTransation_Demo1

方案1

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

NaivgationBarTransation_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演示了這一用法:

NaivgationBarTransation_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演示了這一實現:

NaivgationBarTransation_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
    }

}

NaivgationBarTransation_Demo5

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

總結

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

程式碼下載