iOS开发 — 侧滑菜单的实现

实现代码

1.创建侧边栏菜单的类,在.m文件里

#import "LeftMenuView.h"
#import "Masonry.h"

@interface LeftMenuView ()

@property (nonatomic,strong) UIView *menuView;

@end

@implementation LeftMenuView

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
        [self setupUI];
    }
    return self;
}

- (void)setupUI
{
    UIView *bgView = [[UIView alloc] init];
    [self addSubview:bgView];
    [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self);
    }];
    [bgView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissMenu)]];
    
    //左侧滑出的视图
    self.menuView = [[UIView alloc] init];
    self.menuView.backgroundColor = [UIColor whiteColor];
    [self addSubview:self.menuView];
    [self.menuView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.equalTo(@0);
        make.right.equalTo(self.mas_left);
        make.width.equalTo(@250);
    }];
    [UIView animateWithDuration:0.3 animations:^{
        [self.menuView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.top.bottom.equalTo(@0);
            make.left.equalTo(self.mas_left);
            make.width.equalTo(@250);
        }];
        [self layoutIfNeeded];
    }];
    //给左滑菜单添加拖动手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panOnMenuView:)];
    [self.menuView addGestureRecognizer:pan];
}

- (void)panOnMenuView:(UIPanGestureRecognizer *)panGesture
{
    CGPoint translationPoint = [panGesture translationInView:self.menuView];
    [panGesture setTranslation:CGPointZero inView:self.menuView];
    
    if (panGesture.state == UIGestureRecognizerStateBegan || panGesture.state == UIGestureRecognizerStateChanged) {
        if (translationPoint.x < 0) {
            //向左滑动时
            CGFloat tempX = CGRectGetMinX(self.menuView.frame) + translationPoint.x;
            self.menuView.frame = CGRectMake(tempX, 0, CGRectGetWidth(self.menuView.frame), CGRectGetHeight(self.menuView.frame));
        }else{
            //向右滑动时
            return;
        }
    }else{
        //当左滑视图被拖动的距离小于左滑视图的三分之一宽度时，停止手势让视图恢复原状
        if (CGRectGetMinX(self.menuView.frame) >= -CGRectGetWidth(self.menuView.frame)*0.3) {
            [UIView animateWithDuration:0.3 animations:^{
                self.menuView.frame = CGRectMake(0, 0, CGRectGetWidth(self.menuView.frame), CGRectGetHeight(self.menuView.frame));
            }];
        }else{
            //当左滑视图被拖动的距离大于左滑视图的三分之一宽度时，停止手势让视图消失
            [self dismissMenu];
        }
    }
}

/**
 退出菜单
 */
- (void)dismissMenu
{
    [UIView animateWithDuration:0.3 animations:^{
        [self.menuView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.top.bottom.equalTo(@0);
            make.right.equalTo(self.mas_left);
            make.width.equalTo(@250);
        }];
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        [self removeFromSuperview];
    }];
}

/**
 显示菜单页面
 */
+ (LeftMenuView *)popup
{
    LeftMenuView *menuView = [[LeftMenuView alloc] init];
    [[UIApplication sharedApplication].keyWindow addSubview:menuView];
    [menuView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo([UIApplication sharedApplication].keyWindow);
    }];
    return menuView;
}

@end

2.在需要调用的controller中

#import "ViewController.h"
#import "LeftMenuView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.title = @"左滑菜单";
    
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Open" style:UIBarButtonItemStyleDone target:self action:@selector(openMenu)];
}

- (void)openMenu
{
    [LeftMenuView popup];
}


@end