^{<noscript id="zbmto"></noscript>}

iOS模仿QQ側(cè)邊欄的實(shí)現(xiàn)方法實(shí)例

2019-10-21 18:42:50

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前言

新版QQ在UI方面做了不少更新，其中一個比較炫酷的效果就是其側(cè)滑導(dǎo)航欄。雖然這種UI已經(jīng)是被模仿來模仿去爛掉牙了，雖然有統(tǒng)計說這種設(shè)計的用戶體驗并不好。但是我本人還是非常喜歡這種效果的，下面就來一起看看詳細(xì)的實(shí)現(xiàn)方法吧。

分析：QQ側(cè)邊欄都用了哪些手勢，有哪些效果？

QQ的主頁是個UITabbarController，暫且稱為MainVc左側(cè)邊緣添加的手勢為邊緣手勢UIScreenEdgePanGestureRecognizer
當(dāng)邊緣手勢滑動到屏幕中間時判斷MainVc移動的距離超過屏幕中間，超過就顯示側(cè)邊欄，沒超過會自動歸位。
MainVc移動的時候會有一層黑色的遮罩，遮罩的透明度和MainVc移動的距離有關(guān)。
當(dāng)側(cè)邊欄出現(xiàn)的時候，此時MainVc添加的手勢更換為平移手勢UIPanGestureRecognizer。判斷MainVc移動的距離和第二步一樣。
添加的手勢和系統(tǒng)的邊緣手勢沖突如何處理。
當(dāng)側(cè)邊欄隱藏的時候，給MainVc一個很大的速度，會立即顯示側(cè)邊欄。當(dāng)側(cè)邊欄出現(xiàn)的時候，給側(cè)邊欄一個很大的速度，會立即顯示MainVc。

ios,qq側(cè)邊欄,仿qq側(cè)邊欄,側(cè)邊欄

層級關(guān)系如上圖：MainVc 在側(cè)邊欄上面，只需要添加手勢來控制側(cè)邊欄的顯示與隱藏即可。

代碼

 [self addChildViewController:self.leftVc]; [self addChildViewController:self.mainVc];   [self.mainVc didMoveToParentViewController:self];   [self.leftVc didMoveToParentViewController:self];//添加屏幕邊緣平移手勢 [self.mainVc.view addGestureRecognizer:self.pan1];   //添加平移手勢 [self.mainVc.view addGestureRecognizer:self.pan2];   //添加點(diǎn)擊手勢 [self.mainVc.view addGestureRecognizer:self.tap];

關(guān)于手勢的處理，模擬一個側(cè)滑的臨界速度，姑且定位1000.

#pragma mark---手勢處理-(void)screenGesture:(UIPanGestureRecognizer *)pan{ //移動的距離 CGPoint point = [pan translationInView:pan.view]; //移動的速度 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) {  //判斷手勢  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)于添加的手勢和系統(tǒng)的邊緣手勢沖突的問題，解決如下:

在子類化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的手勢沖突---(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{ if (self.childViewControllers.count <= 1) {  return NO; } return YES;}

發(fā)現(xiàn)QQ的二級頁面添加了全屏手勢，所以也把UINavigationController+FDFullscreenPopGesture.h添加了進(jìn)去，發(fā)現(xiàn)原來沖突的手勢也不沖突了。

效果圖：

ios,qq側(cè)邊欄,仿qq側(cè)邊欄,側(cè)邊欄