iOS-自定義帶抽屜效果的tabBar

demo地址：gitHub

一、先來個效果

tabBar.gif

二、代碼示例

1.抽屜頁作為根視圖：

@interface DrawerViewController ()
{
    UITapGestureRecognizer *tapGesture;
}

//創(chuàng)建左邊的抽屜
@property (nonatomic, strong) LeftViewController *leftViewController;

//創(chuàng)建右邊的標簽控制器
@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];
    
    //添加通知，監(jiān)聽TabBar的點擊事件 隱藏左邊抽屜
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(buttonTap) name:@"buttonTap" object:nil];
    
}
- (void)buttonTap
{
    //抽屜展開時則隱藏
    if (self.isOpen == YES) {
        [self openOrHidden];
    }
    
}
//創(chuàng)建左邊抽屜
- (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];
    
}
//創(chuàng)建右邊的標簽控制器
- (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);
        
        //創(chuàng)建ViewController
        UIViewController *vc = [[class alloc]init];
        UINavigationController *aNav = [[UINavigationController alloc]initWithRootViewController:vc];
        
        [viewControllers addObject:aNav];
        
    }];
    //TabBarController 創(chuàng)建
    _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];
    
    //添加點擊手勢，點擊某些區(qū)域的隱藏抽屜
    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中的切換效果可以實現(xiàn)不同的切換動畫與效果。

@implementation MTabBar
- (instancetype)initWithTitles:(NSArray *)titles imageNames:(NSArray *)imageNames
{
    self = [super initWithFrame:TabBarFrame()];
    if (self) {
        
        //標題數(shù)組不為空，圖片名字個數(shù) ＝ 標題個數(shù)
        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
{
    //讓抽屜隱藏，發(fā)出通知
    [[NSNotificationCenter defaultCenter]postNotificationName:@"buttonTap" object:nil];
    
    //選中的button 已經(jīng)是選中狀態(tài) 不用處理
    if (self.selectedButton == sender) {
        return;
    }
    //改變之前選中button的狀態(tài)  為非選中狀態(tài)
    self.selectedButton.selected = NO;
    
    //改變當前選中button的狀態(tài)
    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;
}
//根據(jù) frame和 imageName 創(chuàng)建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;
        //遍歷數(shù)組，添加子控制器
        [_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 數(shù)組 下標越小，視圖層次越在下面，下標越大，視圖層次越在上面
}
@end

4.視圖位置控制 修改對應的視圖的frame可以實現(xiàn)不同的視圖效果

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

歡迎下載

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容