UITabBar 自定义

杨小兵

墨衍会员 · AI 创作全网分发码龄14年

关注

原创最新推荐文章于 2026-03-02 14:54:06 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

iOS UITabBarController(自定义, tarBar中间有自定义按钮) 包括tabBarController的基本设置, 自定义tabBar(tabBar中间包含按钮) 立即下载

系统自带的UITabBar可以通过简单地设置满足开发的需求，二很多人还不知道

比如说系统默认文字是蓝色的，但是我们想让他默认的时橘色的就可以通过简单的设置一下啊富文本属性就能解决问题

这几仅具有一个简单地例子

可以在这里设置虽有的iteam的属性 默认是蓝色的
// 第一次使用这个类或者他的子类的时候调用
// 第一次使用这个类或者他的子类的时候调用
+ (void)initialize
{
    // 它只是所有item的标志
    UITabBarItem *item = [UITabBarItem appearance];
   
    NSMutableDictionary *textAtt = [NSMutableDictionary dictionary];
    /**
     * 把你想更改的状态的颜色设置给富文本属性就行了
     * 这里只是简单地举了个例子 把蓝色的字体改成了红色
     */
    textAtt[NSForegroundColorAttributeName] = [UIColor orangeColor];
    [item setTitleTextAttributes:textAtt forState:UIControlStateSelected];

}

当然上边的例子仅仅改变了选中的时候的状态

你可以通过简单地设施改变他的默认状态下地文字颜色去满足你的设计需求

这里就不再写多余的代码了

然后就是图片了

系统默认会对图片进行渲染

我们只要说明我们已经对图片进行了渲染就没有问题了

我就直接上代码了

#pragma mark -设置一个子控制器
- (void)setUpOneChildViewController:(UIViewController *)vc title:(NSString *)title image:(UIImage *)image selImage:(UIImage *)selImage
{
    vc.tabBarItem.title = title;
    vc.tabBarItem.image = image;
  
    /**
     *  iteam的上角标用来提醒用户的
     */
    vc.tabBarItem.badgeValue = @"10";
    /**
     *  告诉系统我的图片已经进行过处理了系统不需要做多余的处理了
     */
    selImage = [selImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    /**
     *  设置选中的背景颜色
     */
    vc.tabBarItem.selectedImage = selImage;
    [self addChildViewController:vc];
   
    [_cusTomTabBar addTabBarButton:vc.tabBarItem];
   
}

然后你就发现tabbar基本上就能满足你的需求了

当然如果要求太高的话还是需要完全自定义

建议大家直接用view自定义一个

下边我就直接把我自定义好的给大家看一下可能会有很多问题，但是基本上能满足需求

先来一个效果图吧

哈哈哈

当然通过我上边的设置也能达到那个效果

//
//  XXBTabBar.h
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import <UIKit/UIKit.h>

@class XXBTabBar;

@protocol XXBTabBarDeledgate <NSObject>

@optional

- (void)tabBar:(XXBTabBar *)tabBar from:(int)from to:(int)to;
- (void)tabBarAddButtonClick:(XXBTabBar *)tabBar;
@end

@interface XXBTabBar : UIView

@property (weak, nonatomic) id<XXBTabBarDeledgate> delegate;

- (void)addTabBarButton:(UITabBarItem *)item;

@end

//
//  XXBTabBar.m
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import "XXBTabBar.h"
#import "XXBTabBarButton.h"

@interface XXBTabBar ()

@property (nonatomic, weak) UIButton *addButton;
@property (strong, nonatomic) NSMutableArray *tabBarButtonArray;
@property (weak, nonatomic) XXBTabBarButton *selectBtn;

@end

@implementation XXBTabBar

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // 设置所有tabBarButton的frame
    [self setUpAllTabBarButtonFrame];
    
    // 设置加号按钮的frame
    [self setUpAddButtonFrame];
}
- (void)setUpAllTabBarButtonFrame
{
    int count = (int)self.tabBarButtonArray.count + 1;
    CGFloat w = self.bounds.size.width / count;
    CGFloat h = self.bounds.size.height;
    CGFloat x = 0;
    CGFloat y = 0;
    int i = 0;
    for (UIView *tabBarButton in self.tabBarButtonArray) {
        
        if (i == 2) {
            i = 3;
        }
        x = i * w;
        tabBarButton.frame = CGRectMake(x, y, w, h);
        i++;
        
    }
}
/**
 *  设置所有的按钮的frame
 */
