要自定义tabBarController,就要自定义tabBar.要自定义tabBar就要自定义item.所以,咱们要自定义个item,也就是button
1.自定义的按钮要文字在下面,图片在文字的上面,并且,文字和图片要相对于按钮居中
#define HXTabBarButtonImageRatio 0.6
@implementation HXTabBarButton
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
// 初始化
[self initialize];
}
return self;
}
- (void)initialize {
[self setBackgroundImage:[UIImage imageNamed:@"tabbar_slider"] forState:UIControlStateSelected];
self.imageView.contentMode = UIViewContentModeCenter;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
self.titleLabel.font = [UIFont systemFontOfSize:15];
[self setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
[self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}
- (void)setHighlighted:(BOOL)highlighted {
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect {
CGFloat imageW = contentRect.size.width;
CGFloat imageH = contentRect.size.height * HXTabBarButtonImageRatio;
return CGRectMake(0, 0, imageW, imageH);
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
CGFloat titleW = contentRect.size.width;
CGFloat titleY = contentRect.size.height * HXTabBarButtonImageRatio;
CGFloat titleH = contentRect.size.height * (1 - HXTabBarButtonImageRatio);
return CGRectMake(0, titleY, titleW, titleH);
}
// item是从外界传过来的
- (void)setItem:(UITabBarItem *)item {
_item = item;
[self setTitle:item.title forState:UIControlStateNormal];
[self setImage:item.image forState:UIControlStateNormal];
[self setImage:item.selectedImage forState:UIControlStateSelected];
}
2.自定义tabBar,就需要用到我们的自定义按钮了
@property (nonatomic , strong) HXTabBarButton *selectButton;
给外界一个方法,让外界调用这个方法来添加item
- (void)addTabBarWithItem:(UITabBarItem *)item;
因为是自定义的按钮,需要一个代理方法
/**
从一个控制器跳到另一个控制器
@param from 现在控制器的位置
@param to 目标控制器的位置
*/
- (void)tabbar:(HXTabBar *)tabBar didSelectButtonFrom:(NSInteger)from to:(NSInteger)to;
遵循代理
@property (nonatomic , weak) id<HXTabBarDelegate>delegate;
在.m文件中实现添加item的方法
- (void)addTabBarWithItem:(UITabBarItem *)item {
HXTabBarButton *button = [[HXTabBarButton alloc] init];
button.item = item;
[self addSubview:button];
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
// 默认选中第一个按钮
if (self.subviews.count ==1) {
[self buttonClick:button];
}
}
监听按钮的点击事件
- (void)buttonClick:(HXTabBarButton *)sender {
if ([self.delegate respondsToSelector:@selector(tabbar:didSelectButtonFrom:to:)]) {
[self.delegate tabbar:self didSelectButtonFrom:self.selectButton.tag to:sender.tag];
}
self.selectButton.selected = NO;
sender.selected = YES;
self.selectButton = sender;
}
设置按钮的位置
- (void)layoutSubviews {
[super layoutSubviews];
for (int index = 0; index <self.subviews.count; index++) {
// 1.取出按钮
HXTabBarButton *btn = self.subviews[index];
// 2.设置frame
CGFloat buttonW = self.frame.size.width / self.subviews.count;
CGFloat buttonX = index * buttonW;
CGFloat buttonY = 0;
CGFloat buttonH = self.frame.size.height;
btn.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
// 3.绑定tag
btn.tag = index;
}
}
通过一张图片,给tabBar设置背景
- (instancetype)init
{
self = [super init];
if (self) {
self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tabbar_background"]];
}
return self;
}
3.tabBar搞定之后,开始tabBarController
@property (nonatomic , strong) HXTabBar *customTabBar;
添加tabBar
HXTabBar *customTabBar = [[HXTabBar alloc] init];
customTabBar.frame = self.tabBar.bounds;
customTabBar.delegate = self;
[self.tabBar addSubview:customTabBar];
self.customTabBar = customTabBar;
添加了自定义的tabBar,就需要删除系统自带的tabBar
// 删除系统自带的item
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
for (UIView *child in self.tabBar.subviews) {
if ([child isKindOfClass:[UIControl class]]) {
[child removeFromSuperview];
}
}
}
遵循按钮的代理,
- (void)tabbar:(HXTabBar *)tabBar didSelectButtonFrom:(NSInteger)from to:(NSInteger)to {
// NSLog(@"%ld , %ld" , (long)from , (long)to);
self.selectedIndex = to;
}
将控制器添加到tabBarController上
- (void)setupAllChildVC {
[self setupChildViewController:[HXHomeViewController new] title:@"首页" image:@"tabbar_home" selectImage:@"tabbar_home_selected"];
[self setupChildViewController:[HXMessageViewController new] title:@"消息" image:@"tabbar_message_center" selectImage:@"tabbar_message_center_selected"];
[self setupChildViewController:[HXDiscoverViewController new] title:@"广场" image:@"tabbar_discover" selectImage:@"tabbar_discover_selected"];
[self setupChildViewController:[HXMainViewController new] title:@"我" image:@"tabbar_music" selectImage:@"tabbar_music_selected"];
}
添加控制器进行封装的方法
/**
初始化一个控制器
@param childVC 需要初始化的子控制器
@param title 子控制器的标题
@param image tabbar的image
@param selectImage 选中tabbar的image
*/
- (void)setupChildViewController:(UIViewController *)childVC title:(NSString *)title image:(NSString *)image selectImage:(NSString *)selectImage {
childVC.title = title;
childVC.tabBarItem.image = [UIImage imageNamed:image];
// imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal取消图片渲染
childVC.tabBarItem.selectedImage = [[UIImage imageNamed:selectImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UINavigationController *childNav = [[UINavigationController alloc] initWithRootViewController:childVC];
[self addChildViewController:childNav];
// 添加
[self.customTabBar addTabBarWithItem:childVC.tabBarItem];
}
到这里就搞定了,看看效果图吧
效果图1.png
