iOS-小demo--简易的抽屉效果封装

芙蓉落尽天涵水,日暮沧波起!<藤藤蛇>

效果图:

简单侧滑抽屉效果封装.gif

简单的思路说明:

想要的效果就是, 向右滑动屏幕的时候左侧的视图(绿色)会随着拉动出现, 同时会有一个透明度的改变! 实现思路大致就是要在最开始的界面(View)上添加平移手势, 根据手势滑动的偏移量来控制左侧(绿色)视图的位置, 同时改变在蓝色上面一层的遮挡视图(红色)的透明度! 当绿色的菜单栏回去的时候隐藏遮挡的(红色)视图. 当绿色菜单在的时候, 点击红色视图,同样会收起绿色菜单!只需要在遮挡的红色视图上添加点击手势! 并执行响应的操作即可.

上代码:

定义的宏:

// 屏幕的宽 高
#define kSCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define kSCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
// 菜单宽度
#define MENU_WIDTH (kSCREEN_WIDTH * 1 / 3)
// 遮挡视图的颜色
#define MASK_COLOR [UIColor redColor]
// 遮挡的最大透明度
#define MASK_MAX_ALPHA 0.5

定义的相关属性

// 容纳 侧滑 的视图控制器
@property (nonatomic, strong) UIViewController *containerVC;
// 滑动时候 遮盖 在视图控制器上的一层 View
@property (nonatomic, strong) UIView *maskView;

1: 初始化方法这里用单例方法一般 App 只有一个设置的侧滑视图

// 构造左侧  整体的 View 整个工程只有一个 侧滑  这里我用了 Xib 主要是容易添加一些想要的效果
+ (instancetype)shareSliderMenuView
{
    static PP_SlideMenuView *slideMenuView = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        slideMenuView = [[NSBundle mainBundle] loadNibNamed:@"PP_SlideMenuView" owner:self options:nil].firstObject;
        slideMenuView.frame = CGRectMake(- MENU_WIDTH, 0, MENU_WIDTH, kSCREEN_HEIGHT);
    });
    return slideMenuView;
}

2: 绑定控制器确定在哪里展示主要是为了封装

// 绑定控制器 并进行相关的设置
- (void)bindWithViewController:(UIViewController *)rootVc
{
    __weak UIViewController *tempVc = rootVc;
        self.containerVC = tempVc;// 设置为视图的一个属性方便在不同地方使用
        self.isMenuViewHidden = YES;// 记录开始状态为 隐藏菜单视图
        // 创建遮挡的 View
        self.maskView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        _maskView.backgroundColor = MASK_COLOR;
        _maskView.hidden = YES; // 只有在滑动菜单出现时候才会  出现 MaskView 遮挡
        [_containerVC.view addSubview:_maskView]; // 遮挡的 加到 控制器 view 上
        
        // 使用 KVO 监控 菜单View 的位置变化  然后改变遮挡视图的 透明度
        [self addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];
        // 给视图控制器上的  View 添加平移 手势 以及 遮挡的 MaskView 加点击手势
        [self addOurGestureRecognizer]; 
}```
```code

#pragma mark ------>> 给视图控制器上的  View 添加平移 手势 以及 遮挡的 MaskView 加点击手势 <<------
- (void)addOurGestureRecognizer
{
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panContainViewAction:)]; // 右滑动时候  出来菜单
    pan.delegate = self;
    [_containerVC.view addGestureRecognizer:pan];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHiddenMenuAction:)]; // 要是菜单在  点击 MaskView 隐藏菜单
    [_maskView addGestureRecognizer:tap];

}
#pragma mark ------>> 滑动视图控制器的 View 的时候触发方法 <<------
- (void)panContainViewAction:(UIPanGestureRecognizer *)pan
{
    // 偏移量
    CGPoint offSet = [pan translationInView:_containerVC.view];
    // 平移进行时候
    if (pan.state == UIGestureRecognizerStateBegan || pan.state == UIGestureRecognizerStateChanged)
    {
        if (offSet.x > 0)//向右滑动
        {
            if (self.frame.origin.x == 0)
            {
                return;
            }
            CGFloat tempX = self.frame.origin.x + offSet.x;// 算出更新的 x
            if (tempX <= 0 )
            {// 小于 0 就随着拖动移动就好
                self.frame = CGRectMake(tempX, 0, MENU_WIDTH, kSCREEN_HEIGHT);
            }else
            {// 都出来之后 就让它完全展示就好  别滑到太靠右地方
                self.frame = CGRectMake(0, 0, MENU_WIDTH, kSCREEN_HEIGHT);
            }
        }else
        {// 向左滑动
            CGFloat tempX = self.frame.origin.x + offSet.x;// 算出更新的 x
            self.frame = CGRectMake(tempX, 0, MENU_WIDTH, kSCREEN_HEIGHT);
        }
    }else
    {// 在这里判断要 显示还是隐藏
        if (self.frame.origin.x >= - MENU_WIDTH * 0.5)
        {
            [self inputOfSightMenuView];
        }else
        {
            [self outOfSightMenuView];
        }
    }
    // 清除偏移量
    [pan setTranslation:(CGPointZero) inView:_containerVC.view];
    //self.maskView.frame = CGRectMake(CGRectGetMaxX(self.frame), 0, kSCREEN_WIDTH, kSCREEN_HEIGHT);
}

// 点击遮挡  收起菜单
- (void)tapHiddenMenuAction:(UITapGestureRecognizer *)tap
{
    [self outOfSightMenuView];
}

#pragma mark ------>> MenuView 视图 移出 或者 移进 视线  <<------
// 放到视线之外
- (void)outOfSightMenuView
{
    [UIView animateWithDuration:0.2 animations:^{
        self.frame = CGRectMake(- MENU_WIDTH, 0, MENU_WIDTH, kSCREEN_HEIGHT);
        self.isMenuViewHidden = YES;
        self.maskView.hidden = YES;
    }];
}
// 放到视线之内
- (void)inputOfSightMenuView
{
    [UIView animateWithDuration:0.2 animations:^{
        self.frame = CGRectMake(0, 0, MENU_WIDTH, kSCREEN_HEIGHT);
    } completion:^(BOOL finished) {
        self.maskView.hidden = NO;
        self.maskView.alpha = MASK_MAX_ALPHA;
    }];

}

#pragma mark ------>> KVO 监控 菜单View 的位置变化 <<------
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    if ([keyPath isEqualToString:@"frame"])
    {
        CGRect newFrame = [change[@"new"] CGRectValue];
        CGFloat newFrameX = newFrame.origin.x;
        // 判断是否需要改变 遮挡的透明度
        if (newFrameX != - MENU_WIDTH)
        {
            _maskView.hidden = NO;// 出现遮挡
            // 改变遮挡的透明度
            _maskView.alpha = (newFrameX + MENU_WIDTH) / MENU_WIDTH * MASK_MAX_ALPHA;
        }else
        {
            _maskView.hidden = YES;
        }
    }
}

#pragma mark ------>> 手势冲突时候 调用的手势代理 <<------
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    if ([otherGestureRecognizer.view isKindOfClass:[UITableView class]]) {
        return NO;
    }
    return YES;
}

最后在控制器调用

PP_SlideMenuView *slidetView = [PP_SlideMenuView shareSliderMenuView];
   
 [slidetView bindWithViewController:self];

 [self.view addSubview:slidetView];

PS: 最近忙着写点小项目,哪里写错了还请见谅!

iOS-小demo--简易的抽屉效果封装

芙蓉落尽天涵水,日暮沧波起!<藤藤蛇>

简单的思路说明:

上代码:

推荐阅读更多精彩内容