自定義UITabbarController

 

 

最近使用新浪微博的圖片模仿他的界面作了一個demo。在作新浪微博demo的時候第一個問題就時定製它下面的底部選項卡菜單(UITabBar)。由於系統提供給咱們的UITabBar不少樣式不能隨意更改。那隻能自定義了。下面我會介紹如何來自定義UITabBar

 

一、首先咱們要定義UITabItem 的實體

　　UITabItem 就是每個選項。。該選項有那些元素呢？

　　標題、圖片、選中後的圖片、標題的字體、選中後顯示的ViewController.

　　肯定了以上元素後。。開始動手創造實體。

CTTabBarItem.h

////  weibo
//
//  Created by 王 強 on 13-8-8.
//  Copyright (c) 2013年 王 強. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface CTTabBarItem : NSObject
{

}

@property (nonatomic,retain) NSString * name;
@property (nonatomic,retain) UIImage * img;
@property (nonatomic,readonly) UIFont *fontSize;
@property (nonatomic,retain) UIImage * checkedimg;
@property (nonatomic,readonly) UIViewController * viewController;



-(id)initWithName:(NSString *) aname
             aImg:(UIImage *) aimag
       checkedImg:(UIImage *) acheckedimg;

/**
    aname 按鈕標題
    aimg  按鈕圖標
    checkedImg 選中時的圖標
    viewController 選中時視圖區域的顯示。
 */
-(id)initWithName:(NSString *) aname
             aImg:(UIImage *) aimag
       checkedImg:(UIImage *) acheckedimg
  ViewController :(UIViewController *) aviewController;


// 設置選中時的視圖區域

-(void)setViewController:(UIViewController *)aviewController;

@end

CTTabBarItem.m

//
//  CTTabBarButton.m
//  weibo
//
//  Created by 王 強 on 13-8-8.
//  Copyright (c) 2013年 王 強. All rights reserved.
//

#import "CTTabBarItem.h"

@implementation CTTabBarItem

@synthesize img,checkedimg,name,fontSize,viewController;
-(id)initWithName:(NSString *)aname aImg:(UIImage *)aimag checkedImg:(UIImage *)acheckedimg 
{
    if(self = [super init]){
        img = aimag;
        name = aname;
        fontSize = [UIFont systemFontOfSize:10.0f];
        checkedimg = acheckedimg;
        viewController = [[UIViewController  alloc] init];
        viewController.view.backgroundColor = [UIColor whiteColor];
        viewController.view.frame = CGRectMake(0, 0, 320, 416);
    }
    
    return self;
}
-(id)initWithName:(NSString *)aname aImg:(UIImage *)aimag checkedImg:(UIImage *)acheckedimg ViewController:(UIViewController *)aviewController
{
    if(self = [super init]){
        img = aimag;
        name = aname;
        fontSize = [UIFont systemFontOfSize:10.0f];
        checkedimg = acheckedimg;
        viewController = aviewController;
        viewController.view.frame = CGRectMake(0, 0, 320, 416);
    }
    
    return self;
}
-(void)setViewController:(UIViewController *)aviewController
{
    viewController = aviewController;
    viewController.view.frame = CGRectMake(0, 0, 320, 416);
}


@end

 

實體文件完成後咱們增長一個CTTabBarView 的類。它將會幫咱們完成tabbar的背景、和初始化各項barItem。並控制barItem的切換效果。看代碼：
CTTabBarView.h

//
//  CTTabBarViewController.h
//  weibo
//
//  Created by 王 強 on 13-8-8.
//  Copyright (c) 2013年 王 強. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "CTTabBarItem.h"

@protocol CTTabBarViewDelegate <NSObject>

//btn 被點擊的button item 被點擊button的 數據源
@required
-(void) clickButton : (UIButton *) btn TabBarButton : (CTTabBarItem *) item;
@end

@interface CTTabBarView : UIView
{
    NSMutableArray * _showbtn;
    float avgWidth;
    int itemcount;
    int selectedIndex;
    float foolWidth;
}

@property(nonatomic,retain) NSMutableArray * buttons;
@property(nonatomic,retain) UIView * superView;


@property(nonatomic,retain)UIView * checkView;
@property(nonatomic,retain)id <CTTabBarViewDelegate> delegate;

-(id)initWithColor  :(UIColor *) color
           Buttons  :(NSArray *)buttons
        SuperView   :(UIView *) asuperView;

-(id)initWithImage  :(UIImage *) aimg
           Buttons  :(NSArray *)abuttons
        SuperView   :(UIView *) asuperView;

-(void)checkedButton:(UIButton *) sender;

@end

CTTabBarView.m

