类似QQ侧滑菜单功能实现

之前的那文章简单实现了菜单侧拉功能,但是做不到像QQ那样导航条和tabBar一起移动。。。之后在网上找资料,有了思路,就自个写了个demo试试水。

先创建QHLMainController控制器，并把它设置成app的根控制器。

在QHLMainController控制器中,懒加载添加一个tableView,并对tableView设置相对应的属性以及frame(frame的x设置为一个负值)！！添加一个tabBar控制器,并

为tabBar控制器添加4个子控制器(分别为first,two,three,four)！！！并对tabBar控制器的view的frame 添加一个KVO监听,监听当tabBar控制器的view的frame的改

变,并执行相对应的代码。在tabBar控制器的第一个子控制器first控制器中，添加拖动手势，当拖动时候，根据拖动的偏移量来改变自身tabBar控制器的view的frame的

值。当偏移量达到最大的时候给view添加点击手势,当点击时候,使view的frame变回初始值！！当frame变回初值的时候,移除点击手势。

在QHLMainController控制器中

 - (void)viewDidLoad {

     [super viewDidLoad];

     //添加懒加载的tableView

     [self.view addSubview:self.tableView];

     //设置主界面

     [self setUpMainUI];

 }

 /**

  *  设置主界面

  */

 - (void)setUpMainUI {

     //创建tabBar控制器并添加到根控制器中

     QHLTabBarController *tabVc = [[QHLTabBarController alloc] init];

     self.tabVc = tabVc;

     [self addChildViewController:tabVc];

     [self.view addSubview:tabVc.view];

     //对tabBar控制器view的frame属性添加一个监听

     [tabVc.view addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];

 }

 /**

  *  tabBar控制器view的frame属性的监听事件

  */

 #define QHLViewControllerMaxOffsetX 250

 #define QHLLeftViewOriginX -50

 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {

     //计算偏移量

     CGFloat offsetX =QHLLeftViewOriginX - QHLLeftViewOriginX * (self.tabVc.view.frame.origin.x) / QHLViewControllerMaxOffsetX;

     //改变tableView的frame

     CGRect frame = self.tableView.frame;

     frame.origin.x = offsetX;

     self.tableView.frame = frame;

 }

tableView的懒加载和dataSource方法就不放上来了。

在tabBar控制器的子控制器first控制器中,先添加枚举型的结构体

 typedef NS_ENUM(NSInteger, QHLViewControllerState) {

     QHLViewControllerStateClosed = ,

     QHLViewControllerStateOpening,

     QHLViewControllerStateOpened,

     QHLViewControllerStateClosing

 };

首先在viewWillAppear:中添加拖动手势，并添加到当前view中,然后在viewWillDisappear:方法中把拖动手势移除掉。

在viewDidLoad方法中:

1.把自身的state状态设置成QHLViewControllerStateClosed

2.添加navigationItem的leftBarButtonItem:封装一个UIButton,设置相关的属性设置、一个背景色以及添加一个点击方法

点击方法如下:

 /**

  *  leftItem的点击事件

  */

 - (void)leftItemDidClick:(UIButton *)leftItem {

     if (self.state == QHLViewControllerStateClosed) {

         [self animatingOpen];

     } else {

         [self animatingClose];

     }

 }