- (void)setUpAddButtonFrame
{
    CGFloat x = self.bounds.size.width * 0.5;
    CGFloat y = self.bounds.size.height * 0.5;
    self.addButton.center = CGPointMake(x, y);
}

/**
 *  添加一个按钮
 */
- (void)addTabBarButton:(UITabBarItem *)item
{
    XXBTabBarButton *tabBarButton = [[XXBTabBarButton alloc] init];
    tabBarButton.item = item;
    tabBarButton.tag = self.tabBarButtonArray.count;
    [tabBarButton setTitle:item.title forState:UIControlStateNormal];
    [tabBarButton setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
    [tabBarButton setImage:item.image forState:UIControlStateNormal];
    [tabBarButton setImage:item.selectedImage forState:UIControlStateSelected];
    [self addSubview:tabBarButton];
    [self.tabBarButtonArray addObject:tabBarButton];
    [tabBarButton addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    if (self.tabBarButtonArray.count == 1) {
        tabBarButton.selected = YES;
        self.selectBtn = tabBarButton;
    }
   
}
/**
 *  按钮点击事件
 */
- (void)btnClick:(XXBTabBarButton *)clickedBtn
{
    if ([self.delegate respondsToSelector:@selector(tabBar:from:to:)]) {
        [self.delegate tabBar:self from:(int)self.selectBtn.tag to:(int)clickedBtn.tag];
    }
    self.selectBtn.selected = NO;
    clickedBtn.selected = YES;
    self.selectBtn = clickedBtn;
}
#pragma mark - 懒加载

- (NSMutableArray *)tabBarButtonArray
{
    if(_tabBarButtonArray == nil)
    {
        _tabBarButtonArray = [NSMutableArray array];
    }
    return _tabBarButtonArray;
}
- (UIButton *)addButton
{
    if (_addButton == nil) {
        UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
        [addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
        [addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
        [addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
        /**
         *  自动计算按钮的大小 默认的情况下跟背景图片的大侠一样
         */
        [addButton sizeToFit];
        [addButton addTarget:self action:@selector(addButtonClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:addButton];
        self.addButton = addButton;
    }
    return _addButton;
}
/**
 *  处理加号点击
 */
- (void)addButtonClick
{
    if ([self.delegate respondsToSelector:@selector(tabBarAddButtonClick:)]) {
        [self.delegate tabBarAddButtonClick:self];
    }
}
@end

//
//  XXBTabBarButton.h
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XXBTabBarButton : UIButton

@property (nonatomic, strong) UITabBarItem *item;

@end

//
//  XXBTabBarButton.m
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import "XXBTabBarButton.h"
#import "XXBBadgeValue.h"
#define ImageRadio 0.7

#define margin 5

@interface XXBTabBarButton ()
@property (weak, nonatomic) XXBBadgeValue *badgeButton;

@end

@implementation XXBTabBarButton

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

- (void)dealloc
{
#warning 一定要取消监听
    /**
     *  取消监听
     */
    [self.item removeObserver:self forKeyPath:@"badgeValue"];
    [self.item removeObserver:self forKeyPath:@"title"];
    [self.item removeObserver:self forKeyPath:@"image"];
    [self.item removeObserver:self forKeyPath:@"selectedImage"];
}

/**
 *  初始化按钮
 */
- (void)setupTabBarButton
{
    
    self.imageView.contentMode = UIViewContentModeCenter;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:12];
}
- (void)setItem:(UITabBarItem *)item
{
    _item = item;
    /**
     * 添加观察者
     */
    [item addObserver:self forKeyPath:@"badgeValue" options:0 context:nil];
    [item addObserver:self forKeyPath:@"title" options:0 context:nil];
    [item addObserver:self forKeyPath:@"image" options:0 context:nil];
    [item addObserver:self forKeyPath:@"selectedImage" options:0 context:nil];
    
    
    [self observeValueForKeyPath:nil ofObject:nil change:nil context:nil];
    
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    
    /**
     *  处理通知
     */
    [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self setImage:_item.image forState:UIControlStateNormal];
    [self setImage:_item.selectedImage forState:UIControlStateSelected];
    [self setTitle:_item.title forState:UIControlStateNormal];
    // 设置提醒数字
    self.badgeButton.badgeValue = self.item.badgeValue;
}

/**
 *  设置button的布局
 */
- (void)layoutSubviews
{
    [super layoutSubviews];
    /**
     *  图片的位置
     */
    CGFloat imageX = 0;
    CGFloat imageY = 0;
    CGFloat imageH = self.bounds.size.height * ImageRadio;
    CGFloat imageW = self.bounds.size.width;
    self.imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
    /**
     *  文字的位置
     */
    CGFloat titleY = imageH;
    CGFloat titleX = 0;
    CGFloat titleW = imageW;
    CGFloat titleH = self.bounds.size.height - imageH;
    self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);
    /**
     *  提示数字的位置
     */
    self.badgeButton.frame = CGRectMake(self.frame.size.width - self.badgeButton.frame.size.width - margin, 0, self.badgeButton.frame.size.width, self.badgeButton.frame.size.height);
    
}

- (XXBBadgeValue *)badgeButton
{
    if (_badgeButton == nil) {
        XXBBadgeValue *badgeButton = [[XXBBadgeValue alloc] init];
        [self addSubview:badgeButton];
        _badgeButton = badgeButton;
    }
    return  _badgeButton;
}
- (void)setHighlighted:(BOOL)highlighted{}

@end

//
//  XXBBadgeValue.h
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-21.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XXBBadgeValue : UIButton


@property (copy, nonatomic) NSString *badgeValue;

@end

//
//  XXBBadgeValue.m
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-21.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import "XXBBadgeValue.h"

/**
 *  注意，左右会有一个像素的偏差，右边的需要比左边的少2
 */
#define marginLeft 7
#define marginRight 5

@implementation XXBBadgeValue

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}
- (void)setup
{
    self.hidden = YES;
    self.userInteractionEnabled = NO;
    self.titleLabel.font = [UIFont systemFontOfSize:12];
    /**
     *  微调文字的位置
     */
    self.titleEdgeInsets = UIEdgeInsetsMake(0, marginLeft, 0, marginRight) ;
}
- (void)setBadgeValue:(NSString *)badgeValue
{
    _badgeValue = [badgeValue copy];
    if (badgeValue && badgeValue.intValue >0)
    {
        /**
         *  有值并且值不等于1 的情况向才进行相关设置
         */
        self.hidden = NO;
        
        if (badgeValue.length>2)
        {
            /**
             *  值大约99的画就显示一个小圆点
             */
            [self setImage:[UIImage imageNamed:@"new_dot"] forState:UIControlStateNormal];
            
            [self setBackgroundImage:nil forState:UIControlStateNormal];
            self.frame = CGRectMake(0, 0, 30, 20);
        }
        else
        {
            /**
             *  其他情况就设置为相应的数值
             */
            
            UIImage *bgImage = [UIImage imageNamed:@"main_badge"];
            
            /**
             *  设置提示按钮的背景图片
             */
            
            [self setBackgroundImage:[bgImage stretchableImageWithLeftCapWidth:bgImage.size.width * 0.5 topCapHeight:bgImage.size.height * 0.5] forState:UIControlStateNormal];
            [self setImage:nil forState:UIControlStateNormal];
            [self setTitle:badgeValue forState:UIControlStateNormal];
            // 根据文字的多少动态计算frame
            CGRect frame = self.frame;
            CGFloat badgeH = self.currentBackgroundImage.size.height;
            CGFloat badgeW ;
            NSMutableDictionary *dict = [NSMutableDictionary dictionary];
            dict[NSFontAttributeName] = self.titleLabel.font;
           
            CGSize badgeSize =  [self.badgeValue boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
            badgeW = badgeSize.width + marginLeft +marginRight;
            frame.size.width = badgeW;
            frame.size.height = badgeH;
            self.frame = frame;
        }
    }
    else
    {
        /**
         *  其他情况直接隐藏
         */
        self.hidden = YES;
    }
}


@end

希望大家给出宝贵的意见

收录于