自定義tabBarController

前言：

        蘋果官方已經提供咱們很好用的工具欄系統的tabBar,可其對於項目的靈活需求仍是有必定的侷限性的，畢竟系統的UITabBarController的界面已是系統固定，若想要知足用戶體驗比較好的產品需求的要求，則必須咱們去本身定義tabBarController。好了，廢話很少說，讓咱們開始吧。

 

　　界面展現：

　　      

　　（由於圖片準備不是很好看，望你們見諒 ~ ！~）

　　

　　1.新建文件：新建一個繼承於UITabBarController的控制器（我將它命名爲WJTabBarController），以及繼承於UITabBar的視圖（我將它命名爲WJTabBar）

　　     

　　

　　2.給提供你們一個方便計算tabBar的Frame的類目： UIView+Frame

.h 文件

#import <UIKit/UIKit.h>

@interface UIView (Frame)
// 分類不能添加成員屬性
// @property若是在分類裏面，只會自動生成get,set方法的聲明，不會生成成員屬性，和方法的實現
@property (nonatomic, assign) CGFloat x;
@property (nonatomic, assign) CGFloat y;
@property (nonatomic, assign) CGFloat width;
@property (nonatomic, assign) CGFloat height;

@end

　　

.m文件

 

#import "UIView+Frame.h"

@implementation UIView (Frame)

- (void)setX:(CGFloat)x
{
    CGRect frame = self.frame;
    frame.origin.x = x;
    self.frame = frame;
}

- (CGFloat)x
{
    return self.frame.origin.x;
}

- (void)setY:(CGFloat)y
{
    CGRect frame = self.frame;
    frame.origin.y = y;
    self.frame = frame;
}

- (CGFloat)y
{
    return self.frame.origin.y;
}

- (CGFloat)width
{
    return self.frame.size.width;
}

- (void)setWidth:(CGFloat)width
{
    CGRect frame = self.frame;
    frame.size.width = width;
    self.frame = frame;
}


- (CGFloat)height
{
    return self.frame.size.height;
}

- (void)setHeight:(CGFloat)height
{
    CGRect frame = self.frame;
    frame.size.height = height;
    self.frame = frame;
}

@end

 

　　

　　

　　3.爲tabBarController作準備，先把TabBar的原型作出來：  （類WJTabBar中）

.h文件下：            這裏我使用了協議，實如今Controller中實現點擊事件

#import <UIKit/UIKit.h>

@class WJTabBar;
@protocol WJTabBarDelegate <NSObject>

/**
 *  點擊中部按鈕的時候調用
 */
-(void)tabBarDidClickCenterButton:(WJTabBar *)tabBar;

@end

@interface WJTabBar : UITabBar

@property (nonatomic, weak) id<WJTabBarDelegate>tabBarDelegate; //設置代理屬性

@end

　　

.m文件下：

#import "WJTabBar.h"
#import "UIView+Frame.h"


@interface WJTabBar ()

@property (nonatomic,weak) UIButton *centerButton;

@end

@implementation WJTabBar

-(instancetype)initWithFrame:(CGRect)frame
{
    if ([super initWithFrame:frame]) {
        
        //設置tabbar背景
        [self setupBackground];
        //添加中部按鈕
        [self setupCenterButton];
        
    }
    return self;
}

-(void)setupBackground
{
    self.backgroundColor = [UIColor whiteColor];
//    [self setBackgroundImage:[UIImage imageNamed:@"background_tabbar"]];
}

/**
 *  添加中部按鈕
 */
-(void)setupCenterButton
{
    UIButton *centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [centerButton setBackgroundImage:[UIImage imageNamed:@"btn_一鍵百科_未選中"] forState:UIControlStateNormal];
    [centerButton setBackgroundImage:[UIImage imageNamed:@"btn_一鍵百科_選中"] forState:UIControlStateHighlighted];
    [centerButton addTarget:self action:@selector(centerButtonClick) forControlEvents:UIControlEventTouchUpInside];
    [centerButton sizeToFit];
    [self addSubview:centerButton];
    self.centerButton = centerButton;
}
/**
 *  中部按鈕的點擊方法
 */
-(void)centerButtonClick
{
    if (_tabBarDelegate && [_tabBarDelegate respondsToSelector:@selector(tabBarDidClickCenterButton:)]) {
        [_tabBarDelegate tabBarDidClickCenterButton:self];
    }
}

/**
 *  佈局子控件
 */
-(void)layoutSubviews
{
    [self setupAllTabBarButtonsFrame];
}

/**
 *  設置因此tabBarButton的frame
 */
