Swift封裝滑出式導航欄

前言：本文將會創建以下幾個主類：

DWContainerViewController：這包含了左視圖，中視圖和右視圖控制器的視圖，并處理動畫和滑動等操作。 DWCenterViewController：中央面板。 DWSidePanelViewController：用于左側和右側面板。

創建storyboard，如圖：

并且創建DWCenterViewController、DWStarCell、DWSidePanelViewController，關聯上圖中的storyboard

DWCenterViewController為滑出式導航的類，代碼：

class DWCenterViewController: UIViewController {var delegate: DWCenterViewControllerDelegate?@IBOutlet weak var imageView: UIImageView!@IBOutlet weak var titleLabel: UILabel!@IBOutlet weak var creatorLabel: UILabel!@IBAction func actorsTapped(_ sender: Any) {//左邊點擊事件   }
}
復制代碼

DWStarCell代碼：

class DWStarCell: UITableViewCell {@IBOutlet weak var animalImageView: UIView!@IBOutlet weak var imageNameLabel: UILabel!@IBOutlet weak var imageCreatorLabel: UILabel!}
復制代碼

創建DWStar.swift模型，并且初始化cell顯示的數據，代碼如下：

//結構體
struct DWStar {let title: Stringlet creator: Stringlet image: UIImage?//重寫init方法init(title: String, creator: String, image:UIImage?) {self.title = titleself.creator = creatorself.image = image}static func allActors() -> [DWStar] {return [DWStar(title: "林志玲", creator: "Dwyane", image: UIImage(named: "ID-100113060")),DWStar(title: "張歆藝", creator: "Dwyane", image: UIImage(named: "ID-10022760")),DWStar(title: "李連杰", creator: "Dwyane", image: UIImage(named: "ID-10091065")),DWStar(title: "周潤發", creator: "Dwyane", image: UIImage(named: "ID-10047796")),DWStar(title: "舒淇", creator: "Dwyane", image: UIImage(named: "ID-10092572")),DWStar(title: "鹿晗", creator: "Dwyane", image: UIImage(named: "ID-10041194")),DWStar(title: "黃曉明", creator: "Dwyane", image: UIImage(named: "ID-10017782")),DWStar(title: "李賽鳳", creator: "Dwyane", image: UIImage(named: "ID-10091745")),DWStar(title: "趙麗穎", creator: "Dwyane Ratcliff", image: UIImage(named: "ID-10056941")),DWStar(title: "周星馳", creator: "Dwyane", image: UIImage(named: "ID-10019208")),DWStar(title: "杜海濤", creator: "Dwyane", image: UIImage(named: "ID-10011404"))]}復制代碼

創建DWCenterViewControllerDelegate，并且創建協議方法：

//創建協議 optional：類似oc的可選
@objc
protocol DWCenterViewControllerDelegate {@objc optional func toggleLeftPanel()  //切換左邊的容器@objc optional func collapseSidePanels() //折疊側邊的容器
}
復制代碼

在DWCenterViewController.swift的actorsTapped點擊方法調用協議方法toggleLeftPanel，如下：

@IBAction func actorsTapped(_ sender: Any) {//左邊點擊事件delegate?.toggleLeftPanel?()
}
復制代碼

創建DWSidePanelViewControllerDelegate.swift，并創一個協議

protocol DWSidePanelViewControllerDelegate {func didSelectAnimal(_ animal: DWStar)  //選擇的動物
}
復制代碼

在DWCenterViewController.swift實現DWSidePanelViewControllerDelegate的協議方法：

// MARK: - DWCenterViewController delegate
//在該類實現delegate的方法
extension DWCenterViewController: DWSidePanelViewControllerDelegate {func didSelectAnimal(_ animal: DWStar) { //實現協議方法imageView.image = animal.imagetitleLabel.text = animal.titlecreatorLabel.text = animal.creatordelegate?.collapseSidePanels?() //折疊側容器}  
}
復制代碼

創建DWContainerViewController.swift，并定義一些屬性：

//枚舉  滑動狀態
enum SlideOutState {case bothCollapsed  //側容器折疊case leftPanelExpanded   //左容器展開case rightPanelExpanded  //右容器展開
}//定義屬性
var centerNavigationController: UINavigationController!
var centerViewController: DWCenterViewController!
//當前狀態
var currentState: SlideOutState = .bothCollapsed {didSet { //在屬性值改變后觸發didSetlet shoulShowShadow = currentState != .bothCollapsed}
}var leftViewController: DWSidePanelViewController?
var centerPanelExpandedOffset: CGFloat = 60 //該值是中央視圖控制器在屏幕外動畫顯示后左側可見的寬度（以點為單位）
復制代碼

擴展UIStoryboard,方便取得VC,代碼如下：

private extension UIStoryboard {static func mainStoryboard() -> UIStoryboard {return UIStoryboard(name: "Main", bundle: Bundle.main)}static func centerViewController() -> DWCenterViewController? {return mainStoryboard().instantiateViewController(withIdentifier: "DWCenterViewController") as? DWCenterViewController}static func leftViewController() -> DWSidePanelViewController? {return mainStoryboard().instantiateViewController(withIdentifier: "LeftViewController") as? DWSidePanelViewController}    
}
復制代碼

在viewDidLoad添加如下：

//添加中間控制器并顯示
centerViewController = UIStoryboard.centerViewController()
centerViewController.delegate = self//將centerViewController包裝在導航控制器中
centerNavigationController = UINavigationController(rootViewController: centerViewController)
//加入centerViewcontroller的視圖
view.addSubview(centerNavigationController.view)
//加入centerViewcontroller的視圖控制器
addChildViewController(centerNavigationController)
centerNavigationController.didMove(toParentViewController: self)
復制代碼

實現協議方法（添加左側容器一起動畫的發生代碼）：

extension DWContainerViewController: DWCenterViewControllerDelegate { 
}
復制代碼

在協議方法中，添加

func toggleLeftPanel() {//如果當前狀態：左邊為展開let notAlreadyExpanded = (currentState != .leftPanelExpanded)if notAlreadyExpanded {addLeftPanelViewController() //添加左邊容器}//左邊容器展開的動畫animateLeftPanel(shouldExpand: notAlreadyExpanded)
}//折疊側邊容器
func collapseSidePanels() {switch currentState {case .leftPanelExpanded:toggleLeftPanel()default:break}
}//左邊的VC
func addLeftPanelViewController() {//guard語句判斷其后的表達式布爾值為false時，才會執行之后代碼塊里的代碼，如果為true，則跳過整個guard語句guard leftViewController == nil else { return }if let vc = UIStoryboard.leftViewController() {vc.animals = DWStar.allActors()addChildSidePanelController(vc)leftViewController = vc}
}func addChildSidePanelController(_ sidePanelController: DWSidePanelViewController) {sidePanelController.delegate = centerViewControllerview.insertSubview(sidePanelController.view, at: 0)addChildViewController(sidePanelController)sidePanelController.didMove(toParentViewController: self)
}//右邊的VC
func addRightPanelViewController() {}func animateLeftPanel(shouldExpand: Bool) {if shouldExpand {currentState = .leftPanelExpandedanimateCenterPanelXPosition(targetPosition: centerNavigationController.view.frame.width - centerPanelExpandedOffset)} else {animateCenterPanelXPosition(targetPosition: 0, completion: { (_) inself.currentState = .bothCollapsedself.leftViewController?.view.removeFromSuperview()self.leftViewController = nil})}
}//檢查是否被告知展開或折疊側面板。如果它應該展開，那么它將設置當前狀態以指示左側面板展開，然后為中央面板設置動畫，以便打開。否則，它將關閉中央面板，然后移除其視圖，并設置當前狀態以指示其關閉。
func animateCenterPanelXPosition(targetPosition: CGFloat, completion: ((Bool) -> Void)? = nil) {UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseOut, animations: {self.centerNavigationController.view.frame.origin.x = targetPosition}, completion: completion)
}func showShadowForCenterViewController(_ shouldShowShadow: Bool) {if shouldShowShadow {centerNavigationController.view.layer.shadowOpacity = 0.8} else {centerNavigationController.view.layer.shadowOpacity = 0.0}
}}
復制代碼

添加手勢，更改DWCenterViewController的導航欄x坐標

// 手勢
// MARK: Gesture recognizer
extension DWContainerViewController: UIGestureRecognizerDelegate {@objc func handlePanGesture(_ recognize: UIPanGestureRecognizer) {let gestureIsDraggingFromLeftToRight = (recognize.velocity(in: view).x > 0)switch recognize.state {case .began:if currentState == .bothCollapsed {if gestureIsDraggingFromLeftToRight {//左邊addLeftPanelViewController()} else {//右邊addRightPanelViewController()}showShadowForCenterViewController(true)}case .changed:if let rview = recognize.view {rview.center.x = rview.center.x + recognize.translation(in: view).xrecognize.setTranslation(CGPoint.zero, in: view)//translationInView:方法獲取View的偏移量  setTranslation:方法設置手勢的偏移量}case .ended: //根據不同的方向移動左或右if let _ = leftViewController,let rview = recognize.view {let hasMovedGreaterThanHalfway = rview.center.x > view.bounds.size.widthanimateLeftPanel(shouldExpand: hasMovedGreaterThanHalfway)}default:break}}
}
復制代碼