iOS UI设计: 仿QQ左边抽屉侧栏侧拉效果

tips: 

实现原理:  

1.  了解整个ui层次组成, 主视图控制器是一个viewcontroller嵌入的一个navicontroller. 为了使它能整体移动缩放(包括tabbar), 只能在viewdidload里面对self.navigationcontroller.view进行。 而不是self.view. 因为self.view在ios,7,8,9没有包含状态栏。

2.  左边的侧栏是初始化就放好的一个xib自定义的view,当然也可以纯代码实现。侧栏的动画是和主视图控制器的动画独立的,因此只能在navigationcontroller的父级也就是uiwindow (其实也是一个uiview) 添加子视图。

3.  拉伸后,点击主视图需要返回复原,这里有个trick就是事件传递,因为主视图里面可能有scrollerview或者tableview,这里列子是tableview,导致了touchedbegin事件被捕获了,所以找了资料通过自定义tableview里面复写ttouchbegin的点击方法并把事件传出来,self.nextrespond。

先看效果,再看代码:

iOS UI设计: 仿QQ左边抽屉侧栏侧拉效果_第1张图片

核心代码:

//
//  ViewController.m
//  dynamic
//
//  Created by y on 15/11/27.
//  Copyright © 2015年 y. All rights reserved.
//

#import "ViewController.h"
#import "CQLeftView.h"

@interface ViewController () <UITableViewDelegate>
@property (weak, nonatomic) IBOutlet UIView *myview;
@property (weak, nonatomic) IBOutlet UITableView *tableview;
@property (nonatomic, weak)  CQLeftView *leftView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableview.delegate = self;
    [UIApplication sharedApplication].keyWindow.backgroundColor = [UIColor redColor];
    self.leftView = [[[NSBundle mainBundle] loadNibNamed:@"CQLeftView" owner:self options:nil] lastObject];
    self.leftView.userInteractionEnabled = YES;
    self.leftView.frame = CGRectMake(-100, 10, self.view.frame.size.width, self.view.frame.size.height);
    self.leftView.backgroundColor = [UIColor redColor];
    [self.navigationController.view.superview addSubview:self.leftView];
    [self.navigationController.view.superview sendSubviewToBack:self.leftView];
    
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    NSLog(@"点击");
    [UIView animateWithDuration:0.5 animations:^{
        self.navigationController.view.transform = CGAffineTransformIdentity;
        self.leftView.transform = CGAffineTransformIdentity;
    }];
    [super touchesBegan:touches withEvent:event];
    
}
- (IBAction)leftBtn:(id)sender {
    [UIView animateWithDuration:0.5 animations:^{
        self.navigationController.view.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(200, 10), CGAffineTransformMakeScale(0.8, 0.8));
        self.leftView.transform = CGAffineTransformMakeTranslation(100, 10);
    }];
}
@end

#import "CQTableView.h"

@implementation CQTableView

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    NSLog(@"tableview被点击");
    if (self.superview)
    {
        [self.nextResponder touchesBegan:touches withEvent:event];
    }
    [super touchesBegan:touches withEvent:event];
}

@end

storyboard就不帖了。 

你可能感兴趣的:(iOS UI设计: 仿QQ左边抽屉侧栏侧拉效果)