-(void)setupAllTabBarButtonsFrame
{
    int index = 0;
    
    for (UIView *tabBarButton in self.subviews)
    {
        // 若是不是UITabBarButton， 直接跳過
        if (![tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) continue;
        
        // 根據索引調整位置
        [self setupTabBarButtonFrame:tabBarButton atIndex:index];
        
        // 索引增長
        index++;
    }
}

/**
 *  設置摸個按鈕的frame
 *
 *  @param tabBarButton 須要設置的按鈕
 *  @param index        按鈕所在的index
 */
- (void)setupTabBarButtonFrame:(UIView *)tabBarButton atIndex:(int)index
{
    CGFloat buttonW = self.width / (self.items.count + 1);
    CGFloat buttonH = self.height;
    
    tabBarButton.width =  buttonW;
    tabBarButton.height = buttonH;
    
    if (index >= 2) {
        tabBarButton.x = buttonW * (index + 1);
    }
    else {
        tabBarButton.x = buttonW * index;
    }
    tabBarButton.y = 0;
    self.centerButton.center = CGPointMake(self.width * 0.5, self.height * 0.5);
}


@end

　　這樣咱們的WJTabBar就已經寫好了　　

 

　　4.接下來就是咱們的WJTabBarController：

.h文件下：

#import <UIKit/UIKit.h>

@interface WJTabBarController : UITabBarController

@end

.m文件下：

#import "WJTabBarController.h"
#import "WJTabBar.h"

@interface WJTabBarController () <WJTabBarDelegate>

@property (nonatomic,strong) WJTabBar *customTabBar;

@end

@implementation WJTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //自定義tabBar
    [self setupTabBar];
    
    // 添加全部子控制器
    [self setUpAllChildViewController];
}

/**
 *  添加全部子控制器
 */
-(void)setUpAllChildViewController
{
    //發現
    UIViewController *mainVC = [[UIViewController alloc] init];
    [self setupOneChildVC:mainVC title:@"首頁" imageName:@"icon_首頁_未選中" selectedImageName:@"icon_首頁_選中"];
    
    //淘淘淘
    UIViewController *shopVC = [[UIViewController alloc] init];
    [self setupOneChildVC:shopVC title:@"商城" imageName:@"icon商城_未選中" selectedImageName:@"btn_商城_選中"];
    shopVC.view.backgroundColor = [UIColor purpleColor];
    
    //子商城
    UIViewController *cartVC = [[UIViewController alloc] init];
    [self setupOneChildVC:cartVC title:@"購物車" imageName:@"icon_購物車_未選中" selectedImageName:@"btn_購物車_選中"];
    cartVC.view.backgroundColor = [UIColor cyanColor];
    //個人
    UIViewController *mineVC = [[UIViewController alloc] init];
    [self setupOneChildVC:mineVC title:@"個人" imageName:@"icon_我的中心_未選中" selectedImageName:@"btn_我的中心_選中"];
    mineVC.view.backgroundColor = [UIColor whiteColor];
}

- (void)setupOneChildVC:(UIViewController *)VC title:(NSString *)title imageName:(NSString *)imageName selectedImageName:(NSString *)selectedImageName
{
    //1.設置tabBarItem
    //設置標題
    VC.title = title;
    
    // 設置圖片
    VC.tabBarItem.image = [UIImage imageNamed:imageName];

    // 若是是iOS7以上, 不須要渲染圖片
    VC.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
    // 設置tabBarItem的普通文字顏色
    NSMutableDictionary *textAttrs = [NSMutableDictionary dictionary];
    textAttrs[NSForegroundColorAttributeName] = [UIColor colorWithRed:0.475  green:0.475  blue:0.475 alpha:1];
    textAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:10];
    [VC.tabBarItem setTitleTextAttributes:textAttrs forState:UIControlStateNormal];
    
    // 設置tabBarItem的選中文字顏色
    NSMutableDictionary *selectedTextAttrs = [NSMutableDictionary dictionary];
    selectedTextAttrs[NSForegroundColorAttributeName] = [UIColor colorWithRed:17/255.0  green:126/255.0  blue:146/255.0 alpha:1];
    [VC.tabBarItem setTitleTextAttributes:selectedTextAttrs forState:UIControlStateSelected];
    
    UINavigationController *navi = [[UINavigationController alloc] initWithRootViewController:VC];
    [self addChildViewController:navi];
}

/**
 *  自定義tabBar
 */
-(void)setupTabBar
{
    self.customTabBar = [[WJTabBar alloc] init];
    _customTabBar.tabBarDelegate = self;
    //更換系統自帶的tabBar
    [self setValue:self.customTabBar forKeyPath:@"tabBar"];  //這裏利用KVC的方式去更換系統的tabBar  由於系統上的tabBar是readonly屬性
}

/**
 *  實現tabBar中間按鈕的點擊事件
 */
-(void)tabBarDidClickCenterButton:(WJTabBar *)tabBar
{
    NSLog(@"%s",__func__);
}


@end