今天在做项目的时候,突然有一个模块需要自定义TabBar条.

在平常很多做项目的时候,都没有去自定义过,大部分都是使用系统自带的.今天整理一个自定义TabBar条的步骤.

首先看下我们最终实现的效果：

首先需要继承UItabBar自定义一个自己的tabBar

.h
#import <UIKit/UIKit.h>@class THTabBar; @protocol THTabBarDelegate <UITabBarDelegate> @optional - (void)tabBarDidClickPlusButton:(THTabBar *)tabBar; @end @interface THTabBar : UITabBar @property (nonatomic, weak) id<THTabBarDelegate> myDelegate; @end

.m
#import "THTabBar.h"
#import "UIBarButtonItem+Extension.h"
#import "UIView+Extension.h" @interface THTabBar () @property (nonatomic, weak) UIButton *plusBtn; @end @implementation THTabBar - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { UIButton *plusBtn = [[UIButton alloc] init]; [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal]; [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted]; [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal]; [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted]; plusBtn.size = plusBtn.currentBackgroundImage.size; [plusBtn addTarget:self action:@selector(plusBtnClick) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:plusBtn]; self.plusBtn = plusBtn; } return self; } /** * 加号按钮点击 */ - (void)plusBtnClick { // 通知代理 if ([self.delegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) { [self.myDelegate tabBarDidClickPlusButton:self]; } } /** * 想要重新排布系统控件subview的布局，推荐重写layoutSubviews，在调用父类布局后重新排布。 */ - (void)layoutSubviews { [super layoutSubviews]; // 1.设置加号按钮的位置 self.plusBtn.centerX = self.width*0.5; self.plusBtn.centerY = self.height*0.5; // 2.设置其他tabbarButton的frame CGFloat tabBarButtonW = self.width / 5; CGFloat tabBarButtonIndex = 0; for (UIView *child in self.subviews) { Class class = NSClassFromString(@"UITabBarButton"); if ([child isKindOfClass:class]) { // 设置x child.x = tabBarButtonIndex * tabBarButtonW; // 设置宽度 child.width = tabBarButtonW; // 增加索引 tabBarButtonIndex++; if (tabBarButtonIndex == 2) { tabBarButtonIndex++; } } } } @end

下面是Category：

UIView+Extension.h中：
#import <UIKit/UIKit.h>@interface UIView (Extension) @property (nonatomic, assign) CGFloat x; @property (nonatomic, assign) CGFloat y; @property (nonatomic, assign) CGFloat centerX; @property (nonatomic, assign) CGFloat centerY; @property (nonatomic, assign) CGFloat width; @property (nonatomic, assign) CGFloat height; @property (nonatomic, assign) CGSize size; @property (nonatomic, assign) CGPoint origin; @end

UIView+Extension.m中：
#import "UIView+Extension.h"@implementation UIView (Extension) - (void)setX:(CGFloat)x { CGRect frame = self.frame; frame.origin.x = x; self.frame = frame; } - (void)setY:(CGFloat)y { CGRect frame = self.frame; frame.origin.y = y; self.frame = frame; } - (CGFloat)x { return self.frame.origin.x; } - (CGFloat)y { return self.frame.origin.y; } - (void)setCenterX:(CGFloat)centerX { CGPoint center = self.center; center.x = centerX; self.center = center; } - (CGFloat)centerX { return self.center.x; } - (void)setCenterY:(CGFloat)centerY { CGPoint center = self.center; center.y = centerY; self.center = center; } - (CGFloat)centerY { return self.center.y; } - (void)setWidth:(CGFloat)width { CGRect frame = self.frame; frame.size.width = width; self.frame = frame; } - (void)setHeight:(CGFloat)height { CGRect frame = self.frame; frame.size.height = height; self.frame = frame; } - (CGFloat)height { return self.frame.size.height; } - (CGFloat)width { return self.frame.size.width; } - (void)setSize:(CGSize)size { CGRect frame = self.frame; frame.size = size; self.frame = frame; } - (CGSize)size { return self.frame.size; } - (void)setOrigin:(CGPoint)origin { CGRect frame = self.frame; frame.origin = origin; self.frame = frame; } - (CGPoint)origin { return self.frame.origin; } @end

UIBarButtonItem+Extension.h中：#import <UIKit/UIKit.h>@interface UIBarButtonItem (Extension) + (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage; @end

UIBarButtonItem+Extension.m中：#import "UIBarButtonItem+Extension.h"
#import "UIView+Extension.h" @implementation UIBarButtonItem (Extension) /** * 创建一个item * * @param target 点击item后调用哪个对象的方法 * @param action 点击item后调用target的哪个方法 * @param image 图片 * @param highImage 高亮的图片 * * @return 创建完的item */ + (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage { UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 设置图片 [btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal]; [btn setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted]; // 设置尺寸 btn.size = btn.currentBackgroundImage.size; [btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside]; return [[UIBarButtonItem alloc] initWithCustomView:btn]; } @end

接下来就该在需要的地方使用自定义的tabBar了

　我是在UITabBarController中使用自定义的tabBar。

导入#import "THTabBar.h"并遵循 THTabBarDelegate协议。

在- (void)viewDidLoad 中实现下面代码：- (void)viewDidLoad {[super viewDidLoad];// 添加子控制器[self addChildVc:[[FirstPageViewController alloc] init] title:@"首页" image:@"tabbar_home" selectedImage:@"tabbar_home_selected"]; [self addChildVc:[[ConsultViewController alloc] init] title:@"我的" image:@"tabbar_profile" selectedImage:@"tabbar_profile_selected"]; THTabBar *tabBar = [[THTabBar alloc] init]; //取消tabBar的透明效果 tabBar.translucent = NO; tabBar.myDelegate = self; // KVC：如果要修系统的某些属性，但被设为readOnly，就是用KVC，即setValue：forKey：。 [self setValue:tabBar forKey:@"tabBar"]; }

实现下面方法：- (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage { // 设置子控制器的文字(可以设置tabBar和navigationBar的文字) childVc.title = title; // 设置子控制器的tabBarItem图片 childVc.tabBarItem.image = [UIImage imageNamed:image]; // 禁用图片渲染 childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; // 设置文字的样式 [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor]} forState:UIControlStateNormal]; [childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateSelected]; // childVc.view.backgroundColor = RandomColor; 　　// 上面这句代码会自动加载主页，消息，发现，我四个控制器的view，但是view要在我们用的时候去提前加载 // 为子控制器包装导航控制器 UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc]; // 添加子控制器 [self addChildViewController:navigationVc]; }

#pragma THTabBarDelegate
/***  加号按钮点击*/
- (void)tabBarDidClickPlusButton:(THTabBar *)tabBar { NSLog(@"+++"); }

以上这些代码就是我所整理的关于自定义TabBar条的大致过程.