iOS 自定義TabBar(仿新浪微網誌TabBar)

UITabBar 是一個比較常用的工具

有的時候系統的樣式不能滿足需求，我們可以考慮自定義

中間的+ 就屬于自定義樣式

我們可以通過自定義TabBar來實作

首先建立一個項目

建立一個類繼承字UITabBar

建立一個協定和按鈕

#import <UIKit/UIKit.h>

@class MYTabBar;

@protocol MYTabBarDelegate <UITabBarDelegate>

@optional

- (void)tabBarDidClickPlusButton:(MYTabBar *)tabBar;

@end


@interface MYTabBar : UITabBar

@property (strong,nonatomic) UIButton *plusBtn;
@property (nonatomic, weak) id<MYTabBarDelegate> tabBarDelegate;

@end
           

在MyTabBar 的實作中首先添加按鈕 設定按鈕的圖檔 點選等

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 添加一個按鈕到tabbar中
        UIButton *plusBtn = [[UIButton alloc] init];
        [plusBtn setImage:[UIImage imageNamed:@"tabbar_mainbtn1.png"] forState:UIControlStateNormal];
        CGRect temp = plusBtn.frame;
        temp.size=plusBtn.currentImage.size;
        plusBtn.frame=temp;
        [plusBtn addTarget:self action:@selector(plusClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:plusBtn];
        self.plusBtn = plusBtn;
    }
    return self;
}
           

将按鈕點選的方法設定到他的代理中

#pragma mark 加号按鈕點選事件處理器
- (void)plusClick
{
    // 通知代理
    if ([self.tabBarDelegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
        [self.tabBarDelegate tabBarDidClickPlusButton:self];
    }
}
           

同時 ，重新調整按鈕的位置

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // 1.設定加号按鈕的位置
    CGPoint temp = self.plusBtn.center;
    temp.x=self.frame.size.width/2;
    temp.y=self.frame.size.height/2;
    self.plusBtn.center=temp;
    
    // 2.設定其它UITabBarButton的位置和尺寸
    CGFloat tabbarButtonW = self.frame.size.width / 5;
    CGFloat tabbarButtonIndex = 0;
    for (UIView *child in self.subviews) {
        Class class = NSClassFromString(@"UITabBarButton");
        if ([child isKindOfClass:class]) {
            // 設定寬度
            CGRect temp1=child.frame;
            temp1.size.width=tabbarButtonW;
            temp1.origin.x=tabbarButtonIndex * tabbarButtonW;
            child.frame=temp1;
            // 增加索引
            tabbarButtonIndex++;
            if (tabbarButtonIndex == 2) {
                tabbarButtonIndex++;
            }
        }
    }
}
           

好了 自定義TabBar 好了 

我們在建立一個類MainViewController 繼承自UITabBarController  

使用KVC方法設定TabBar

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    MYTabBar *tabBar = [[MYTabBar alloc] init];
    tabBar.tabBarDelegate = self;
    
    [self setValue:tabBar forKeyPath:@"tabBar"];
    
}
           

同時實作代理方法

#pragma mark - MYTabBarDelegate代理方法
- (void)tabBarDidClickPlusButton:(MYTabBar *)tabBar
{
    AddViewController *addVC= [[AddViewController alloc] init];
    
    [self presentViewController:addVC animated:YES completion:nil];
}
           

好了  剩下的就是設定UITabBarControl 

我們在項目預設生成的AppDelegate 中設定rootViewController為我們的MainViewControler

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    //建立幾個ViewController
    FirstViewController *firstVC = [[FirstViewController alloc]init];
    SecondViewController *secondVC = [[SecondViewController alloc]init];
    ThirdViewController *thirdVC = [[ThirdViewController alloc]init];
    ForthViewController *forthVC = [[ForthViewController alloc]init];
    
    
    //建立MainViewController并将建立好的ViewController添加到TabBar上
    MainViewController *tabBarC=[[MainViewController alloc]init];
    [email protected][firstVC,secondVC,thirdVC,forthVC];
    
    for (UIViewController *controller in tabBarC.viewControllers) {
        UIViewController *view= controller.view;
    }
    
    self.window.rootViewController=tabBarC;
    return YES;
}
           

完成之後看下效果

TabBar的樣式已經出來了 如果需要，可以自己換成微網誌的圖檔就可以了

源代碼 我上傳到QQ群 大家有興趣去看下

demo:【60331MYTabBar.zip】

蘋果開發群 ：414319235  歡迎加入，共同學習