簡介
UITabBar是iOS應(yīng)用界面交互經(jīng)常使用的系統(tǒng)控件，比如知名App：APP Store速客、支付寶盈滴、閑魚、簡書等撒汉。
-
APP Store
APP Store.jpeg -
支付寶
支付寶.jpeg -
閑魚
閑魚.jpeg -
簡書
簡書.jpeg
TabBar分類
-
TabBar大致可以分為兩類沟优，一類如APP Store和支付寶，為iOS原生的TabBar睬辐。
APP Store.jpeg
支付寶.jpeg
-
另一類為自定義的TabBar挠阁，如閑魚和簡書
閑魚.jpeg
簡書.jpeg
Dome演示（仿閑魚TabBar）
GitHub地址：https://github.com/BigTortoise/LikeXianyuTabBarDome
- RYJTabBarController.m
/**
* 初始化子控制器
*/
- (void)setupChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
// 設(shè)置文字和圖片
vc.navigationItem.title = title;
vc.tabBarItem.title = title;
vc.tabBarItem.image = [UIImage imageNamed:image];
//vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
// 包裝一個導(dǎo)航控制器宾肺，添加導(dǎo)航控制器tabbarcontroller的子控制器
UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
[self addChildViewController:nav];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//添加子控制器
[self setupChildVc:[[RYJHomePageViewController alloc] init] title:@"首頁" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
[self setupChildVc:[[RYJFishPondViewController alloc] init] title:@"魚塘" image:@"mycity_normal" selectedImage:@"mycity_highlight"];
[self setupChildVc:[[RYJMessageViewController alloc] init] title:@"消息" image:@"message_normal" selectedImage:@"message_highlight"];
[self setupChildVc:[[RYJMessageViewController alloc] init] title:@"我的" image:@"account_normal" selectedImage:@"account_highlight"];
// 更換tabBar
[self setValue:[[RYJTabBar alloc] init] forKeyPath:@"tabBar"];
}
+ (void)initialize{
//設(shè)置未選中時的字體大小和顏色
NSMutableDictionary *attrs = [[NSMutableDictionary alloc]init];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12];
attrs[NSForegroundColorAttributeName] = [UIColor blackColor];
//設(shè)置選中時字體大小和顏色
NSMutableDictionary *selectedAttrs = [NSMutableDictionary dictionary];
//兩種狀態(tài)下字體大小一致
selectedAttrs[NSFontAttributeName] = attrs[NSFontAttributeName];
selectedAttrs[NSForegroundColorAttributeName] = [UIColor blackColor];
// 通過appearance統(tǒng)一設(shè)置所有UITabBarItem的文字屬性
// 后面帶有UI_APPEARANCE_SELECTOR的方法, 都可以通過appearance對象來統(tǒng)一設(shè)置
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:attrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
UITabBar *bar = [UITabBar appearance];
// [bar setBackgroundColor:[UIColor whiteColor]];
// [bar setBarTintColor:[UIColor whiteColor]];
bar.alpha = 1.0;
[bar setBackgroundImage:[UIImage imageNamed:@"bg_tabbar 1"]];
}
- RYJTabBar.m
/** 發(fā)布按鈕 */
@property (nonatomic, weak) UIButton *publishButton;
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
// 添加發(fā)布按鈕
UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
[publishButton setBackgroundImage:[UIImage imageNamed:@"post_normal"] forState:UIControlStateNormal];
// [publishButton setBackgroundImage:[UIImage imageNamed:@"post_normal"] forState:UIControlStateHighlighted];
publishButton.size = publishButton.currentBackgroundImage.size;
[self addSubview:publishButton];
self.publishButton = publishButton;
}
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
CGFloat width = self.width;
CGFloat height = self.height;
//設(shè)置發(fā)布按鈕frame
self.publishButton.center = CGPointMake(width *0.5 , height *0);
UILabel *label = [[UILabel alloc] init];
label.text = @"發(fā)布";
label.font = [UIFont systemFontOfSize:12];
[label sizeToFit];
[self addSubview:label];
label.x = self.publishButton.x + 20;
label.y = self.publishButton.y + 62;
//設(shè)置其他UITabBarButton的frame
CGFloat buttonY = 0;
CGFloat buttonW = width / 5;
CGFloat buttonH = height;
NSInteger index = 0;
for (UIView *button in self.subviews) {
if (![button isKindOfClass:[UIControl class]] || button == self.publishButton) continue;
// 計算按鈕的x值
CGFloat buttonX = buttonW * ((index > 1)?(index + 1):index);
button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
// 增加索引
index++;
}
}
Dome演示.png
