自定義tabBar

(一)思路:(1)在原來的tabBar空間上面添加一個自定義的tabBar,這樣UIViewController的hidesBottomBarWhenPushed屬性依然有效;網絡

(2)在自定義的添加UIButton,並加上相應的事件便可;ide

(3)本實例參考網絡上的列子,根據本身項目的要求修改了部分。佈局

(二)自定義tabBar;atom

#import "XNTabBar.h"
#import "XNTabBarButton.h"
#define kunSelectColor [UIColor clearColor]
#define kSelectColor [UIColor colorWithRed:17.0f/255 green:110.0f/255 blue:181.0f/255 alpha:1.0f]

@interface XNTabBar ()
{
    UIButton *clickButton;
    XNTabBarButton *barButton;
}

@property (nonatomic,strong) UIButton *selectedBtn;
@end

@implementation XNTabBar

- (void)addButtonWithImage:(UIImage *)image selectedImage:(UIImage *)selectedImage barButtonTitle:(NSString *)title btnRect:(CGRect)frame
{
    barButton = [[XNTabBarButton alloc] initTabBarButtonWithImage:image tabBarButtonTitle:title tabBarRect:frame];
    [barButton addTarget:self action:@selector(btnSelectClick:) forControlEvents:UIControlEventTouchUpInside];//帶參數的監聽方法記得加"冒號"
    
    [self addSubview:barButton];
}

/**專門用來佈局子視圖, 別忘了調用super方法*/
- (void)layoutSubviews{
    [super layoutSubviews];
    
    [self selectedButtonIndex:self.seletedIndex];
    NSInteger count = self.subviews.count;
    for (int i = 0; i < count; i++)
    {
        //取得按鈕
        UIButton *btnCurrentClick = [self.subviews objectAtIndex:i];
        btnCurrentClick.tag = i; //設置按鈕的標記, 方便來索引當前的按鈕,並跳轉到相應的視圖 
    }
}
- (void)selectedButtonIndex:(NSInteger)selectIndex
{
    NSInteger count = self.subviews.count;
    for (int i = 0; i < count; i++)
    {
        if (self.seletedIndex == i)
        {
            UIButton *seleBtn = [self.subviews objectAtIndex:i];
            [seleBtn setBackgroundColor:kSelectColor];
            [self btnSelectClick:seleBtn];
            return;
        }
    }
}

/**
 *  自定義TabBar的按鈕點擊事件
 */
- (void)btnSelectClick:(UIButton *)button
{
    //1.先將以前選中的按鈕設置爲未選中
    self.selectedBtn.selected = NO;
    if (self.selectedBtn) {
        [self.selectedBtn setBackgroundColor:kunSelectColor];
    }
    //2.再將當前按鈕設置爲選中
    button.selected = YES;

    //卻換視圖控制器的事情,應該交給controller來作
    //最好這樣寫, 先判斷該代理方法是否實現
    if ([self.delegate respondsToSelector:@selector(tabBar:selectedFrom:to:)])
    {
        [self.delegate tabBar:self selectedFrom:self.selectedBtn.tag to:button.tag];
        //3.最後把當前按鈕賦值爲以前選中的按鈕
        self.selectedBtn = button;
        [button setBackgroundColor:kSelectColor];
    }
}

(三)自定義tabBar上的按鈕;代理

#import "XNTabBarButton.h"
#define kLblTopOffsety 4.0f
#define kigWidth 20.0f
#define kigHeight 20.0f
#define kLblHeight 15.0f
#define kbgColor [UIColor colorWithRed:0 green:160.0f/255 blue:223.0f/255 alpha:1.0f]

@interface XNTabBarButton ()
{
    UIImageView *igBarIcon;
    UILabel *lblTitle;
}
@end

@implementation XNTabBarButton

- (instancetype)initTabBarButtonWithImage:(UIImage *)image tabBarButtonTitle:(NSString *)title tabBarRect:(CGRect)rect
{
    self = [super initWithFrame:rect];
    if (self)
    {
        CGFloat kbtnTopOffsety = (CGRectGetHeight(rect)-(kigHeight+kLblHeight+kLblTopOffsety))/2;
        igBarIcon = [[UIImageView alloc] initWithFrame:({
            CGRect frame = CGRectMake((CGRectGetWidth(rect)-kigWidth)/2, kbtnTopOffsety, kigWidth, kigHeight);
            frame;
        })];
        igBarIcon.image = image;
        
        lblTitle = [[UILabel alloc] initWithFrame:({
            CGRect frame = CGRectMake(0, CGRectGetMaxY(igBarIcon.frame)+kLblTopOffsety, CGRectGetWidth(rect), kLblHeight);
            frame;
        })];
        lblTitle.text = title;
        lblTitle.textColor = [UIColor whiteColor];
        lblTitle.textAlignment = NSTextAlignmentCenter;
        lblTitle.font = [UIFont systemFontOfSize:12.0f];
        
        
        [self addSubview:igBarIcon];
        [self addSubview:lblTitle];
    }
    return self;
}
@end

(四)使用;code

//刪除現有的tabBar
    CGRect barRect = self.tabBar.bounds; //這裏要用bounds來加, 不然會加到下面去.看不見
    if (!self.xnTabBar)
    {
        self.xnTabBar = [[XNTabBar alloc] init]; //設置代理必須改掉前面的類型,不能用UIView
        self.xnTabBar.seletedIndex = self.selectedIndex;
        self.xnTabBar.delegate = self; //設置代理
        self.xnTabBar.frame = barRect;
        self.xnTabBar.backgroundColor = kbgColor;
        [self.tabBar addSubview:self.xnTabBar];//添加到系統自帶的tabBar上, 這樣能夠用的的事件方法. 而沒必要本身去寫
        
        //爲控制器添加按鈕
        NSInteger count = self.viewControllers.count;
        for (int i = 0; i < count; i++)
        {
            //根據有多少個子視圖控制器來進行添加按鈕
            NSString *imageName = [NSString stringWithFormat:@"%@",[igArray objectAtIndex:i]];
            NSString *barButtonTitle = [NSString stringWithFormat:@"%@",[titleArray objectAtIndex:i]];
            UIImage *image = [UIImage imageNamed:imageName];
            
            CGFloat x = i * ceilf(CGRectGetWidth(barRect)/count);
            CGFloat y = 0;
            CGFloat width = ceilf(CGRectGetWidth(barRect)/count);
            CGFloat height = CGRectGetHeight(barRect);
            [self.xnTabBar addButtonWithImage:image selectedImage:nil barButtonTitle:barButtonTitle btnRect:CGRectMake(x, y, width, height)];
        }
    }
相關文章
相關標籤/搜索