iOS抽屉效果

我们在用QQ时都会发现，消息列表向左滑动时，左侧的功能界面被显示出来，消息列表会拉到最右侧, 就像一个抽屉拉出来一样。除了QQ, 还有网易新闻等应用都采用了这样的交互。本文就以此介绍简易版的抽屉效果.

实现步骤

1.声明三个View属性

@interface ViewController ()
@property (nonatomic, strong) UIView *mainView;
@property (nonatomic, strong) UIView *leftView;
@property (nonatomic, strong) UIView *rightView;
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    [self creatChildView];
    [self addGesture];
    // 通过KVO来监听mainView的frame的变化，从而判断maimView是左滑还是右滑。
    [_mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
}

2.创建View

在这注意view的添加顺序, 我们想要让最初显示的view为mainView

- (void)creatChildView
{
    self.leftView = [[UIView alloc] initWithFrame:self.view.bounds];
    _leftView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_leftView];
    
    _rightView = [[UIView alloc] initWithFrame:self.view.bounds];
    _rightView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:_rightView];
    
    self.mainView = [[UIView alloc] initWithFrame:self.view.bounds];
    _mainView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_mainView];
}

3.给self.view添加一个平移手势

- (void)addGesture
{
       // 创建手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
    [self.view addGestureRecognizer:pan];
}

4.手势触发方法

- (void)panAction:(UIPanGestureRecognizer *)panGesture
{
// 获取平移手势移动后, 在相对坐标中的偏移量
    CGPoint point = [panGesture translationInView:self.view];
// 声明xNew变量用point.x赋值
    CGFloat xNew = point.x;
    // 改变mainView的frame
    _mainView.frame = CGRectMake(xNew + self.mainView.frame.origin.x, 0, self.view.frame.size.width, self.view.frame.size.height);
    // 设置手势移动后的point
    [panGesture setTranslation:CGPointZero inView:panGesture.view];
}

5.只要被监听的属性发生变化, 就会触发这个方法

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    // 如果往右侧移动, 显示左边，隐藏右边
    if (_mainView.frame.origin.x > 0) {
        _rightView.hidden = YES;
    // 往左移动，显示右边
    } else if (_mainView.frame.origin.x < 0) {
        _rightView.hidden = NO;
    }
}

效果如下图

drawer1.gif

这次实现的是简易版的抽屉效果, 仅仅是用了三个view, 但在开发中一般为几个不同的VC, 通过手势实现抽屉效果, 同时还能设置一些动画效果, 比如比较有名的MMDrawerController框架.要是项目有需要, 可以参考这个第三方. 如何实现几个控制器间的抽屉效果, 下次再与大家分享.