//
//  CTTabBarViewController.m
//  weibo
//
//  Created by 王 強 on 13-8-8.
//  Copyright (c) 2013年 王 強. All rights reserved.
//

#import "CTTabBarView.h"

@interface CTTabBarView ()

@end

@implementation CTTabBarView

@synthesize buttons,checkView,superView;
@synthesize delegate;


-(id) initWithColor:(UIColor *)color Buttons:(NSArray *)btns SuperView:(UIView *)asuperView
{
    if(self = [super init])
    {
        //背景初始化
        self.superView = asuperView;
        self.backgroundColor = color;
        //按鈕數據初始化
        self.buttons = [[NSMutableArray alloc]initWithArray:btns];
        _showbtn =  [[NSMutableArray alloc ]init];

        //背景位置
        CGRect frame = CGRectMake(0, 416, 320, 45);
        self.frame = frame;
        
        // 選中的視圖初始化
        checkView = [[UIView alloc ]init];
        
        selectedIndex = 0;
        itemcount = [buttons  count];
        foolWidth  = self.frame.size.width;
        avgWidth = foolWidth / itemcount - 0;
        
        [self selectedViewStyle];
        [self putButtons];
        [self showButtons];
        
        CTTabBarItem * tmpb =  buttons[selectedIndex];
        [superView addSubview:tmpb.viewController.view];

//        [self changeTab:1];
        

        
    }
    return self;
}
-(id)initWithImage:(UIImage *)aimg Buttons:(NSArray *)abuttons SuperView:(UIView *)asuperView
{
    UIColor * c = [[UIColor alloc ] initWithPatternImage:aimg];
    if(self = [self initWithColor:c Buttons:abuttons SuperView:asuperView])
    {
        
    }
    return self;
}
-(void) selectedViewStyle
{
    UIImage *  im = [UIImage imageNamed:@"tabbar_slider.png"];
    CGRect frame = CGRectMake(avgWidth * selectedIndex, 0, avgWidth, 44);
    checkView.frame = frame;
    UIColor * c = [[UIColor alloc ]initWithPatternImage:im];
    checkView.backgroundColor = c;
//    checkView.alpha = 0.4;
    [self  addSubview:self.checkView];
    
    


}

/**
    裝載buttons
 */
-(void) putButtons
{
    
    for (int i = 0; i<itemcount; i++) {
        CTTabBarItem * tmpb  = [self.buttons objectAtIndex:i];
        UIButton * btn = [[UIButton alloc ] initWithFrame:CGRectMake(avgWidth * i, 0, avgWidth, 44)];
        [btn setImage:tmpb.img forState:UIControlStateNormal];
        [btn setImage:tmpb.checkedimg forState:UIControlStateHighlighted];

        btn.tag = i;
        [btn setTitle:tmpb.name forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(checkedButton:) forControlEvents:UIControlEventTouchUpInside];
        
        [btn.titleLabel setFont:tmpb.fontSize];
        [btn setImageEdgeInsets:UIEdgeInsetsMake(-15, 14, 0, 16)];
        [btn setTitleEdgeInsets:UIEdgeInsetsMake(20, -36, 0, -5)];
        [_showbtn  addObject:btn];
    }
    CTTabBarItem * tmpb =  buttons[selectedIndex];
    [_showbtn[selectedIndex] setImage: tmpb.checkedimg forState:UIControlStateNormal];
    

}
/**
    show出buttons
 */
-(void)showButtons
{
    
    for (id o in _showbtn) {
        //        [self.view addSubview:];
        [self addSubview:o];
    }
}
/**
    buttons的觸發事件
 */
-(void)checkedButton : (UIButton *) sender
{
    
   
    [self changeTab:sender.tag];


    [delegate clickButton:sender TabBarButton:buttons[sender.tag]];
    
}
-(void)changeTab:(int) index
{
    
    CTTabBarItem * tmpb1 =  buttons[selectedIndex];
    [_showbtn[selectedIndex]  setImage:tmpb1.img forState:UIControlStateNormal];
    
    selectedIndex = index;
    
    CTTabBarItem * tmpb2 =  buttons[selectedIndex];
    [_showbtn[selectedIndex]  setImage:tmpb2.checkedimg forState:UIControlStateNormal];
    
    [UIView beginAnimations:nil context:nil];
    //設定動畫持續時間
    [UIView setAnimationDuration:0.1f];
    
    CGRect frame = CGRectMake(avgWidth * selectedIndex, 0, avgWidth, 44);
    checkView.frame = frame;
    
    [UIView commitAnimations];     //動畫結束 

    [superView addSubview:tmpb2.viewController.view];
    //[superView presentModalViewController:tmpb2.viewController animated:NO];


    

}

@end