IOS中Swift仿QQ最新版抽屜側(cè)滑和彈框視圖
導(dǎo)讀
簡單用Swift寫了一個抽屜效果,可以直接使用并且簡單;
很多軟件都運(yùn)了抽屜效果,比如qq的左抽屜,英雄聯(lián)盟,滴滴打車,和uber等等都運(yùn)用了抽屜;
效果
iOS抽屜式結(jié)構(gòu)實現(xiàn)分析
主要是在控制器的View上添加了兩個View,一個左側(cè)leftView和一個mainView。這里我們自定義一個DrawerViewController,init(mainVC: UIViewController, leftMenuVC: UIViewController, leftWidth: CGFloat)設(shè)置,一個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的位置)方便以后調(diào)用。
//MARK: - 打開左側(cè)菜單 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: - 關(guān)閉左側(cè)菜單 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) }
在平移手勢調(diào)用的方法中,通過偏移量來確定mainView的frame,實現(xiàn)動畫效果
- 首先通過pan.translation(in: pan.view).x方法獲取偏移量,通過偏移量的正負(fù)確定拖動的方向
- 當(dāng)手指松開后需要根據(jù)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() } } }
關(guān)閉遮蓋手勢
//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)的視圖控制器提供高級視圖的轉(zhuǎ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 }
具體代碼可以從這里下載:WLDrawerView_jb51.rar
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解析iOS應(yīng)用的UI開發(fā)中懶加載和xib的簡單使用方法
這篇文章主要介紹了解析iOS應(yīng)用的UI開發(fā)中懶加載和xib的簡單使用方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01iOS之UITableView計時器的實現(xiàn)方式總結(jié)(NSTimer、DispatchSource、CADisplayLi
這篇文章主要給大家介紹了關(guān)于iOS之UITableView計時器的實現(xiàn)方式,其中包括NSTimer、DispatchSource、CADisplayLink等方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-12-12iOS開發(fā)教程之識別圖片中二維碼功能的實現(xiàn)
長按識別二維碼這個功能相信對大家來說都不陌生,最近工作中就遇到了這個需求,所以下面這篇文章主要給大家介紹了關(guān)于利用iOS識別圖片中二維碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07iOS overFullScreen與fullScreen區(qū)別分析
這篇文章主要介紹了iOS overFullScreen與fullScreen區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11深入解析iOS應(yīng)用開發(fā)中九宮格視圖布局的相關(guān)計算方法
這篇文章主要介紹了iOS應(yīng)用開發(fā)中九宮格視圖布局的計算方法,包括item尺寸和坐標(biāo)等一系列影像布局的數(shù)值相關(guān)計算的講解,需要的朋友可以參考下2016-03-03