iOS开发小笔记 | 封装简单侧滑栏

效果图：

侧滑菜单.gif

代码文件结构：

代码文件结构

思路：

1 . 左菜单栏作为主视图控制器的一个childViewController。

    //------- 左侧滑栏 -------//
    self.leftMenuViewController = [[LeftMenuViewController alloc]init];
    self.leftMenuViewController.view.frame = CGRectMake(-SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    [self addChildViewController:self.leftMenuViewController];
    [self.view addSubview:self.leftMenuViewController.view];

2 . 控制左菜单栏的x和透明度实现其显示和隐藏。

代码：

LeftMenuViewController.m的代码

#import "LeftMenuViewController.h"
#import "LeftMenuContentView.h"

/** 左侧滑菜单栏 */
@interface LeftMenuViewController ()

/** 内容view */
@property (nonatomic,strong) LeftMenuContentView *contentView;

@end

@implementation LeftMenuViewController

#pragma mark - 生命周期
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // UI搭建
    [self setUpUI];
}

#pragma mark - UI搭建
/** UI搭建 */
- (void)setUpUI{
    // 本身半透明，不影响子view的透明度
    self.view.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0.8];
    
    // 添加内容view
    self.contentView = [[LeftMenuContentView alloc]initWithFrame:CGRectMake(0, 0, 200, SCREEN_HEIGHT)];
    [self.view addSubview:self.contentView];
    
    // 添加点击移出的手势
    UITapGestureRecognizer *hideGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(hide)];
    [self.view addGestureRecognizer:hideGesture];
}

#pragma mark - 左侧滑菜单栏显示
/** 左侧滑菜单栏显示 */
- (void)show{
    // 左侧滑菜单栏的背景先是透明的
    self.view.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0];
    // 内容view在左侧滑菜单栏的左边
    self.contentView.maxX = 0;
    // 整个左侧滑菜单栏瞬移到父视图上
    self.view.x = 0;
    // 执行动画
    [UIView animateWithDuration:0.3 animations:^{
        // 左侧滑栏的背景变为半透明
        self.view.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0.8];
        // 内容view移到侧滑栏中
        self.contentView.x = 0;
    }];
}

#pragma mark - 左滑菜单栏隐藏
/** 左滑菜单栏隐藏 */
- (void)hide{
    [UIView animateWithDuration:0.3 animations:^{
        // 内容view移出
        self.contentView.maxX = 0;
        // 做侧滑栏背景色变透明
        self.view.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0];
    } completion:^(BOOL finished) {
        // 动画结束后将整个左侧滑菜单栏移到左边
        self.view.maxX = 0;
    }];
}

@end

主视图控制器弹出左菜单

#pragma mark - 弹出左侧菜单
/** 弹出左侧菜单 */
- (void)showLeftMenuView{
    [self.leftMenuViewController show];
}

---

注：self.view.x和self.view.maxX使用了UIView的一个category。万年frame党可能很需要这种category：

.h文件：

@interface UIView (frameAdjust)

// 左上角x坐标
- (CGFloat)x;
- (void)setX:(CGFloat)x;

// 左上角y坐标
- (CGFloat)y;
- (void)setY:(CGFloat)y;

// 宽
- (CGFloat)width;
- (void)setWidth:(CGFloat)width;

// 高
- (CGFloat)height;
- (void)setHeight:(CGFloat)height;

// 中心点x
- (CGFloat)centerX;
- (void)setCenterX:(CGFloat)x;

// 中心点y
- (CGFloat)centerY;
- (void)setCenterY:(CGFloat)y;

/** 获取最大x */
- (CGFloat)maxX;
/** 获取最小x */
- (CGFloat)minX;

/** 获取最大y */
- (CGFloat)maxY;
/** 获取最小y */
- (CGFloat)minY;

/** 设置最小x,相当于设置x */
- (void)setMinX:(CGFloat)minX;

/** 设置最大x */
- (void)setMaxX:(CGFloat)maxX;

/** 设置最小y,相当于设置y */
- (void)setMinY:(CGFloat)minY;

/** 设置最大y */
- (void)setMaxY:(CGFloat)maxY;

@end

.m文件

@implementation UIView (frameAdjust)

- (CGFloat)x{
    return self.frame.origin.x;
}

- (void)setX:(CGFloat)x{
    self.frame = CGRectMake(x, self.y, self.width, self.height);
}

- (CGFloat)y{
    return self.frame.origin.y;
}

- (void)setY:(CGFloat)y{
    self.frame = CGRectMake(self.x, y, self.width, self.height);
}

- (CGFloat)width{
    return self.frame.size.width;
}

- (void)setWidth:(CGFloat)width{
    self.frame = CGRectMake(self.x, self.y, width, self.height);
}

- (CGFloat)height{
    return self.frame.size.height;
}

- (void)setHeight:(CGFloat)height{
    self.frame = CGRectMake(self.x, self.y, self.width, height);
}

/** 中心的x坐标 */
- (CGFloat)centerX{
    return self.center.x;
}

/** 中心的y坐标 */
- (void)setCenterX:(CGFloat)x{
    self.center = CGPointMake(x, self.center.y);
}

- (CGFloat)centerY{
    return self.center.y;
}

- (void)setCenterY:(CGFloat)y{
    self.center = CGPointMake(self.center.x, y);
}

/** 获取最大x */
- (CGFloat)maxX{
    return self.x + self.width;
}
/** 获取最小x */
- (CGFloat)minX{
    return self.x;
}

/** 获取最大y */
- (CGFloat)maxY{
    return self.y + self.height;
}
/** 获取最小y */
- (CGFloat)minY{
    return self.y;
}

/** 设置最小x,相当于设置x */
- (void)setMinX:(CGFloat)minX{
    self.x = minX;
}

/** 设置最大x */
- (void)setMaxX:(CGFloat)maxX{
    self.x = maxX - self.width;
}

/** 设置最小y,相当于设置y */
- (void)setMinY:(CGFloat)minY{
    self.y = minY;
}

/** 设置最大y */
- (void)setMaxY:(CGFloat)maxY{
    self.y = maxY - self.height;
}

@end