iOS开发笔记2 - 自定义tabbar

在开发过程中，TabBarController是几乎每个APP都需要用到的，其内部默认包含一个UITabBar，但这个TabBar并不是很好用，所以我们需要自定义TabBar及上面的Button，以实现我们自己想要的效果。

接下来我们开始自定义。

首先是TabBar的.h文件：

#import <UIKit/UIKit.h>@class DYHTabbar;@protocol DYHTabbarDelegate<NSObject>@optional-(void)tabBar:(DYHTabbar *)tabBar didSelectButtonFrom:(int)from To:(int)to;@end@interface DYHTabbar : UIView@property (nonatomic,weak) id<DYHTabbarDelegate> delegate;-(void)addButtonWithATabbarItem:(UITabBarItem* )item;@end

分析：

1.自定义的TabBar只需要能够在上面放置按钮即可，故我们继承自UIView即可。

2.自定义的TabBar上面的按钮有几个，内容如何，应该由控制器决定，故我们只需要提供API: addButtonWithATabbarItem

让控制器传递一个系统自带的TabBarItem模型给Tabbar来添加按钮

3.很明显控制器需要监听TabBar上按钮的点击，来切换子控制器，故我们定义一个代理协议，由控制器实现

接下来是TabBar的.m文件

#import "DYHTabbar.h"#import "DYHTabbarButton.h"@interface DYHTabbar()@property (nonatomic,strong) NSMutableArray* buttons;@property (nonatomic,weak) DYHTabbarButton* selectedButton;@end@implementation DYHTabbar-(NSMutableArray *)buttons{    if (_buttons == nil) {        _buttons = [NSMutableArray array];    }    return _buttons;}-(void)addButtonWithATabbarItem:(UITabBarItem *)item{    DYHTabbarButton* button = [[DYHTabbarButton alloc]init];    [self addSubview:button];        button.item = item;        [button addTarget:self action:@selector(buttonClick:)forControlEvents:UIControlEventTouchDown];        [self.buttons addObject:button];        if (self.buttons.count == 1) {        [self buttonClick:button];    }}-(void)buttonClick:(DYHTabbarButton *)button{    NSLog(@"buttonClick:");    if ([self.delegaterespondsToSelector:@selector(tabBar:didSelectButtonFrom:To:)]) {        [self.delegate tabBar:selfdidSelectButtonFrom:self.selectedButton.tag To:button.tag];    }    self.selectedButton.selected = NO;    button.selected = YES;    self.selectedButton = button;}-(void)layoutSubviews{    [super layoutSubviews];    CGFloat tabBarH = self.frame.size.height;    CGFloat tabBarW = self.frame.size.width;            CGFloat buttonW = tabBarW / self.buttons.count;    CGFloat buttonH = tabBarH;    CGFloat buttonY = 0;        for (int i = 0; i<self.buttons.count ; i++) {        //取出按钮        DYHTabbarButton* button = self.buttons[i];        //设置按钮的frame        CGFloat buttonX = i*buttonW;        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);        //绑定TAG        button.tag = i;            }}@end

分析:

1.tabbar需要访问内部的按钮，故有数组buttons

2.tabbar需要知道当前被选中的按钮，故有属性selectedButton

3.buttons是mutableArray，故进行懒加载

4.addbutton，添加按钮，接收UITabBarItem模型以设置按钮属性，默认点击第一个按钮，并且每个按钮被点击通知Tabbar

5.buttonClick:按钮被点击的回调方法，由于Tabbar本身没有改变控制器的能力，故必须通知其控制器，执行代理方法,整个消息路径是 button被点击--(通知)-->Tabbar--(通知)-->控制器->执行切换控制器操作。另外，在这个方法中需要设置按钮的点击状态（样式变化）以及Tabbar的selectedButton

6.layoutSubviews，在TabBar加载时自动调用，算出按钮的frame，很简单的算法，要注意的是这里需要set一下按钮的tag值，用来标记这是第几个按钮。

接下来我们来看看自定义的button，由于我们自定义的整个Tabbar本身是透明的，故实际显示的效果全看我们自定义的Button。

