導讀
- 簡單用Swift寫了一個抽屜效果,可以直接使用并且簡單;
- 很多軟件都運了抽屜效果咱扣，比如qq的左抽屜，英雄聯(lián)盟,滴滴打車，和uber等等都運用了抽屜;
- GitHub上有代表性的是MMDrawerController.
- GitHub地址：https://github.com/wangliujiayou/DrawerView 歡迎Star.
效果
image.gif
iOS抽屜式結構實現(xiàn)分析
- 主要是在控制器的View上添加了兩個View,一個左側leftView和一個mainView躯舔。這里我們自定義一個DrawerViewController，
init(mainVC: UIViewController, leftMenuVC: UIViewController, leftWidth: CGFloat)設置兔港，一個mainVC庸毫，一個leftMenuVC，和一個寬度,將mainVC和leftMenuVC的view添加到controller的view上（menuVC的view在下面）衫樊。
view.addSubview(leftMenuVC.view)
view.addSubview(mainVC.view)
addChildViewController(leftMenuVC)
addChildViewController(mainVC)
- 然后首先實現(xiàn)點擊方法openLeftMenu和closeLeftMenu（這兩個方法主要是計算mainVC的view的位置）方便以后調用飒赃。
//MARK: - 打開左側菜單
func openLeftMenu() {
UIView.animate(withDuration: 0.25, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
self.leftVC?.view.transform = CGAffineTransform.identity
self.mainVC?.view.transform = CGAffineTransform(translationX: self.maxWidth, y: 0)
}, completion: {
(finish: Bool) -> () in
self.mainVC?.view.addSubview(self.coverBtn)
})
}
//MARK: - 關閉左側菜單
func closeLeftMenu() {
UIView.animate(withDuration: 0.25, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
self.leftVC?.view.transform = CGAffineTransform(translationX: -self.maxWidth, y: 0)
self.mainVC?.view.transform = CGAffineTransform.identity
}, completion: {
(finish: Bool) -> () in
self.coverBtn.removeFromSuperview()
})
}
- 最后給mainVC的view添加屏幕邊緣手勢，實現(xiàn)mainVC的view跟隨手指移動科侈。
循環(huán)遍歷view給每一個一級視圖添加手勢
for childViewController in (mainVC?.childViewControllers)! {
addScreenEdgePanGestureRecognizerToView(view: childViewController.view)
}
//MARK: - 添加屏幕邊緣手勢
private func addScreenEdgePanGestureRecognizerToView(view: UIView) {
let pan = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(edgPanGesture(_:)))
pan.edges = UIRectEdge.left
view.addGestureRecognizer(pan)
}
-
在平移手勢調用的方法中载佳，通過偏移量來確定mainView的frame，實現(xiàn)動畫效果
- 首先通過
pan.translation(in: pan.view).x方法獲取偏移量,通過偏移量的正負確定拖動的方向 - 當手指松開后需要根據mainView的x值確定其視圖是定位到原始位置還是其縮放的位置
- 首先通過
打開手勢
//MARK: - 屏幕左邊緣手勢
func edgPanGesture(_ pan: UIScreenEdgePanGestureRecognizer) {
let offsetX = pan.translation(in: pan.view).x
if pan.state == UIGestureRecognizerState.changed && offsetX <= maxWidth {
mainVC?.view.transform = CGAffineTransform(translationX: max(offsetX, 0), y: 0)
leftVC?.view.transform = CGAffineTransform(translationX: -maxWidth + offsetX, y: 0)
} else if pan.state == UIGestureRecognizerState.ended || pan.state == UIGestureRecognizerState.cancelled || pan.state == UIGestureRecognizerState.failed {
if offsetX > screenW * 0.5 {
openLeftMenu()
} else {
closeLeftMenu()
}
}
}
- 關閉遮蓋手勢
//MARK: - 遮蓋按鈕手勢
func panCloseLeftMenu(_ pan: UIPanGestureRecognizer) {
let offsetX = pan.translation(in: pan.view).x
if offsetX > 0 {return}
if pan.state == UIGestureRecognizerState.changed && offsetX >= -maxWidth {
let distace = maxWidth + offsetX
mainVC?.view.transform = CGAffineTransform(translationX: distace, y: 0)
leftVC?.view.transform = CGAffineTransform(translationX: offsetX, y: 0)
} else if pan.state == UIGestureRecognizerState.ended || pan.state == UIGestureRecognizerState.cancelled || pan.state == UIGestureRecognizerState.failed {
if offsetX > screenW * 0.5 {
openLeftMenu()
} else {
closeLeftMenu()
}
}
}
UIPresentationController簡介
-
UIPresentationController是 iOS8 新增的一個API臀栈，蘋果的官方定義是：對象為所呈現(xiàn)的視圖控制器提供高級視圖的轉換管理（從呈現(xiàn)視圖控制器的時間直到它被消除期間）; - iOS 8以前就是自定義view,去畫一個三角和長方形;
- 簡單直接的方法用圖片
直接貼代碼不講廢話
@IBAction func showAlert(_ sender: UIBarButtonItem) {
let popVC = PopViewController()
popVC.modalPresentationStyle = UIModalPresentationStyle.popover
popVC.popoverPresentationController?.barButtonItem = sender
popVC.popoverPresentationController?.delegate = self
//可控制三角顏色
popVC.popoverPresentationController?.backgroundColor = UIColor.white
present(popVC, animated: true, completion: nil)
}
func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
return UIModalPresentationStyle.none
}
func popoverPresentationControllerShouldDismissPopover(_ popoverPresentationController: UIPopoverPresentationController) -> Bool {
return true
}
具體代碼可以從這里下載,后續(xù)還有更實用的功能.
