iOS-自定义带抽屉效果的tabBar

demo地址：gitHub

一、先来个效果

tabBar.gif

二、代码示例

1.抽屉页作为根视图：

@interface DrawerViewController ()
{
    UITapGestureRecognizer *tapGesture;
}

//创建左边的抽屉
@property (nonatomic, strong) LeftViewController *leftViewController;

//创建右边的标签控制器
@property (nonatomic, strong) MTabBarViewController *mainViewController;
//抽屉是否显示的标示

@property (nonatomic, assign) BOOL isOpen;
@end

@implementation DrawerViewController

- (void)dealloc
{
    //移除通知
    [[NSNotificationCenter defaultCenter]removeObserver:self name:@"buttonTap" object:nil];
}
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self createTabBarController];
    [self createLeftVc];
    
    self.view.backgroundColor = [UIColor grayColor];
    
    //添加通知，监听TabBar的点击事件 隐藏左边抽屉
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(buttonTap) name:@"buttonTap" object:nil];
    
}
- (void)buttonTap
{
    //抽屉展开时则隐藏
    if (self.isOpen == YES) {
        [self openOrHidden];
    }
    
}
//创建左边抽屉
- (void)createLeftVc
{
    self.leftViewController = [[LeftViewController alloc]init];
    
    //抽屉控制器添加到父控制器中
    [self addChildViewController:self.leftViewController];
    self.leftViewController.view.frame = LeftViewStartFrame();
    [self.view addSubview:self.leftViewController.view];
    [self.leftViewController didMoveToParentViewController:self];
    
}
//创建右边的标签控制器
- (void)createTabBarController{
    //
    NSArray *classNames = @[@"ProductViewController",@"MessageViewController",@"OrderViewController"];
    
    //保存viewControllers
    NSMutableArray *viewControllers = [NSMutableArray array];
    [classNames enumerateObjectsUsingBlock:^(NSString *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        //先把字符串转化为类名
        Class class = NSClassFromString(obj);
        
        //创建ViewController
        UIViewController *vc = [[class alloc]init];
        UINavigationController *aNav = [[UINavigationController alloc]initWithRootViewController:vc];
        
        [viewControllers addObject:aNav];
        
    }];
    //TabBarController 创建
    _mainViewController = [[MTabBarViewController alloc]initWithViewControllers:viewControllers];
    _mainViewController.view.backgroundColor = [UIColor brownColor];
    
    //添加标签控制器到父控制器
    [self addChildViewController:self.mainViewController];
    self.mainViewController.view.frame = BOUNDS;
    [self.view addSubview:self.mainViewController.view];
    [self.mainViewController didMoveToParentViewController:self];
}

//标签控制器显示的vc的根控制器的view往右边移动
//tabBar -> Nav (ViewControllers[selectedIndex]) -> Nav.rootViewController.view
- (void)tabBar_Nav_RootViewController_viewMoveRight
{
    //标签控制器当中 当前显示的控制器
    UINavigationController *nav = self.mainViewController.viewControllers[self.mainViewController.selectedIndex];
    //取出导航控制器的根控制器
    UIViewController *rootVc = nav.childViewControllers[0];
    rootVc.view.frame = RightContentEndFrame();
}
- (void)tabBar_Nav_RootViewController_viewMoveLeft
{
    //标签控制器当中 当前显示的控制器
    UINavigationController *nav = self.mainViewController.viewControllers[self.mainViewController.selectedIndex];
    //取出导航控制器的根控制器
    UIViewController *rootVc = nav.childViewControllers[0];
    rootVc.view.frame = RigntContentStartFrame();
}


