自定义一个TabBar的步骤:
1. 首先自定义一个TabBarController继承自UITabBarController,比如JieTabBarController:UITabBarController
.h文件如下
@interface JieTabBarController : UITabBarController
@end
.m文件
#import "JieTabBarController.h"
#import "ViewController.h"
#import "ViewController1.h"
#import "ViewController2.h"
#import "ViewController3.h"
#import "JieTabBar.h"
@interface JieTabBarController ()<JieTabBarDelegate>
@property(nonatomic, strong)NSArray *vcClassNameArr;
@property(nonatomic, strong)JieTabBar *jie_tabBar;
@end
@implementation JieTabBarController
- (void)viewDidLoad {
[super viewDidLoad];
// 1. 加载控制器
[self configVCs];
[self.tabBar addSubview:self.jie_tabBar];
}
- (void)tabBar:(JieTabBar *)tabBar barIdx:(JieBarType)barIdx {
self.selectedIndex = barIdx - JieBarType_One;
}
- (JieTabBar *)jie_tabBar {
if (!_jie_tabBar) {
_jie_tabBar = [[JieTabBar alloc] initWithFrame:CGRectMake(0, 0, self.tabBar.frame.size.width, self.tabBar.frame.size.height)];
_jie_tabBar.delegate = self;
}
return _jie_tabBar;
}
- (void)configVCs {
_vcClassNameArr = @[@"ViewController", @"ViewController1", @"ViewController2", @"ViewController3"];
NSMutableArray *vcArr = [[NSMutableArray alloc] init];
for (int i = 0; i < 4; i++) {
id vcClass = NSClassFromString(_vcClassNameArr[i]);
UINavigationController *naVC = [[UINavigationController alloc] initWithRootViewController:[vcClass new]];
[vcArr addObject:naVC];
}
self.viewControllers = vcArr;
}
@end
2.自定义完了TabBarController,然后需要自定义一个TabBar,eg.:JieTabBar
.h文件如下
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, JieBarType) {
JieBarType_One = 1000,
JieBarType_Two,
JieBarType_Three,
JieBarType_Four,
};
@class JieTabBar;
@protocol JieTabBarDelegate<NSObject>
- (void)tabBar:(JieTabBar *)tabBar barIdx:(JieBarType)barIdx;
@end
@interface JieTabBar : UIView
@property(nonatomic, weak)id<JieTabBarDelegate> delegate;
@end
.m实现文件
#import "JieTabBar.h"
@interface JieTabBar()
//背景图
@property(nonatomic, strong)UIImageView *tabbarBgImageView;
// tabbarItem图片数据源
@property(nonatomic, strong)NSArray *dataArray;
// 当前被选中的tabBarItem
@property(nonatomic, strong)UIButton *lastBtn;
@end
@implementation JieTabBar
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self addSubview:self.tabbarBgImageView];
for (int i = 0; i < 4; i++) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@", self.dataArray[i]]] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@p", self.dataArray[i]]] forState:UIControlStateSelected];
[btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
btn.adjustsImageWhenHighlighted = NO;
btn.tag = JieBarType_One + i;
if (i == 0) {
btn.selected = YES;
self.lastBtn = btn;
} else {
btn.selected = NO;
}
[self addSubview:btn];
}
}
return self;
}
- (NSArray *)dataArray {
if (!_dataArray) {
_dataArray = @[@"1", @"2", @"3", @"4"];
}
return _dataArray;
}
- (UIImageView *)tabbarBgImageView {
if (!_tabbarBgImageView) {
_tabbarBgImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@""]];
}
return _tabbarBgImageView;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.tabbarBgImageView.frame = self.bounds;
CGFloat width = self.bounds.size.width / self.dataArray.count;
for (int i = 0; i < self.subviews.count; i++) {
UIView *view = self.subviews[i];
if ([view isKindOfClass:[UIButton class]]) {
view.frame = CGRectMake((view.tag - JieBarType_One) * width, 0, width, self.frame.size.height);
}
}
}
- (void)clickBtn:(UIButton *)btn {
if ([self.delegate respondsToSelector:@selector(tabBar:barIdx:)]) {
[self.delegate tabBar:self barIdx:btn.tag];
}
self.lastBtn.selected = NO;
btn.selected = YES;
self.lastBtn = btn;
[UIView animateWithDuration:0.3 animations:^{
btn.transform = CGAffineTransformMakeScale(1.2, 1.2);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3 animations:^{
btn.transform = CGAffineTransformIdentity;
}];
}];
}
@end
当然,可以将UIButton替换自定义的View,比如:
自定义JieTabBarButton的.h文件
@class JieTabBarButton;
@protocol JieTabBarButtonDelegate<NSObject>
- (void)jieTabBarButton:(JieTabBarButton *)jieTabBarButton;
@end
@interface JieTabBarButton : UIView
@property(nonatomic, assign)BOOL selected;
@property(nonatomic, assign)BOOL playListVC; // 判断是否是播放列表首页,如果是播放列表首页,则在选中的时候,TabBarButton的颜色为白色,其他的为红色
@property(nonatomic, copy)NSString *buttonTitle;
@property(nonatomic, strong)UILabel *titleLabel;
@property(nonatomic, strong)UIView *bottomLineView;
@property(nonatomic, weak)id<JieTabBarButtonDelegate> delegate;
@end
.m实现文件
#import "JieTabBarButton.h"
@interface JieTabBarButton()
@property(nonatomic, strong)UIView *converView;
@end
@implementation JieTabBarButton
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = UIColor.clearColor;
self.userInteractionEnabled = YES;
[self addSubview:self.titleLabel];
[self addSubview:self.bottomLineView];
[self addSubview:self.converView];
WS(ws);
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.offset(0);
make.top.offset(12);
make.height.mas_equalTo(23);
}];
[self.bottomLineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(ws.titleLabel.mas_bottom).offset(5);
make.height.mas_equalTo(2);
make.width.mas_equalTo(30);
make.centerX.equalTo(ws.titleLabel);
}];
[self.converView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.right.offset(0);
}];
}
return self;
}
- (UILabel *)titleLabel {
if (!_titleLabel) {
_titleLabel = [[UILabel alloc] init];
_titleLabel.font = [UIFont systemFontOfSize:17];
_titleLabel.textAlignment = NSTextAlignmentCenter;
}
return _titleLabel;
}
- (UIView *)bottomLineView {
if (!_bottomLineView) {
_bottomLineView = [[UIView alloc] init];
}
return _bottomLineView;
}
- (UIView *)converView {
if (!_converView) {
_converView = [[UIView alloc] init];
_converView.backgroundColor = [UIColor clearColor];
_converView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickAction)];
[_converView addGestureRecognizer:tap];
}
return _converView;
}
- (void)clickAction {
if ([self.delegate respondsToSelector:@selector(jieTabBarButton:)]) {
[self.delegate jieTabBarButton:self];
}
}
- (void)layoutSubviews {
[super layoutSubviews];
// 如果是首页播放列表,则在选中情况下,底部线条为白色,否则为红色
self.titleLabel.text = self.buttonTitle;
if (self.playListVC) {
if (self.selected) {
self.bottomLineView.backgroundColor = UIColor.whiteColor;
self.titleLabel.textColor = UIColor.whiteColor;
} else {
self.bottomLineView.backgroundColor = UIColor.clearColor;
self.titleLabel.textColor = RGBCOLOR(142, 142, 142);
}
} else {
if (self.selected) {
self.bottomLineView.backgroundColor = RGBCOLOR(251, 37, 49);
self.titleLabel.textColor = RGBCOLOR(251, 37, 49);
} else {
self.bottomLineView.backgroundColor = UIColor.clearColor;
self.titleLabel.textColor = RGBCOLOR(142, 142, 142);
}
}
}
@end