.h文件

#import <UIKit/UIKit.h>@interface DYHTabbarButton : UIButton@property (nonatomic,strong) UITabBarItem* item;@end

分析:

1.没什么好说的，一个模型属性来接收模型

.m文件

#import "DYHTabbarButton.h"//图标比例#define DYHTabBarButtonImageRatio 0.7//按钮默认文字颜色#define DYHTabBarButtonTitleColor (iOS7 ? [UIColor blackColor] : [UIColor whiteColor])//选中文字颜色#define DYHTabBarButtonTitleSlectedColor (iOS7 ? DYHColor(234,103,0) : DYHColor(248,139,0))@implementation DYHTabbarButton- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.imageView.contentMode =UIViewContentModeCenter;        self.titleLabel.textAlignment = NSTextAlignmentCenter;        self.titleLabel.font = [UIFont systemFontOfSize:10];        [self setTitleColor:DYHTabBarButtonTitleColorforState:UIControlStateNormal];        [self setTitleColor:DYHTabBarButtonTitleSlectedColorforState:UIControlStateSelected];            }    return self;}-(void)setItem:(UITabBarItem *)item{    _item = item;    //KVO 监听属性    [item addObserver:self forKeyPath:@"badgeValue"options:0 context:nil];    [item addObserver:self forKeyPath:@"title" options:0context:nil];    [item addObserver:self forKeyPath:@"image" options:0context:nil];    [item addObserver:self forKeyPath:@"selectedImage"options:0 context:nil];            [self observeValueForKeyPath:nil ofObject:nil change:nilcontext:nil];}//监听到某个对象的属性改变了就会调用-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{        //设置文字和图片    [self setTitle:self.item.title forState:UIControlStateNormal];    [self setImage:self.item.imageforState:UIControlStateNormal];    [self setImage:self.item.selectedImageforState:UIControlStateSelected];    }-(void)dealloc{    [self removeObserver:self forKeyPath:@"badgeValue"];    [self removeObserver:self forKeyPath:@"title"];    [self removeObserver:self forKeyPath:@"image"];    [self removeObserver:self forKeyPath:@"selectedImage"];}-(CGRect)titleRectForContentRect:(CGRect)contentRect{    CGFloat titleY =contentRect.size.height*DYHTabBarButtonImageRatio;    CGFloat titleW =contentRect.size.width;    return CGRectMake(0, titleY, titleW , contentRect.size.height - titleY);    }-(CGRect)imageRectForContentRect:(CGRect)contentRect{    CGFloat imageW = contentRect.size.width;    CGFloat imageH = contentRect.size.height*DYHTabBarButtonImageRatio;    return CGRectMake(0, 0, imageW, imageH);}@end

分析: 1.init没什么好说的，设置一些颜色字体，根据需求来

2.setItem,读取模型数据的方法，需要注意的是这里我们使Item监听自己的值改变，为的是完善逻辑，使用button.item.属性同样也能更改button的样式；另外我们默认调用一次值改变回调方法，初始化。

3.值改变回调方法，没什么好说的，根据值改变设置按钮属性

4.dealloc方法，在这个对象被销毁时停止监听

        5，6用来设置按钮上的文字和图片的显示样式

至此我们的自定义Tabbar完成了，不过controller在使用的时候还有一些要注意的(我们默认使用UITabBarController及其子类):

1.需要写如下代码

-(void)viewWillAppear:(BOOL)animated{        [super viewWillAppear:animated];        for (UIView *child in self.tabBar.subviews) {        if ([child isKindOfClass:[UIControl class]]) {            [child removeFro}mSuperview];        }    }

因为tabBarController内部本身有一个TabBar,执行addChildController操作后默认tabbar也会加上按钮，需要移除这些按钮，否则会造成显示错误。

2.实现代理方法：

-(void)tabBar:(DYHTabbar *)tabBar didSelectButtonFrom:(int)from To:(int)to{    self.selectedIndex = to;}

由于tabBarController本身重写了selectedIndex的set方法，并且我们传的值恰好与子控制器顺序相对应，故只需要这一句代码即可完成切换