自定义tabbar 中间带个大圆圈

先看效果图

第一步 创建tabbarView 继承自 UIView

tabbarview上边需要添加的控件

@property (nonatomic, strong) UIButton *findButton;// 首页按钮

@property (nonatomic, strong) UIButton *lanMuButton;// 栏目按钮

@property (nonatomic, strong) UIButton *huodongButton; 发现按钮

@property (nonatomic, strong) UIButton *wodeButton; 我的按钮

@property (nonatomic, strong) UILabel *findLabel; 首页label

@property (nonatomic, strong) UILabel *lanmuLabel; 栏目label

@property (nonatomic, strong) UILabel *huodonglabel; 活动label

@property (nonatomic, strong) UILabel *wodeLabel; 我的label

@property (nonatomic, strong)UIImageView *centerButton; 中间拍摄按钮

控件的创建和添加代码此处就省略 着重说一下中间大圈是怎么搞得

中间圆形View添加点击手势 在tabbarcontroller中实现

- (void)centerBtnClicked{

    拍照点击的协议方法

    [self.mytabbardelegate centerButtonSelect];

}

    四个button的点击方法 每个button通过设置tag值来区分

- (void)buttonAction:(UIButton *)button{

    if (button.tag == 0) {

         四个button的点击协议方法 在tabbarcontroller中实现

        [self.mytabbardelegate tabbarButtonSelect:0];

         /// 同时变换四个button的图片和label文字的颜色 

        [self.findButton setImage:[UIImage imageNamed:@"index_bottom_fx_sc"] forState:UIControlStateNormal];

        [self.lanMuButton setImage:[UIImage imageNamed:@"index_bottom_lm_df"] forState:UIControlStateNormal];

        [self.huodongButton setImage:[UIImage imageNamed:@"index_bottom_hd_df"] forState:UIControlStateNormal];

        [self.wodeButton setImage:[UIImage imageNamed:@"index_bottom_wd_df"] forState:UIControlStateNormal];

        self.findLabel.textColor = [UIColor orangeColor];

        self.lanmuLabel.textColor = [UIColor grayColor];

        self.huodonglabel.textColor = [UIColor grayColor];

        self.wodeLabel.textColor = [UIColor grayColor];

    }else if (button.tag == 1){

        [self.mytabbardelegate tabbarButtonSelect:1];

        /// 同时变换四个button的图片和label文字的颜色 

         省略.........

    }else if (button.tag == 3){

        [self.mytabbardelegate tabbarButtonSelect:3];

         /// 同时变换四个button的图片和label文字的颜色 

         省略........

    }else if(button.tag == 4){

        [self.mytabbardelegate tabbarButtonSelect:4]; 

         /// 同时变换四个button的图片和label文字的颜色 

         省略.........

r orangeColor];

    }

}

第二步  创建mytabbarcontroller 继承自UITabBarController
 

- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{

    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

    if (self) {

       隐藏系统tabbar

        self.tabBar.hidden = YES;

    }

    return self;

}

- (void)viewDidLoad {

    [super viewDidLoad];

    [self createView];

    [self createtab];

}

 创建并添加刚刚创建的tabbarView

- (void)createtab{

    self.tabbarView = [[MyTabbarView alloc] initWithFrame:CGRectMake(0, HEIGHT-64, self.view.frame.size.width, 64)];

    self.tabbarView.backgroundColor = [UIColor whiteColor];

    [self.view addSubview:self.tabbarView];

    ///// 在tabbarview上边界添加阴影效果

    self.tabbarView.layer.shadowColor = [UIColor lightGrayColor].CGColor;

    // 阴影偏移 右 下

    self.tabbarView.layer.shadowOffset = CGSizeMake(0, 0);

    // 阴影透明度

    self.tabbarView.layer.shadowOpacity = 1;

    // 阴影半径

    self.tabbarView.layer.shadowRadius = 2;

    //// 设置代理

    self.tabbarView.mytabbardelegate = self;

}

 ///// 给mytabbarcontroller 添加控制器

- (void)createView{

    FirstPageViewController *findVc = [[FirstPageViewController alloc] init];

    FLGNanViewController *findNaVC = [[FLGNanViewController alloc] initWithRootViewController:findVc];

    findVc.tabBarItem.tag = 1000;

    //栏目

    ClassifyViewController *lanmuvc = [[ClassifyViewController alloc] init];

    FLGNanViewController *lanmuNavc = [[FLGNanViewController alloc] initWithRootViewController:lanmuvc];

    lanmuvc.tabBarItem.tag = 2000;

    //相机

    UIViewController *view = [[UIViewController alloc] init];

    //活动

    HuoDongViewController *hudongVC = [[HuoDongViewController alloc] init];

    FLGNanViewController *huoDongNavic = [[FLGNanViewController alloc] initWithRootViewController:hudongVC];

    hudongVC.tabBarItem.tag = 3000;

    //我的

//    WodeViewController *wodeVc = [[WodeViewController alloc] init];

    NewWodeViewController *wodeVc = [[NewWodeViewController alloc] init];

    FLGNanViewController *wodeNaVC = [[FLGNanViewController alloc] initWithRootViewController:wodeVc];

    wodeVc.tabBarItem.tag = 4000;

    //

    self.viewControllers = [NSArray arrayWithObjects:findNaVC, lanmuNavc,view, huoDongNavic, wodeNaVC, nil];

}

  mytabbarview四个按钮的点击协议方法 切换不同的控制器

- (void)tabbarButtonSelect:(NSInteger)index{

    self.selectedIndex = index;

}

  中间大圈点击的协议方法

- (void)centerButtonSelect{

 ..........................

}

第三步   设置tabbar的隐藏和出现  自定义的tabbarview 不太好实现像系统的tabbar那样的隐藏效果 这里我做成向下动画隐藏 向上动画出现的形式

出现

- (void)showTabbar{

    [UIView animateWithDuration:0.2 animations:^{

        self.tabbarView.frame = CGRectMake(0, self.view.frame.size.height - 64, self.view.frame.size.width, 64);

    }];

}

隐藏

- (void)hidenTabbar{

    [UIView animateWithDuration:0.2 animations:^{

        self.tabbarView.frame = CGRectMake(0, self.view.frame.size.height+30 , self.view.frame.size.width, 64);

    }];

    

}

将这两个方法名写在.h中 设置成对外可以调用

在需要出现或隐藏tabbar的地方 调用即可