iOS 簡單的自定義凸起（不規則）tabbar
阿新 • • 發佈：2019-01-08
主要實現思路：
1.重寫UITabBar：在init裡面建立一個button來實現不規則的圖示（新增新按鈕）放在最中間 -(void)layoutSubviews調整系統原本的圖示的座標（為中間這個控制元件留出位置）
2.重寫-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{ 避免按鈕超區不可點選
看具體的程式碼：
自定義SamTabBar檢視
//
// SamTabBar.h
// MoJing
//
// Created by linpeng on 2017/3/15.
// Copyright © 2017年 linpeng. All rights reserved. m檔案
//
// SamTabBar.m 用法：
以上自定義的tabbar控制元件就弄好了 現在就可以在VC中使用了
建立一個WBTabBarController 繼承UITabBarController 在appdelegate中
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.rootViewController = [[WBTabBarController alloc] init];kvo的形式新增自定義的tabbar
//kvo形式新增自定義的 UITabBar
SamTabBar *tab = [SamTabBar instanceCustomTabBarWithType:SamItemUIType_Five];
[self setValue:tab forKey:@"tabBar"];具體的程式碼：
@interface WBTabBarController ()<SamTabBarDelegate>
@end
@implementation WBTabBarController
- (void)awakeFromNib {
[super awakeFromNib];
}
- (void)viewDidLoad {
[super viewDidLoad];
[self setupUI];
}
-(void)setupUI{
[self setupVC];
[[UITabBar appearance] setShadowImage:[UIImage new]];
//kvo形式新增自定義的 UITabBar
SamTabBar *tab = [SamTabBar instanceCustomTabBarWithType:SamItemUIType_Five];
tab.centerBtnTitle = @"釋出";
tab.centerBtnIcon = @"攝影機圖示_點選後";
tab.tabDelegate = self;
[self setValue:tab forKey:@"tabBar"];
}
- (void)setupVC{
[self addChildVc:[[LoginViewController alloc] init] title:@"首頁" image:@"TabMessage" selectedImage:@"TabMessage_HL"];
[self addChildVc:[[LoginViewController alloc] init] title:@"發現" image:@"TabMessage" selectedImage:@"TabMessage_HL"];
[self addChildVc:[[LoginViewController alloc] init] title:@"訊息" image:@"TabMessage" selectedImage:@"TabMessage_HL"];
[self addChildVc:[[LoginViewController alloc] init] title:@"個人中心" image:@"TabMessage" selectedImage:@"TabMessage_HL"];
}
- (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];
// 為子控制器包裝導航控制器
WBBaseNC *navigationVc = [[WBBaseNC alloc] initWithRootViewController:childVc];
// 新增子控制器
[self addChildViewController:navigationVc];
}
-(void)tabBar:(SamTabBar *)tabBar clickCenterButton:(UIButton *)sender{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"點選了中間按鈕" preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
}];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
@end
效果如圖：
gif效果如圖：
修改tabbar上那條很醜的分割線：
-(void)setupUI{
[self setupVC];
//kvo形式新增自定義的 UITabBar
SamTabBar *tab = [SamTabBar instanceCustomTabBarWithType:SamItemUIType_Five];
tab.centerBtnTitle = nil;
tab.centerBtnIcon = @"menu_diary_pr";
tab.tabDelegate = self;
[self setValue:tab forKey:@"tabBar"];
//去除頂部很醜的border
[[UITabBar appearance] setShadowImage:[UIImage new]];
[[UITabBar appearance] setBackgroundImage:[[UIImage alloc]init]];
//自定義分割線顏色
UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(self.tabBar.bounds.origin.x-0.5, self.tabBar.bounds.origin.y, self.tabBar.bounds.size.width+1, self.tabBar.bounds.size.height+2)];
bgView.layer.borderColor = COLOR_SEPERATOR.CGColor;
bgView.layer.borderWidth = 0.5;
[tab insertSubview:bgView atIndex:0];
tab.opaque = YES;
}效果：
