最近做一个项目，tabbar是抖音样式的，嗯，不会。问题不大，问一下万能的度娘！搜了半天没找到这种样式，我开始方了！当然也有可能是我搜索的姿势不对。
俗话说解决不了需求，就解决提需求的人！果断去找UI说这个太麻烦，我会但没必要，你改一个！至于结果嘛，你看我做出来的这个tabbar不就明白了嘛。。。
先上效果图
![]()
tabbar.png
tabbar.png
效果就是这样的，下面说一下实现方式
第一步我们需要自定义tabbar解决中间按钮的问题，遍历tabbar找到UITabBarButton，自定义一个按钮放在合适的位置。附上代码
#define ScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define ScreenHeight ([UIScreen mainScreen].bounds.size.height)
#import "PSTabBar.h"
@interface PSTabBar ()
@property (nonatomic, strong)UIButton *issueBtn;
@end
@implementation PSTabBar
// layoutSubviews遍历子控件寻找UITabBarButton，给UITabBarButton重新设置frame
- (void)layoutSubviews {
[super layoutSubviews];
[self addSubview:self.indicatorLine];
CGFloat width = 50;
self.issueBtn.frame = CGRectMake((ScreenWidth-width)/2, 2, width, width);
CGFloat tabBarButtonW = ScreenWidth / 5;
CGFloat tabBarButtonIndex = 0;
for (UIView *child in self.subviews) {
Class class = NSClassFromString(@"UITabBarButton");
if ([child isKindOfClass:class]) {
// 重新设置frame
CGRect frame = CGRectMake(tabBarButtonIndex * tabBarButtonW, 0, tabBarButtonW, 49);
child.frame = frame;
// 增加索引
if (tabBarButtonIndex == 1) {
tabBarButtonIndex++;
}
tabBarButtonIndex++;
}
}
}
- (void)issueBtnAction:(UIButton *)sender{
[[NSNotificationCenter defaultCenter]postNotificationName:@"issueBtnActionNotification" object:nil];
}
- (UIButton *)issueBtn {
if (!_issueBtn) {
_issueBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[self addSubview:_issueBtn];
[_issueBtn setImage:[UIImage imageNamed:@"tabbar_camera_image_selected"] forState:UIControlStateNormal];
_issueBtn.adjustsImageWhenHighlighted = false;
[_issueBtn addTarget:self action:@selector(issueBtnAction:) forControlEvents:UIControlEventTouchUpInside];
}
return _issueBtn;
}
- (UIView *)indicatorLine{
if (!_indicatorLine) {
_indicatorLine = [[UIView alloc]initWithFrame:CGRectMake(1/15.0f*[UIScreen mainScreen].bounds.size.width, 45, 1/15.0f*[UIScreen mainScreen].bounds.size.width, 2)];
_indicatorLine.backgroundColor = PSBaseColor;
[self addSubview:_indicatorLine];
}
return _indicatorLine;
}
这是自定义的tabbar的.m文件，记得在.h文件中声明一下_indicatorLine,后续要用
第二步我们需要自定义一个TabbarController，这里边设置一下tabbarItem的文字的位置和大小，附代码
#import "PSTabBarController.h"
@interface PSTabBarController ()
@end
@implementation PSTabBarController
- (void)dealloc{
[[NSNotificationCenter defaultCenter]removeObserver:self name:@"issueBtnActionNotification" object:nil];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.ps_tabbar = [PSTabBar new];
[self setValue:self.ps_tabbar forKey:@"tabBar"];
[self addCustomChildVC:[UIViewController new] title:@"首页" imageName:nil withSelectedImage:nil];
[self addCustomChildVC:[UIViewController new] title:@"参赛" imageName:nil withSelectedImage:nil];
[self addCustomChildVC:[UIViewController new] title:@"消息" imageName:nil withSelectedImage:nil];
[self addCustomChildVC:[UIViewController new] title:@"我" imageName:nil withSelectedImage:nil];
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(presentIssueVC:) name:@"issueBtnActionNotification" object:nil];
}
- (void)presentIssueVC:(NSNotification *)notification{
NSLog(@"发布发布发布~~~~");
}
- (void)addCustomChildVC:(UIViewController *)vc title:(NSString *)title imageName:(NSString *)imageName withSelectedImage:(NSString *)selectedImage {
if (imageName) {
vc.tabBarItem.image = [UIImage imageNamed:imageName];
}
if (selectedImage) {
vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
}
vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256) / 255.0 green:arc4random_uniform(256) / 255.0 blue:arc4random_uniform(256) / 255.0 alpha:1];
PSNavigationController *nav = [[PSNavigationController alloc]initWithRootViewController:vc];
nav.tabBarItem.title = title;
NSDictionary *textTitleOptions = @{NSForegroundColorAttributeName:rgba(102, 102, 102, 1),NSFontAttributeName:[UIFont systemFontOfSize:15]};
NSDictionary *textTitleOptionsSelected = @{NSForegroundColorAttributeName:PSBaseColor,NSFontAttributeName:[UIFont systemFontOfSize:15]};
[nav.tabBarItem setTitleTextAttributes:textTitleOptions forState:UIControlStateNormal];
[nav.tabBarItem setTitleTextAttributes:textTitleOptionsSelected forState:UIControlStateSelected];
self.tabBar.tintColor = PSBaseColor;
[self addChildViewController:nav];
[[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -15)];
}
同样的需要在.h文件中声明一个PSTabbar的实例变量，后续要用
最后一步在APPDelegate中实现tabbarControllerDelegate,在点击事件中改变_indicatorLine的位置，附代码
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
NSInteger index = [tabBarController.viewControllers indexOfObject:viewController];
// NSLog(@"index------>>>%ld",index);
PSTabBarController *tabbar_c = (PSTabBarController *)tabBarController;
tabbar_c.ps_tabbar.indicatorLine.backgroundColor = PSBaseColor;
CGRect frame = tabbar_c.ps_tabbar.indicatorLine.frame;
if (index == 0) {
frame.origin.x = 1/15.0f*[UIScreen mainScreen].bounds.size.width;
}else if (index == 1){
frame.origin.x = 4/15.0f*[UIScreen mainScreen].bounds.size.width;
}else if (index == 2){
frame.origin.x = 10/15.0f*[UIScreen mainScreen].bounds.size.width;
}else if (index == 3){
frame.origin.x = 13/15.0f*[UIScreen mainScreen].bounds.size.width;
}
tabbar_c.ps_tabbar.indicatorLine.frame = frame;
}