//显示左边抽屉
- (void)open
{
    [UIView animateWithDuration:0.48 animations:^{
        self.leftViewController.view.frame = LeftViewEndFrame();
        [self tabBar_Nav_RootViewController_viewMoveRight];
    } completion:nil];
    
    //添加点击手势，点击某些区域的隐藏抽屉
    tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
    tapGesture.numberOfTapsRequired = 1;
    tapGesture.numberOfTouchesRequired = 1;
    [self.view addGestureRecognizer:tapGesture];
}
- (void)tap:(UITapGestureRecognizer *)gesturer
{
    //获取点击的位置
    CGPoint point = [gesturer locationInView:self.view];
    if (CGRectContainsPoint(self.leftViewController.view.frame, point) == YES) {
        return;
    }
    
    [self hidden];
    self.isOpen = NO;
    //移除手势
    [self.view removeGestureRecognizer:tapGesture];
}
//隐藏左边抽屉
- (void)hidden
{
    [UIView animateWithDuration:0.48 animations:^{
        self.leftViewController.view.frame = LeftViewStartFrame();
        [self tabBar_Nav_RootViewController_viewMoveLeft];
    } completion:nil];
    
}

- (void)openOrHidden
{
    //当前如果是隐藏，则显示
    if (self.isOpen == NO) {
        [self open];
    }
    
    //当前如果是显示的，则隐藏
    if (self.isOpen == YES) {
        [self hidden];
    }
    
    //改变隐藏标记
    self.isOpen = !self.isOpen;
}
@end

2.标签视图 修改方法 - (void)selectBtn:(UIButton *)sender中的切换效果可以实现不同的切换动画与效果。

@implementation MTabBar
- (instancetype)initWithTitles:(NSArray *)titles imageNames:(NSArray *)imageNames
{
    self = [super initWithFrame:TabBarFrame()];
    if (self) {
        
        //标题数组不为空，图片名字个数 ＝ 标题个数
        self.buttonBack = [[UIView alloc]initWithFrame:CGRM(0, 0, BUTTON_W, 64)];
        self.buttonBack.backgroundColor = BUTTON_BACK_COLOR;
        [self addSubview:self.buttonBack];
        
        self.backgroundColor = TABBAR_BACK_COLOR;
        
        if ([titles count] && [titles count] == [imageNames count]) {
            [titles enumerateObjectsUsingBlock:^(NSString *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
                UIButton *button = [[UIButton alloc]initWithFrame:CGRM(BUTTON_W*idx, 0, BUTTON_W, 64)];
                button.tag = 1000 + idx;
                [self addSubview:button];
                //默认选中第一个
                if (idx == 0) {
                    button.selected = YES;
                    self.selectedButton = button;
                }
                
                [button addSubview:MakeLabel(CGRM(0, 30, BUTTON_W, 34), obj)];
//                // 图片宽 高分别为 44 24
                CGFloat x = (BUTTON_W - 44)/2;
                [button addSubview:MakeImageView(CGRM(x, 5, 44, 24),[imageNames objectAtIndex:idx])];
                //添加点击方法
                [button addTarget:self action:@selector(selectBtn:) forControlEvents:UIControlEventTouchUpInside];
            }];
        }
    }
    return self;
}
//button 点击方法
- (void)selectBtn:(UIButton *)sender
{
    //让抽屉隐藏，发出通知
    [[NSNotificationCenter defaultCenter]postNotificationName:@"buttonTap" object:nil];
    
    //选中的button 已经是选中状态 不用处理
    if (self.selectedButton == sender) {
        return;
    }
    //改变之前选中button的状态  为非选中状态
    self.selectedButton.selected = NO;
    
    //改变当前选中button的状态
    sender.selected = YES;
    self.selectedButton = sender;
    //通知标签控制器显示当前button对应的viewController
    if (self.callBack) {
        self.callBack(sender.tag - 1000);
    }
    [UIView animateWithDuration:0.5 animations:^{
        self.buttonBack.center = CGPointMake(BUTTON_W/2+(sender.tag - 1000) * BUTTON_W, 32);
    } completion:nil];
}
UILabel *MakeLabel(CGRect frame, NSString *title)
{
    UILabel *label = [[UILabel alloc]initWithFrame:frame];
//    label.userInteractionEnabled = YES;
    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor whiteColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = title;
    return label;
}
//根据 frame和 imageName 创建UIImageView
UIImageView *MakeImageView(CGRect frame, NSString *imageName)
{
    UIImageView *imageV = [[UIImageView alloc]initWithFrame:frame];
//    imageV.userInteractionEnabled = YES;
    imageV.backgroundColor = [UIColor clearColor];
    imageV.image = [UIImage imageNamed:imageName];
    return imageV;
}
@end

