常見的三種自定義tabBar
效果圖
1
2
Demo 下載地址: ZYCustomTabBar 覺得有用的話, 請(qǐng)給一個(gè)star
demo里面有三種自定義方式
實(shí)現(xiàn)思路
- UITabBarItem可以看做是一種特殊的button, 可以創(chuàng)建自定義的button
- 創(chuàng)建自定義的ZYTabBarViewController繼承UITabBarController
- 創(chuàng)建一個(gè)繼承自UITabBar的實(shí)體類ZYTabbar
- 通過按鈕的點(diǎn)擊事件，設(shè)置代理
- typeOne: 實(shí)現(xiàn)中間只有圖片的tabBar
#pragma mark - custom method
// 初始化所有的子控制器
- (void)setupAllChildViewControllers {
// 1.ONE
UIViewController *one = [[UIViewController alloc] init];
one.view.backgroundColor = [UIColor whiteColor];
[self addChildViewController:one title:@"首頁" imageName:@"tabbar_news" selectedImageName:@"tabbar_news_hl"];
// 2.TWO
UIViewController *two = [[UIViewController alloc] init];
two.view.backgroundColor = [UIColor magentaColor];
[self addChildViewController:two title:@"圖片" imageName:@"tabbar_picture" selectedImageName:@"tabbar_picture_hl"];
if (self.tabBarType == typeOne) {
// 2.publishButton
UIViewController *publish = [[UIViewController alloc] init];
publish.view.backgroundColor = [UIColor blueColor];
two.view.backgroundColor = [UIColor magentaColor];
[self addChildViewController:publish title:@"publish" imageName:@"tabbar_write" selectedImageName:@"tabbar_write"];
}
// 3.THREE
UIViewController *three = [[UIViewController alloc] init];
three.view.backgroundColor = [UIColor cyanColor];
[self addChildViewController:three title:@"精華" imageName:@"tabbar_video" selectedImageName:@"tabbar_video_hl"];
// 4.FOUR
UIViewController *four = [[UIViewController alloc] init];
four.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:four title:@"我的" imageName:@"tabbar_setting" selectedImageName:@"tabbar_setting_hl"];
}
/**
* 初始化一個(gè)子控制器
*
* @param childVc 需要初始化的子控制器
* @param title 標(biāo)題
* @param imageName 圖標(biāo)
* @param selectedImageName 選中的圖標(biāo)
*/
- (void)addChildViewController:(UIViewController *)childVc title:(NSString *)title imageName:(NSString *)imageName selectedImageName:(NSString *)selectedImageName {
// 1.設(shè)置控制器的屬性
childVc.title = title;
// 設(shè)置圖標(biāo)
childVc.tabBarItem.image = [[UIImage imageNamed:imageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 設(shè)置選中的圖標(biāo)
childVc.tabBarItem.selectedImage = [[UIImage imageNamed:selectedImageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[childVc.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:13.f]} forState:UIControlStateSelected];
//方式一 (self.tabBarType == typeOne) 只有圖片沒有文字tabbar
if ([title isEqualToString:@"publish"]) {
//tabBar圖片居中顯示，不顯示文字
childVc.title = @"";
childVc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
}
// 2.包裝一個(gè)導(dǎo)航控制器
ZYNavigationVc *nav = [[ZYNavigationVc alloc] initWithRootViewController:childVc];
[self addChildViewController:nav];
}
Demo里面的三種方式是采用枚舉來區(qū)分的
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSInteger, TabBarType) {
typeOne = 0,
typeTwo = 1,
typeThree = 2
};
@interface ZYTabBarViewController : UITabBarController
@property (nonatomic, assign) TabBarType tabBarType;
@end
typeOne 需要添加的代碼
if (self.tabBarType == typeOne) { UIViewController *publish = [[UIViewController alloc] init]; publish.view.backgroundColor = [UIColor blueColor]; two.view.backgroundColor = [UIColor magentaColor]; [self addChildViewController:publish title:@"publish" imageName:@"tabbar_write" selectedImageName:@"tabbar_write"]; }
//方式一 (self.tabBarType == typeOne) 只有圖片沒有文字tabbar if ([title isEqualToString:@"publish"]) { //tabBar圖片居中顯示刚梭，不顯示文字 childVc.title = @""; childVc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0); }
typeOne實(shí)現(xiàn)思路:
這是一種投機(jī)取巧的方式, 主要是把title設(shè)置為@"", 在設(shè)置圖片的偏移
typeTwo實(shí)現(xiàn)思路:
通過自定義UITabBar
.m文件核心代碼:
- (void)layoutSubviews {
[super layoutSubviews];
//按鈕的尺寸
CGFloat buttonW = self.frame.size.width/5.0;
CGFloat buttonH = self.frame.size.height;
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, buttonH * 0.5);
//中間凸起tabBar
if (_isCircle) {
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height/2.0 - 20);
self.label.center = CGPointMake(self.publishButton.center.x, CGRectGetMaxY(self.publishButton.frame)+10);
}
//按鈕索引
NSInteger tabbarIndex = 0;
for (UIView * subview in self.subviews) {
if ([subview isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
subview.frame = CGRectMake(tabbarIndex * buttonW, 0, buttonW, buttonH);
tabbarIndex ++;
//把中間的按鈕位置預(yù)留出來
if (tabbarIndex == 2) {
tabbarIndex ++;
}
}
}
}
- (void)publishClick {
if ([self.ZYDelegate respondsToSelector:@selector(tabBarDidClickPlusButton)]) {
[self.ZYDelegate tabBarDidClickPlusButton];
}
}
在自定義的ZYTabBarViewController利用kvc替換系統(tǒng)的tabBar, 這里的self.tabBarType == typeTwo 就是表示第二種自定義tabBar
ZYTabbar * tabbar = [[ZYTabbar alloc] init];
tabbar.ZYDelegate = self;
self.delegate = self;
//注意：因?yàn)槭窍到y(tǒng)的tabBar是readonly的窝剖，所以用KVC方法替換
if (self.tabBarType == typeTwo) {
[self setValue:tabbar forKey:@"tabBar"];
}else if (self.tabBarType == typeThree) {
tabbar.isCircle = YES;
[self setValue:tabbar forKey:@"tabBar"];
}
[self setupAllChildViewControllers];
typeThree實(shí)現(xiàn)思路:
和typeTwo基本一致, 就是把自定義button的背景圖片以及位置移動(dòng)一下.并設(shè)置label的位置
代碼如下:
#pragma mark -- setter
- (void)setIsCircle:(BOOL)isCircle {
_isCircle = isCircle;
if (isCircle) {
[self.publishButton setBackgroundImage:[UIImage imageNamed:@"post_normal"] forState:UIControlStateNormal];
[self.publishButton setBackgroundImage:[UIImage imageNamed:@"post_normal"] forState:UIControlStateHighlighted];
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height/2.0 - 20);
self.label.center = CGPointMake(self.publishButton.center.x, CGRectGetMaxY(self.publishButton.frame)+10);
[self addSubview:self.label];
}
}
這里在ZYTabbar聲明一個(gè)isCircle主要是為了區(qū)分方式二和方式三, 并實(shí)現(xiàn)isCircle的setter方法, 來修改button的背景圖片, 由于layoutSubviews這個(gè)方法是在isCircle的setter方法之后調(diào)用的, 所以我們還需要在layoutSubviews這個(gè)方法內(nèi)部修改button, label的位置
- (void)layoutSubviews {
[super layoutSubviews];
//按鈕的尺寸
CGFloat buttonW = self.frame.size.width/5.0;
CGFloat buttonH = self.frame.size.height;
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, buttonH * 0.5);
//中間凸起tabBar
if (_isCircle) {
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height/2.0 - 20);
self.label.center = CGPointMake(self.publishButton.center.x, CGRectGetMaxY(self.publishButton.frame)+10);
}
//按鈕索引
NSInteger tabbarIndex = 0;
for (UIView * subview in self.subviews) {
if ([subview isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
subview.frame = CGRectMake(tabbarIndex * buttonW, 0, buttonW, buttonH);
tabbarIndex ++;
//把中間的按鈕位置預(yù)留出來
if (tabbarIndex == 2) {
tabbarIndex ++;
}
}
}
}
到這里差不多demo里面的三種自定義tabBar已經(jīng)說完了.
最后說一下點(diǎn)擊tabBar的動(dòng)畫效果, 代碼如下:
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item {
NSMutableArray * tabbarArr = [NSMutableArray array];
NSInteger index = [self.tabBar.items indexOfObject:item];
for (UIView *subview in tabBar.subviews) {
if ([subview isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
[tabbarArr addObject:subview];
}
}
UIView * tabbarBtn = tabbarArr[index];
for (UIView * imgV in tabbarBtn.subviews) {
if ([imgV isKindOfClass:NSClassFromString(@"UITabBarSwappableImageView")]) {
CABasicAnimation*pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
pulse.timingFunction= [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pulse.duration = 0.2;
pulse.repeatCount= 1;
pulse.autoreverses= YES;
pulse.fromValue= [NSNumber numberWithFloat:0.7];
pulse.toValue= [NSNumber numberWithFloat:1.3];
[imgV.layer
addAnimation:pulse forKey:nil];
}
}
}
這里主要是實(shí)現(xiàn)UITabBarDelegate的代理方法來實(shí)現(xiàn)的, 需要注意的一點(diǎn)就是我們不需要再聲明 self.tabBar.delegate = self, 因?yàn)槲乙呀?jīng)實(shí)現(xiàn)了UITabBarController的代理, 具體的原因我也不是很清楚, 想了解更多的話, 還是去找度娘
