iOS中仿QQ侧滑菜单功能

UITabBarController做QQ侧滑菜单效果:

首先要了解UITabBarController的层级结构:

UITabBarController加载的其它UIViewController的View都是被添加在UITransitionView上(这是一个私有API),UITransitionView在self.view的0层,UITabBar在的第一层。

所以我的思路是这样的:

UITransitionView与UITabBar转移到一个新的View1上去,作为滑动的部分;

在View1与self.view之间再添加一个View2,作为菜单的容器;

给View1添加相应的手势响应;

代码:

#import <UIKit/UIKit.h>
@protocol SlideTab_VC_TCVDelegate <NSObject>
@optional
-(void)didOpenMenu:(UIView*)menu;
-(void)didCloseMenu:(UIView*)menu;
@end
@interface SlideTab_VC : UITabBarController
@property(strong, nonatomic)UIView *mMenuV;
@property(weak, nonatomic)id <SlideTab_VC_TCVDelegate> mDelegate;
-(void)openMenu;
-(void)closeMenu;
@end
#import "SlideTab_VC.h"
#define DEVICE_W [UIScreen mainScreen].bounds.size.width
@interface SlideTab_VC ()<UITabBarDelegate>{
 CGFloat _centerMaxX;
}
@property(strong, nonatomic)UIView *mTransitionView;
@property(strong, nonatomic)UITapGestureRecognizer *mTapGester;
@property(assign, nonatomic)BOOL mMenuIsOpen;
@property(strong, nonatomic)UITabBar *mTabBar;
@end
@implementation SlideTab_VC
- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view.
 self.view.backgroundColor = [UIColor purpleColor];
 _mMenuIsOpen = NO;
 _centerMaxX = DEVICE_W*3/2-80.0f;
 [self initMTransitionView];
 [self addGestureForMTransitionView];
}
#pragma mark 菜单懒加载
-(void)setMMenuV:(UIView *)mMenuV{
 if (mMenuV!=nil) {
  _mMenuV = mMenuV;
  [self.view insertSubview:_mMenuV atIndex:0];
 }
}
#pragma mark 打开菜单
-(void)openMenu{
 CGPoint center = self.mTransitionView.center;
 center.x = _centerMaxX;
 [UIView animateWithDuration:0.15f animations:^{
  self.mTransitionView.center = center;
  if (_mDelegate != nil&& [_mDelegate respondsToSelector:@selector(didOpenMenu:)]) {
  [_mDelegate didOpenMenu:_mMenuV];
 }
 }];
 [self mTransitionSubViewsEnable:NO];
}
#pragma mark 关闭菜单
-(void)closeMenu{
 CGPoint center = self.mTransitionView.center;
 center.x = DEVICE_W/2;
 [UIView animateWithDuration:0.15f animations:^{
  self.mTransitionView.center = center;
 } completion:^(BOOL finished) {
  [self mTransitionSubViewsEnable:YES];
  if (_mDelegate != nil&& [_mDelegate respondsToSelector:@selector(didCloseMenu:)]) {
  [_mDelegate didCloseMenu:_mMenuV];
 }
 }];
}
#pragma mark Transition用户交互使能
-(void)mTransitionSubViewsEnable:(BOOL)enable{
 for (UIView *tmp in self.mTransitionView.subviews) {
  tmp.userInteractionEnabled = enable;
 }
 if (enable) {
  [self.mTransitionView removeGestureRecognizer:_mTapGester];
 }else{
  [self.mTransitionView addGestureRecognizer:_mTapGester];
 }
}
#pragma mark 配置mTransitionView
-(void)initMTransitionView{
 for (UIView *tmp in self.view.subviews) {
  [tmp removeFromSuperview];
  [self.mTransitionView addSubview:tmp];
 }
 [self.view addSubview:self.mTransitionView];
}
#pragma mark 拖动手势动作
-(void)panAction:(UIPanGestureRecognizer*)pan{
 CGPoint location = [pan translationInView:pan.view.superview];
 CGPoint center = self.mTransitionView.center;
 if (pan.state==UIGestureRecognizerStateEnded) {
  if (center.x<_centerMaxX*0.5+DEVICE_W*0.25){
   [self closeMenu];
  }else{
   [self openMenu];
  }
 }else if(pan.state==UIGestureRecognizerStateChanged){
  if (location.x<0) {//向左滑
   center.x = center.x+location.x<=DEVICE_W/2? DEVICE_W/2 : center.x+location.x;
  }else{
   center.x = center.x+location.x>=_centerMaxX? _centerMaxX : center.x+location.x;
  }
  self.mTransitionView.center = center;
  [pan setTranslation:CGPointMake(0, 0) inView:pan.view.superview];
 }
}
#pragma mark 添加手势
-(void)addGestureForMTransitionView{
 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
 [_mTransitionView addGestureRecognizer:pan];
 _mTapGester = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction)];
}
#pragma mark--懒加载
-(UIView *)mTransitionView{
 if (_mTransitionView==nil) {
  _mTransitionView = [[UIView alloc]initWithFrame:self.view.bounds];
 }
 return _mTransitionView;
}
-(void)tapAction{
 CGFloat x = _mTransitionView.center.x;
 if (x>=_centerMaxX) {
  [self closeMenu];
 }
}
@end

总结

