您好,登錄后才能下訂單哦!
這篇文章主要介紹iOS如何實(shí)現(xiàn)模仿QQ側(cè)邊欄,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
分析:QQ側(cè)邊欄都用了哪些手勢(shì),有哪些效果?
QQ的主頁是個(gè)UITabbarController,暫且稱為MainVc左側(cè)邊緣添加的手勢(shì)為邊緣手勢(shì)UIScreenEdgePanGestureRecognizer
當(dāng)邊緣手勢(shì)滑動(dòng)到屏幕中間時(shí)判斷MainVc移動(dòng)的距離超過屏幕中間,超過就顯示側(cè)邊欄,沒超過會(huì)自動(dòng)歸位。
MainVc移動(dòng)的時(shí)候會(huì)有一層黑色的遮罩,遮罩的透明度和MainVc移動(dòng)的距離有關(guān)。
當(dāng)側(cè)邊欄出現(xiàn)的時(shí)候,此時(shí)MainVc添加的手勢(shì)更換為平移手勢(shì)UIPanGestureRecognizer。判斷MainVc移動(dòng)的距離和第二步一樣。
添加的手勢(shì)和系統(tǒng)的邊緣手勢(shì)沖突如何處理。
當(dāng)側(cè)邊欄隱藏的時(shí)候,給MainVc一個(gè)很大的速度,會(huì)立即顯示側(cè)邊欄。當(dāng)側(cè)邊欄出現(xiàn)的時(shí)候,給側(cè)邊欄一個(gè)很大的速度,會(huì)立即顯示MainVc。
層級(jí)關(guān)系如上圖:MainVc 在側(cè)邊欄 上面,只需要添加手勢(shì)來控制側(cè)邊欄的顯示與隱藏即可。
代碼
[self addChildViewController:self.leftVc]; [self addChildViewController:self.mainVc]; [self.mainVc didMoveToParentViewController:self]; [self.leftVc didMoveToParentViewController:self]; //添加屏幕邊緣平移手勢(shì) [self.mainVc.view addGestureRecognizer:self.pan1]; //添加平移手勢(shì) [self.mainVc.view addGestureRecognizer:self.pan2]; //添加點(diǎn)擊手勢(shì) [self.mainVc.view addGestureRecognizer:self.tap];
關(guān)于手勢(shì)的處理,模擬一個(gè)側(cè)滑的臨界速度,姑且定位1000.
#pragma mark---手勢(shì)處理 -(void)screenGesture:(UIPanGestureRecognizer *)pan{ //移動(dòng)的距離 CGPoint point = [pan translationInView:pan.view]; //移動(dòng)的速度 CGPoint verPoint = [pan velocityInView:pan.view]; self.mainVc.view.lx_x += point.x; //邊界限定 if (self.mainVc.view.lx_x >= MAXLEFTSLIDEWIDTH) { self.mainVc.view.lx_x = MAXLEFTSLIDEWIDTH; } if (self.mainVc.view.lx_x <= 0) { self.mainVc.view.lx_x = 0; } //蒙版的陰影限定 self.maskView.alpha = self.mainVc.view.lx_x /MAXLEFTSLIDEWIDTH; if (pan.state == UIGestureRecognizerStateEnded) { //判斷手勢(shì) if (pan == self.pan1) { if (verPoint.x > MAXSPEED) { [self showLeftVc]; }else{ if (self.mainVc.view.lx_x >= Device_Width/2) { [self showLeftVc]; }else{ [self hideLeftVc]; } } }else{ if (verPoint.x < - MAXSPEED) { [self hideLeftVc]; }else{ if (self.mainVc.view.lx_x >= Device_Width/2) { [self showLeftVc]; }else{ [self hideLeftVc]; } } } } [pan setTranslation:CGPointZero inView:pan.view]; }
關(guān)于添加的手勢(shì)和系統(tǒng)的邊緣手勢(shì)沖突的問題,解決如下:
在子類化UINavigationController
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.navigationBar.translucent = YES; self.navigationBar.barTintColor = LXMainColor; self.interactivePopGestureRecognizer.delegate = self; } #pragma mark--防止與添加到tabbar的手勢(shì)沖突-- -(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{ if (self.childViewControllers.count <= 1) { return NO; } return YES; }
發(fā)現(xiàn)QQ的二級(jí)頁面添加了全屏手勢(shì),所以也把UINavigationController+FDFullscreenPopGesture.h添加了進(jìn)去,發(fā)現(xiàn)原來沖突的手勢(shì)也不沖突了。
效果圖:
以上是“iOS如何實(shí)現(xiàn)模仿QQ側(cè)邊欄”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。