【iOS UI】自定义TabBar
2017-05-16 本文已影响15人
XIAO_WEN
自定义TabBar
一、XTabBarButton
XTabBarButton.h
#import <UIKit/UIKit.h>
@interface XTabBarButton : UIButton
// 标签
@property (nonatomic, strong) UILabel *label;
// 按钮
@property (nonatomic, strong) UIButton *btn;
@end
XTabBarButton.m
#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define kTabBarWidth kScreenWidth/3
#import "XTabBarButton.h"
@implementation XTabBarButton
#pragma mark - 创建子控件
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
// 1、创建标签
_label = [[UILabel alloc] init];
_label.frame = CGRectMake(0, 49-15, kTabBarWidth, 15);
_label.textAlignment = NSTextAlignmentCenter;
_label.backgroundColor = [UIColor yellowColor];
_label.font = [UIFont systemFontOfSize:12];
[self addSubview:_label];
// 2、创建按钮
_btn = [[UIButton alloc] init];
_btn.backgroundColor = [UIColor yellowColor];
_btn.frame = CGRectMake((kTabBarWidth-25)/2, 5, 25, 25);
[self addSubview:_btn];
}
return self;
}
@end
二、XTabBar
XTabBar.h
#import <UIKit/UIKit.h>
//导入自定义的XTabBarButton
#import "XTabBarButton.h"
//子控制器数量=3
#define ChildControllerCount 3
@class XTabBar;
//delegate
@protocol XTabBarDelegate <NSObject>
//delegate methods
// 点击XTabBarButton后，tabbarController执行该方法
- (void)xTabbarClickBtnFrom:(NSInteger)from to:(NSInteger)to;
@end
@interface XTabBar : UIView //继承自UIView
@property (nonatomic, weak) id<XTabBarDelegate> delegate; //代理
@property (nonatomic, strong) NSArray *tabBarTitleArr; //自定义XTabBar上的标题数组
@property (nonatomic, strong) NSArray *tabBarNormalImgArr; //自定义XTabBar上的正常状态图标数组
@property (nonatomic, strong) NSArray *tabBarSelectedImgArr; //自定义XTabBar上的点击状态图标数组
@property (nonatomic, strong) NSMutableArray *btnArr; //存放自定义按钮的可变数组
@property (nonatomic, strong) UIButton *selectedBtn; //点击了的按钮
// 添加自定义按钮
- (void)addBBIwithTitle:(NSString *)title NormalImageName:(NSString *)normalImage SelectedImageName:(NSString *)selectedImageName;
// 新方法设置tabbar
- (void)setXTabBar;
@end
XTabBar.m
//宽度宏
#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)
//自定义XTabBarButton的宽度宏
#define kTabBarButtonWidth kScreenWidth/3
#import "XTabBar.h"
@implementation XTabBar
#pragma mark - 懒加载存放按钮的可变数组
- (NSMutableArray *)btnArr{
if (!_btnArr) {
_btnArr = [[NSMutableArray alloc] init];
}
return _btnArr;
}
#pragma mark - 设置子控件的位置
- (void)layoutSubviews{
[super layoutSubviews];
self.backgroundColor = [UIColor whiteColor];
int num = 3;
for (int i = 0; i < num; i++) {
UIButton *btn = self.subviews[i];
btn.frame = CGRectMake(i*kTabBarButtonWidth, 0, kTabBarButtonWidth, 49);
btn.tag = i; //
}
// 点击第二个按钮
if (_btnArr.count == 3) {
// 1、tabBar拿到中间按钮
XTabBarButton *fistPressBtn = [_btnArr objectAtIndex:1];
// 2、把中间按钮传给点击方法，使tabBar控制器直接显示中间的控制器
[self xTabBarButtonClickWithBtn:fistPressBtn];
}
}
#pragma mark - 添加一个自定义的按钮
- (void)addBBIwithTitle:(NSString *)title NormalImageName:(NSString *)normalImage SelectedImageName:(NSString *)selectedImageName{
// 1、创建自定义的按钮
XTabBarButton *xTabBarButton = [[XTabBarButton alloc] init];
// 2、自定义按钮的子按钮与标签不可交互，设置label的title
xTabBarButton.btn.userInteractionEnabled = NO;
xTabBarButton.label.userInteractionEnabled = NO;
xTabBarButton.label.text = title;
// 3、自定义按钮的子按钮设置图片
[xTabBarButton.btn setImage:[UIImage imageNamed:normalImage] forState:UIControlStateNormal];
// 4、自定义按钮绑定方法
[xTabBarButton addTarget:self action:@selector(xTabBarButtonClickWithBtn:) forControlEvents:UIControlEventTouchDown];
// 5、没有title时
if (title.length == 0) {
// 隐藏label
xTabBarButton.label.alpha = 0;
// 调整子按钮的大小
xTabBarButton.btn.frame = CGRectMake(5, 5, 5, 5);
}
// 6、添加自定义的xTabbarButton到自定义tabBar上
[self addSubview:xTabBarButton];
[self.btnArr addObject:xTabBarButton];
}
// 新方法设置tabbar
- (void)setXTabBar{
_tabBarTitleArr = @[@"资讯",@"",@"我"];
_tabBarNormalImgArr = @[@"tabbarZixunNormal",@"tabbarHomeNormal",@"tabbarMineNormal"];
_tabBarSelectedImgArr = @[@"tabbarZixunSelected",@"tabbarHomeSelected",@"tabbarMineSelected"];
for (int i = 0; i < ChildControllerCount; i++) {
NSString *titleString = [NSString stringWithFormat:@"%@", _tabBarTitleArr[i]];
// 1、循环创建按钮
XTabBarButton *xTabBarButton = [XTabBarButton new];
// 2、xTabBarButton的子按钮与标签不可交互
xTabBarButton.btn.userInteractionEnabled = NO;
xTabBarButton.label.userInteractionEnabled = NO;
// 3、设置标签文字与子按钮图片
xTabBarButton.label.text = _tabBarTitleArr[i];
// 3.1、当没有title时，调整按钮的位置
if (titleString.length == 0) {
xTabBarButton.label.alpha = 0;
//
// CGPoint center = xTabBarButton.center;
// NSLog(@"center=%f, %f", center.x, center.y);
xTabBarButton.btn.frame = CGRectMake((kTabBarButtonWidth-70)/2, -9, 70, 58);
}
[xTabBarButton.btn setImage:[UIImage imageNamed:_tabBarNormalImgArr[i]] forState:UIControlStateNormal];
// 4、绑定方法
[xTabBarButton addTarget:self action:@selector(xTabBarButtonClickWithBtn:) forControlEvents:UIControlEventTouchDown];
// 5、打tag
xTabBarButton.tag = i;
// 6、添加到自定义按钮的数组
[self.btnArr addObject:xTabBarButton];
// 7、添加创建好的按钮
[self addSubview:xTabBarButton];
}
}
#pragma mark - 点击自定义tabbar中的xTabbarButton
- (void)xTabBarButtonClickWithBtn:(UIButton *)btn{
// 1、遍历按钮数组中的按钮，改变所有按钮的图片和标签颜色
for (int i = 0; i < _btnArr.count; i++) {
XTabBarButton *tempBtn = [_btnArr objectAtIndex:i];
tempBtn.label.textColor = [UIColor colorWithRed:70/255.0 green:130/255.0 blue:180/255.0 alpha:1.0];
[tempBtn.btn setImage:[UIImage imageNamed:_tabBarNormalImgArr[i]] forState:UIControlStateNormal];
}
// 2、设置当前按钮的照片和标签颜色，调用代理方法
XTabBarButton *preBtn = [btn viewWithTag:btn.tag];
preBtn.label.textColor = [UIColor orangeColor];
[preBtn.btn setImage:[UIImage imageNamed:_tabBarSelectedImgArr[btn.tag]] forState:UIControlStateNormal];
// 3、调用代理方法
if ([self.delegate respondsToSelector:@selector(xTabbarClickBtnFrom:to:)]) {
[self.delegate xTabbarClickBtnFrom:2 to:btn.tag];
}
// 4、更新选中的按钮
_selectedBtn = btn;
}
@end
三、XTabBarController
XTabBarController.h
#import <UIKit/UIKit.h>
#import "XTabBar.h" //TabBar
@interface XTabBarController : UITabBarController
@property (nonatomic, strong) XTabBar *xTabBar;
@end
XTabBarController.m
#import "XTabBarController.h"
//子控制器个数 3个
#define ChildControllerCount 3
@interface XTabBarController ()<XTabBarDelegate>
@end
@implementation XTabBarController
- (void)viewDidLoad {
[super viewDidLoad];
// 1、初始化自定义的tabbar，设置委托
_xTabBar = [[XTabBar alloc] initWithFrame:self.tabBar.frame];
_xTabBar.delegate = self;
// 2、添加子控制器 ZixunNavController
ZixunNavController *zxNC = [[ZixunNavController alloc] initWithRootViewController:[ZixunViewController new]];
HomeNavController *homeNC = [[HomeNavController alloc] initWithRootViewController:[HomepageViewController new]];
MineNavController *mineNC = [[MineNavController alloc] initWithRootViewController:[MineViewController new]];
NSArray *viewControllersArr = @[zxNC, homeNC, mineNC];
self.viewControllers = viewControllersArr;
// 3、自定义tabbar的方法创建按钮
[self.xTabBar setXTabBar];
// NSArray *normalImageArr = @[@"tabbarZixunNormal",@"tabbarHomeNormal",@"tabbarMineNormal"];
// NSArray *selectedImageArr = @[@"tabbarZixunSelected",@"tabbarHomeSelected",@"tabbarMineSelected"];
// NSArray *titleArr = @[@"资讯",@"2",@"我的"];
//
// for (int i = 0; i < ChildControllerCount; i++) {
// [self.xTabBar addBBIwithTitle:titleArr[i] NormalImageName:normalImageArr[i] SelectedImageName:selectedImageArr[i]];
// }
// 4、添加自定义tabbar，移除自带tabbar
[self.view addSubview:_xTabBar];
[self.tabBar removeFromSuperview];
}
#pragma mark - XTabBar delegate Method
- (void)xTabbarClickBtnFrom:(NSInteger)from to:(NSInteger)to{
self.selectedIndex = to;
}
@end