3.标签控制器

@interface MTabBarViewController ()

@end

@implementation MTabBarViewController

- (instancetype)initWithViewControllers:(NSArray *)viewControllers
{
    self = [super init];
    if (self) {
        
        _viewControllers = viewControllers;
        //遍历数组，添加子控制器
        [_viewControllers enumerateObjectsUsingBlock:^(UIViewController *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            [self addChild:obj];
        }];
        /*
         @[@"商品.png",@"消息.png",@"订单.png"]
         @[@"商品浏览",@"我的消息",@"我的订单"]
         */
        _tabBar = [[MTabBar alloc]initWithTitles:@[@"商品浏览",@"我的消息",@"我的订单"] imageNames:@[@"商品.png",@"消息.png",@"订单.png"]];
        [self.view addSubview:self.tabBar];
        __weak typeof(self) weakSelf = self;
        self.tabBar.callBack = ^(NSInteger index){
            weakSelf.selectedIndex = index;
        };
        //默认选中第0个
        self.selectedIndex = 0;
    }
    return self;
}
- (void)setSelectedIndex:(NSInteger)selectedIndex
{
    //取出当前控制器 oldVc
    UIViewController *oldVc = self.viewControllers[self.selectedIndex];
    //取出将要显示的 控制器 newVc
    UIViewController *newVc = self.viewControllers[selectedIndex];
    //动画 向左边移动
    newVc.view.frame = CGRectMake(S_W, 0, S_W, S_H);
    //改变 newVc 的视图层次
    
    //把newVc.view 的视图放在 self.tabBar 的下面
    [self.view insertSubview:newVc.view belowSubview:self.tabBar];
    [UIView animateWithDuration:0.5 animations:^{
        oldVc.view.frame = CGRectMake(-S_W, 0, S_W, S_H);
        newVc.view.frame = BOUNDS;
    }];
    _selectedIndex = selectedIndex;
}

//添加子控制器具体步骤
- (void)addChild:(UIViewController *)viewController
{
    [self addChildViewController:viewController];
    viewController.view.frame = BOUNDS;
    //将viewContoller.view 放在最底层
    [self.view insertSubview:viewController.view atIndex:0];
    [viewController didMoveToParentViewController:self];
    
//    self.view.subviews 数组 下标越小，视图层次越在下面，下标越大，视图层次越在上面
}
@end

4.视图位置控制 修改对应的视图的frame可以实现不同的视图效果

CGRect TabBarFrame()
{
    return CGRectMake(0, S_H-64, S_W, 64);
}

//左边抽屉隐藏（开始）的位置
CGRect LeftViewStartFrame()
{
    return CGRectMake(-S_W*0.75, 67,S_W*0.75 , S_H-64-64-6);
}
//左边抽屉显示（结束）的位置
CGRect LeftViewEndFrame()
{
    return CGRectMake(0, 67, S_W*0.75, S_H-64-64-6);
}

//右边内容开始（抽屉隐藏时）的位置
CGRect RigntContentStartFrame()
{
    return CGRectMake(0, 0, S_W, S_H);
}

//右边内容结束（抽屉显示时）的位置
CGRect RightContentEndFrame()
{
    return CGRectMake(S_W*0.75, 0, S_W, S_H);
}

CGRect CGRM(CGFloat x, CGFloat y,CGFloat w,CGFloat h)
{
    return CGRectMake(x, y, w, h);
}
@end

欢迎下载