在我們的項(xiàng)目中經(jīng)常會(huì)自己自定義tabBar因?yàn)樘O果自帶的真的****太丑了****重付！也不滿足我們的項(xiàng)目需求。
好 開始行動(dòng)吧烫幕！
先上圖看下我們最終實(shí)現(xiàn)的效果：
繼承UItabBar自定義一個(gè)自己的tabBar
.h
#import <UIKit/UIKit.h>
@class HJTTabBar;
@protocol ZTTabBarDelegate <UITabBarDelegate>
@optional
- (void)tabBarDidClickPlusButton:(HJTTabBar *)tabBar;
@end
@interface HJTTabBar : UITabBar
@property (nonatomic, weak) id<ZTTabBarDelegate> myDelegate;
@end
.m
#import "HJTTabBar.h"
#import "UIBarButtonItem+Extension.h"
#import "UIView+Extension.h"
@interface HJTTabBar ()
@property (nonatomic, weak) UIButton *plusBtn;
@end
@implementation HJTTabBar
- (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;
}
/**
* 加號(hào)按鈕點(diǎn)擊
*/
- (void)plusBtnClick
{
// 通知代理
if ([self.delegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
[self.myDelegate tabBarDidClickPlusButton:self];
}
}
/**
* 想要重新排布系統(tǒng)控件subview的布局疏哗，推薦重寫layoutSubviews，在調(diào)用父類布局后重新排布才顿。
*/
- (void)layoutSubviews
{
[super layoutSubviews];
// 1.設(shè)置加號(hào)按鈕的位置
self.plusBtn.centerX = self.width*0.5;
self.plusBtn.centerY = self.height*0.5;
// 2.設(shè)置其他tabbarButton的frame
CGFloat tabBarButtonW = self.width / 5;
CGFloat tabBarButtonIndex = 0;
for (UIView *child in self.subviews) {
//UITabBarItem UITabBarButton
Class class = NSClassFromString(@"UITabBarItem ");
if ([child isKindOfClass:class]) {
// 設(shè)置x
child.x = tabBarButtonIndex * tabBarButtonW;
// 設(shè)置寬度
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)
/**
* 創(chuàng)建一個(gè)item
*
* @param target 點(diǎn)擊item后調(diào)用哪個(gè)對(duì)象的方法
* @param action 點(diǎn)擊item后調(diào)用target的哪個(gè)方法
* @param image 圖片
* @param highImage 高亮的圖片
*
* @return 創(chuàng)建完的item
*/
+ (UIBarButtonItem *)itemWithTargat:(id)target action:(SEL)action image:(NSString *)image highImage:(NSString *)highImage
{
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 設(shè)置圖片
[btn setBackgroundImage:[UIImage imageNamed:image] forState:UIControlStateNormal];
[btn setBackgroundImage:[UIImage imageNamed:highImage] forState:UIControlStateHighlighted];
// 設(shè)置尺寸
btn.size = btn.currentBackgroundImage.size;
[btn addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
return [[UIBarButtonItem alloc] initWithCustomView:btn];
}
@end
接下來(lái)我們就該在需要的地方使用自定義的tabBar了
- 我是在UITabBarController中使用自定義的tabBar。
導(dǎo)入#import "HJTTabBar.h"并遵循 HJTTabBarDelegate協(xié)議尤蒿。
在- (void)viewDidLoad 中實(shí)現(xiàn)下面代碼：
- (void)viewDidLoad {
[super viewDidLoad];
// 添加子控制器
[self addChildVc:[[FirstPageViewController alloc] init] title:@"首頁(yè)" image:@"tabbar_home" selectedImage:@"tabbar_home_selected"];
[self addChildVc:[[CommunityViewController alloc] init] title:@"社區(qū)" image:@"tabbar_message_center" selectedImage:@"tabbar_message_center_selected"];
[self addChildVc:[[MessageViewController alloc] init] title:@"消息" image:@"tabbar_discover" selectedImage:@"tabbar_discover_selected"];
[self addChildVc:[[ConsultViewController alloc] init] title:@"咨詢" image:@"tabbar_profile" selectedImage:@"tabbar_profile_selected"];
HJTTabBar *tabBar = [[HJTTabBar alloc] init];
//取消tabBar的透明效果
tabBar.translucent = NO;
tabBar.myDelegate = self;
// KVC：如果要修系統(tǒng)的某些屬性郑气，但被設(shè)為readOnly，就是用KVC腰池，即setValue：forKey：尾组。
[self setValue:tabBar forKey:@"tabBar"];
}
實(shí)現(xiàn)下面方法：
- (void)addChildVc:(UIViewController *)childVc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
// 設(shè)置子控制器的文字(可以設(shè)置tabBar和navigationBar的文字)
childVc.title = title;
// 設(shè)置子控制器的tabBarItem圖片
childVc.tabBarItem.image = [UIImage imageNamed:image];
// 禁用圖片渲染
childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 設(shè)置文字的樣式
[childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor blackColor]} forState:UIControlStateNormal];
[childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor redColor]} forState:UIControlStateSelected];
// childVc.view.backgroundColor = RandomColor; // 這句代碼會(huì)自動(dòng)加載主頁(yè)忙芒，消息，發(fā)現(xiàn)讳侨，我四個(gè)控制器的view呵萨，但是view要在我們用的時(shí)候去提前加載
// 為子控制器包裝導(dǎo)航控制器
UINavigationController *navigationVc = [[UINavigationController alloc] initWithRootViewController:childVc];
// 添加子控制器
[self addChildViewController:navigationVc];
}
#pragma HJTTabBarDelegate
/**
* 加號(hào)按鈕點(diǎn)擊
*/
- (void)tabBarDidClickPlusButton:(HJTTabBar *)tabBar
{
NSLog(@"+++");
}
好了 完事！