以上所述是小编给大家介绍的iOS中仿QQ侧滑菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • IOS中Swift仿QQ最新版抽屉侧滑和弹框视图

    导读 简单用Swift写了一个抽屉效果,可以直接使用并且简单; 很多软件都运了抽屉效果,比如qq的左抽屉,英雄联盟,滴滴打车,和uber等等都运用了抽屉; 效果 iOS抽屉式结构实现分析 主要是在控制器的View上添加了两个View,一个左侧leftView和一个mainView.这里我们自定义一个DrawerViewController,init(mainVC: UIViewController, leftMenuVC: UIViewController, leftWidth: CGFloat

  • LRecyclerView侧滑iOS阻塞效果不完整的解决办法

    最近项目中用到下拉刷新与侧滑删除需要同时实现的情形, 所以对LRecyclerView进行了一些了解, 在测试侧滑功能时, 发现iOS阻塞效果不完整, 即当条目处于侧滑状态时, 点击该条目的非侧滑位置时无法自动关闭, 于是对LRecyclerView项目中的自定义 SwipeMenuView进行了分析, 发现在dispatchTouchEvent的down事件中进行了如下的条件判断: if (mViewCache != this) { mViewCache.smoothClose(); mVie

  • iOS实现侧滑栏效果

    效果 源码:https://github.com/YouXianMing/iOS-Project-Examples 中的 SideViewController // // ViewController.m // SideViewController // // Created by YouXianMing on 16/6/6. // Copyright © 2016年 YouXianMing. All rights reserved. // #import "ViewController.h&q

  • iOS中仿QQ侧滑菜单功能

    UITabBarController做QQ侧滑菜单效果: 首先要了解UITabBarController的层级结构: UITabBarController加载的其它UIViewController的View都是被添加在UITransitionView上(这是一个私有API),UITransitionView在self.view的0层,UITabBar在的第一层. 所以我的思路是这样的: UITransitionView与UITabBar转移到一个新的View1上去,作为滑动的部分: 在View1

  • Android使用Item Swipemenulistview实现仿QQ侧滑删除功能

    大家都用过QQ,肯定有人好奇QQ滑动删除Item的效果是怎样实现的,其实我们使用Swipemenulistview就可以简单的实现.先看看我们项目中的效果: 使用的时候可以把Swipemenulistview作为一个library,也可以把Swipemenulistview的源码拷贝到我们的项目中来,使用步骤大致可以分为三步:1.在布局中配置:2.在Java代码中初始化配置:3.按钮点击事件的处理  1.在布局中配置 xml布局文件中只需要简单使用这个自定义的ListView就行了,需要注意的是

  • Android自定义View 仿QQ侧滑菜单的实现代码

    先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

  • Android_UI 仿QQ侧滑菜单效果的实现

    相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析. 主要思路分析 1.首先写一个SlideMenu 继承一个帧布局FrameLayout ,因为如果继承自ViewGroup的话,需要我们自己来实现onMeasure方法,而该方法的实现一般比较麻烦且没有必要,所以选择继承系统的已有的控件FrameLayout,不用其他控件是因为FrameLayout最轻量级 2.在布

  • 使用RecylerView完成拖动排序高仿qq侧滑删除功能

    最近使用到Recylerview完成拖动排序,侧滑删除,在此记录一下. 需要使用到:ItemTouchHelper.Callback这个类. 效果图: 在有RecylerView的Activity中,除了设置Adapter还需要做的事情有: MyItemTouchHelperCallback callback = new MyItemTouchHelperCallback(adapter); //此类继承ItemTouchHelper.Callback,这是帮助处理RecylerView拖动侧滑

  • Android自定义布局实现仿qq侧滑部分代码

    自定义布局实现仿qq侧滑部分Android代码,供大家参考,具体内容如下 源码DEMO地址:https://github.com/applelili/ImitationQQ 实现说明: 通过自定义布局实现: SlidingLayout继承于 HorizontalScrollView /** * Created by Administrator on 2017/3/29. */ public class SlidingLayout extends HorizontalScrollView{ /**

  • Android实现QQ侧滑菜单效果

    QQ侧滑菜单的Android实现代码,供大家参考,具体内容如下 实现逻辑 1.先写出菜单页面和主页面的布局 2.创建一个类,继承RelativeLayout,实现里面的onLayout 3.在主布局文件中添加子空间 4.在onLayout里面获取子控件的宽和高,并对子控件的位置进行绘制 5.给子布局设置滑动事件,分别在手指落下\移动\抬起的时候,获取手指的位置 6.在手指移动的过程中,对菜单页面的移动距离进行限制,防止菜单页面跑出指定的页面 7.在手指抬起的时候,判定一下手指移动的距离,如果移动

  • iOS高仿微信表情输入功能代码分享

    最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实现的过程中遇到了很多小问题,接下来会一一介绍遇到过的坑.先上一张效果图: 一.实现表情选择View(WKExpressionView) 具体的实现就不细说了,主要功能就是点击表情时,将对应表情的图片名称通知给delegate. 二.实现表情textView(WKExpressionTextView)

  • Android高仿QQ小红点功能

    先给大家展示下效果图: 代码已上传至Github:高仿QQ小红点,如对您有帮助,欢迎star~感谢 绘制贝塞尔曲线: 主要是当在一定范围内拖拽时算出固定圆和拖拽圆的外切直线以及对应的切点,就可以通过path.quadTo()来绘制二阶贝塞尔曲线了~ 整体思路: 1.当小红点静止时,什么都不做,只需要给自定义小红点QQBezierView(extends TextView)添加一个.9文件当背景即可 2.当滑动时,通过getRootView()获得顶级根View,然后new一个DragView (

  • Android解决viewpager嵌套滑动冲突并保留侧滑菜单功能

    重写子pagerview的dispatchTouchEvent方法,在返回前添加一句getParent().requestDisallowInterceptTouchEvent(true)中断掉事件的传递,类如下 public class SupperViewPager extends ViewPager { private int screenWidth;//屏幕宽度 public SupperViewPager(Context context) { super(context); } pub

随机推荐