·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> 自定义tabbar标签栏

自定义tabbar标签栏

作者:佚名      IOS开发编辑:admin      更新时间:2022-07-23

学iOS以来,感觉自定义的东西,比系统自带的要容易操作一点,可修改和执行的空间要多一点。

下面说一下用到很多的tabbar。

首先,创建一个FButton类,继承UIButton,用来规范tabbar上的按钮。

然后,创建一个RootViewController,继承UITabbarController作为根视图控制器。

废话不多说,直接上代码:

在FButton的.m文件中:

#import "FButton.h"

@implementation FButton

-(id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
    }
    return self;
}

#PRagma mark set image in btn
-(CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageW = contentRect.size.width;
    CGFloat imageH = contentRect.size.height * 0.65;
    
    return CGRectMake(0, 3, imageW, imageH);
}
#pragma mark set title in btn
-(CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGFloat titleY = contentRect.size.height * 0.65;
    CGFloat titleW = contentRect.size.width;
    CGFloat titleH = contentRect.size.height - titleY;
    
    return CGRectMake(0, titleY, titleW, titleH);
}

@end

在RootViewController的.h文件中:

#import <UIKit/UIKit.h>

@interface RootViewController : UITabBarController

//是否隐藏tabbar
-(void)isHiddenCustomTabbar:(BOOL)isHidden;

@end

.m文件中:

@interface RootViewController ()
{
    UIImageView * _tabbarView;    //自定义tabbar 覆盖系统自带的
    FButton * _previousBtn;       //记录上一个按钮
}

@end

@implementation RootViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //隐藏系统自带的tabbar
    self.tabBar.hidden = YES;
    
    [self creatCustomTabbarView];
}
#pragma mark - 创建自定义的tabbar
-(void)creatCustomTabbarView
{
    //tabBar标签栏的高度为49
    _tabbarView = [[UIImageView alloc]initWithFrame:CGRectMake(0, HEIGHT-49, WIDTH, 49)];
    _tabbarView.image = [UIImage imageNamed:@"tabbar"];
    _tabbarView.userInteractionEnabled = YES;
    [self.view addSubview:_tabbarView];
    
    HomeViewController * first = [[HomeViewController alloc]init];
    UINavigationController * navi1 = [[UINavigationController alloc]initWithRootViewController:first];
    ExpertViewController * second = [[ExpertViewController alloc]init];
    UINavigationController * navi2 = [[UINavigationController alloc]initWithRootViewController:second];
    HospitalViewController * third = [[HospitalViewController alloc]init];
    UINavigationController * navi3 = [[UINavigationController alloc]initWithRootViewController:third];
    CommunityViewController * fourth = [[CommunityViewController alloc]init];
    UINavigationController * navi4 = [[UINavigationController alloc]initWithRootViewController:fourth];
    MineViewController * fifth = [[MineViewController alloc]init];
    UINavigationController * navi5 = [[UINavigationController alloc]initWithRootViewController:fifth];
    
    self.viewControllers = @[navi1,navi2,navi3,navi4,navi5];

 //下边的内容,根据自己的要求,自定义实现
    NSArray * title_arr = @[@"首页",@"专家",@"医院",@"社区",@"我的"];
    NSArray * arr = @[@"home",@"doctor",@"hospital",@"community",@"mine"];
    
    for (int i=0; i<arr.count; i++) {
        [self creatButtonWithNormalName:arr[i] andSelectName:[NSString stringWithFormat:@"selected-%@",arr[i]] andTitle:title_arr[i] andIndex:i];
    }
    //设置默认选中按钮
    FButton * button = _tabbarView.subviews[0];
    [self changeViewController:button];
}
#pragma mark 创建标签栏上的按钮以及文字
- (void)creatButtonWithNormalName:(NSString *)normal andSelectName:(NSString *)selected andTitle:(NSString *)title andIndex:(int)index{
    
    FButton * customButton = [FButton buttonWithType:UIButtonTypeCustom];
    customButton.tag = index;
    
    CGFloat buttonW = _tabbarView.frame.size.width / 5;
    CGFloat buttonH = _tabbarView.frame.size.height;
    
    customButton.frame = CGRectMake(buttonW * index, 0, buttonW, buttonH);
    [customButton setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];
    [customButton setImage:[UIImage imageNamed:selected] forState:UIControlStateDisabled];
    [customButton setTitle:title forState:UIControlStateNormal];
    //按钮的点击事件
    [customButton addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchDown];
    //设置image和label的位置以及字体大小和颜色
    customButton.imageView.contentMode = UIViewContentModeCenter;
    customButton.titleLabel.textAlignment = NSTextAlignmentCenter;
    UIColor * color = UTILS_COLORRGB(0, 154, 154);
    [customButton setTitleColor: color forState:UIControlStateNormal];
    customButton.titleLabel.font = [UIFont systemFontOfSize:11];
    
    [_tabbarView addSubview:customButton];
    
}

#pragma mark 按钮被点击时调用
- (void)changeViewController:(FButton *)sender
{
    self.selectedIndex = sender.tag; //切换不同控制器的界面
    sender.enabled = NO;
    if (_previousBtn != sender) {
        _previousBtn.enabled = YES;
    }
    _previousBtn = sender;
    self.selectedViewController = self.viewControllers[sender.tag];
}
#pragma mark - 是否隐藏tabbar
-(void)isHiddenCustomTabbar:(BOOL)isHidden
{
    _tabbarView.hidden = isHidden;
}

以上都完成后,最后在appdelegate中将RootViewController 设置为根视图控制器:

  //设置tabbar的根视图控制器
    _delegate = [[RootViewController alloc]init];
    self.window.rootViewController = _delegate;

然后就可以实现了。

效果如下图所示:

 

希望这篇文章会对你有所帮助。

 

------追加内容:

在以上的基础上,自定义的tabbar默认是显示的,但是有的二级或者三级界面是不需要显示出来的,这就需要在跳转的时候调用
-(void)isHiddenCustomTabbar:(BOOL)isHidden  这个方法了。直接调用肯定是调不到了,所以...

调用此方法的代码如下:

    AppDelegate * app = (AppDelegate *)[[UIapplication sharedApplication] delegate];
    [app.delegate isHiddenCustomTabbar:isHidden];

其中的isHidden是一个BOOL类型的变量。

当然了,只是这样还是不完善的,因为只隐藏了,当界面再返回来的时候,tabbar就没了......

所以,还需要在 -(void)viewWillAppear:(BOOL)animated的方法中,将自定义tabbar显示出来就完美了!