UITabBar 自定義

系統自帶的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

希望大家給出寶貴的意見