拖动手势事件方法实现:

 /**

  *  拖动手势的实现方法

  */

 - (void)panGestureRecognized:(UIPanGestureRecognizer *)panGestureRecognizer {

     CGPoint location = [panGestureRecognizer translationInView:self.view];  //位置

     CGRect frame = self.tabBarController.view.frame;

     //获取当前拖动手势的状态

     UIGestureRecognizerState state = panGestureRecognizer.state;

     switch (state) {

             //拖动手势开始时候

         case UIGestureRecognizerStateBegan:

             self.beginLocation = location; //开始位置

             if (self.state == QHLViewControllerStateClosed) {

                 [self willOpen];

             } else {

                 [self willClose];

             }

             break;

             //拖动手势进行中

         case UIGestureRecognizerStateChanged:

         {

             CGFloat offsetX = ;   //偏移量X

             //根据自身的state来设置不同的offsetX

             if (self.state == QHLViewControllerStateOpening) {  //正在打开

                 offsetX = location.x - self.beginLocation.x;

             } else {   //正在关闭

                 offsetX = QHLViewControllerMaxOffsetX - (self.beginLocation.x - location.x);

             }

             if (offsetX >= QHLViewControllerMaxOffsetX) { //偏移量超过最大偏移值时

                 frame.origin.x = QHLViewControllerMaxOffsetX;

             } else if (offsetX <= ) { //只有在关闭时候才会出现偏移量小于0的情况,而此种情况下,偏移量小于0,会使自身的x值小于0

                 frame.origin.x = ;

             } else { //正在打开或者正在关闭

                 frame.origin.x = offsetX;

             }

             //计算透明度

             CGFloat alpha =  - offsetX / QHLViewControllerMaxOffsetX;

             self.leftItem.alpha = alpha; //设置导航条左侧item的透明度

             self.tabBarController.view.frame = frame;

             break;

         }

             //拖动手势结束时

         case UIGestureRecognizerStateEnded:

             if (self.state == QHLViewControllerStateOpening) { //正在打开

                 if (frame.origin.x >= QHLViewControllerMaxOffsetX / ) { //判断此时的偏移量

                     [self animatingOpen];

                 } else {

                     [self animatingClose];

                 }

             } else { //正在关闭

                 if (frame.origin.x >= QHLViewControllerMaxOffsetX / ) { //判断此时的偏移量

                     [self animatingOpen];

                 } else {

                     [self animatingClose];

                 }

             }

             break;

         default:

             break;

     }

 }

点击手势事件方法实现:

 - (void)tapGestureRecognized:(UITapGestureRecognizer *)tapGestureRecognizer {

     //点击事件  自动缩回侧拉界面

     [self animatingClose];

 }

当tabBar控制器的view在偏移的时候,会调用下面的几个方法:

 /**

  * willOpen

  */

 - (void)willOpen {

     self.state = QHLViewControllerStateOpening;

 }

 /**

  * opened

  */

 - (void)opened {

     self.state = QHLViewControllerStateOpened;

     //设置点击手势

     self.tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureRecognized:)];

     [self.view addGestureRecognizer:self.tapGestureRecognizer];

 }

 /**

  * willClose

  */

 - (void)willClose {

     self.state = QHLViewControllerStateClosing;

 }

 /**

  * closed

  */

 - (void)closed {

     self.state = QHLViewControllerStateClosed;

     [self.view removeGestureRecognizer:self.tapGestureRecognizer];

 }

 /**

  *  以动画形式打开

  */

 - (void)animatingOpen {

     [UIView animateWithDuration:0.5 delay: usingSpringWithDamping:1.0 initialSpringVelocity:0.7 options:UIViewAnimationOptionCurveLinear animations:^{

         self.tabBarController.view.frame = CGRectMake(QHLViewControllerMaxOffsetX, , self.view.frame.size.width, self.view.frame.size.height);

         self.leftItem.alpha = ;

     } completion:^(BOOL finished) {

         [self opened];//改变自身的state状态以及移除点击手势

     }];

 }

 /**

  *  以动画形式关闭

  */

 - (void)animatingClose {

     [UIView animateWithDuration:0.5 delay: usingSpringWithDamping:1.0 initialSpringVelocity:0.7 options:UIViewAnimationOptionCurveLinear animations:^{

         self.tabBarController.view.frame = CGRectMake(, , self.view.frame.size.width, self.view.frame.size.height);

         self.leftItem.alpha = ;

     } completion:^(BOOL finished) {

         [self closed];  //改变自身的state状态以及添加点击手势

     }];

 }

模拟器测试了下,基本实现了和QQ左上角的导航条item点击触发的相类似的功能~。~

如果路过的大神有更好的实现方法求指导下！！！！

巴特西

类似QQ侧滑菜单功能实现

最新文章

热门文章