效果图：
闲鱼TabBar
demo下载地址：https://github.com/jiangcr/XianYuTabBar
Demo中的图片资源均从闲鱼APP中获取，具体获取方法可参考iOS-获取其他APP的图片资源
一、思路
1.UITabBarItem可以看做是一种特殊的button,首先可以创建自定义的button.
2.UITabBar是继承UIView的，可以创建一个自定义的tabbar继承UIView,方便高度自定义。
3.创建自定义的tabBarController继承UITabBarController。
4.通过按钮的点击方法，代理等建立三者的关系。
二、自定义Tabbar的主要过程
1.创建自定义的CustomButton
@interface CustomButton : UIButton
@property(nonatomic, strong)UITabBarItem *tabBarItem;
@end
由于系统的tabBar的图片，标题是通过UITabBarItem的赋值的，这里给CustomButton加个tabBarItem的属性，便于赋值，且更符合思维习惯。
初始化的时候设置image，title的一些公共属性。
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
//只需要设置一次的放置在这里
self.imageView.contentMode = UIViewContentModeBottom;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
self.titleLabel.font = [UIFont systemFontOfSize:12];
[self setTitleColor:[UIColor colorWithRed:117/255.0f green:117/255.0f blue:117/255.0f alpha:1.0] forState:UIControlStateNormal];
}
return self;
}
通过下面两个方法可以设置image，title的frame信息。
-(CGRect)imageRectForContentRect:(CGRect)contentRect；
-(CGRect)titleRectForContentRect:(CGRect)contentRect；
最后利用tabBarItem的set方法，给button的image，title赋值
- (void)setTabBarItem:(UITabBarItem *)tabBarItem
{
_tabBarItem = tabBarItem;
[self setTitle:self.tabBarItem.title forState:UIControlStateNormal];
[self setImage:self.tabBarItem.image forState:UIControlStateNormal];
[self setImage:self.tabBarItem.selectedImage forState:UIControlStateSelected];
}
2.创建自定义的CustomTabBar
@interface CustomTabBar : UIView
@property (nonatomic, weak)id <CustomTabBarDelegate>delegate;
- (void)addTabBarButtonWithTabBarItem:(UITabBarItem *)tabBarItem;
@end
这里CustomTabBar有两个作用：
1.CustomButton的一个背景；
2.把CustomButton和tabBarController的viewControllers关联起来
//方法一
- (void)addTabBarButtonWithTabBarItem:(UITabBarItem *)tabBarItem {
CustomButton * tabBarBtn = [CustomButton new];
[self addSubview:tabBarBtn];
tabBarBtn.tabBarItem = tabBarItem;
[tabBarBtn addTarget:self action:@selector(tabBarBtnClick:) forControlEvents:UIControlEventTouchDown];
[self.tabbarBtnArray addObject:tabBarBtn];
//default selected first one
if (self.tabbarBtnArray.count == 1) {
[self tabBarBtnClick:tabBarBtn];
}
}
方法一主要就是把CustomButton添加到customTabbar上，CustomButton的数量是与tabBarController的viewControllers有关的，应在创建tabBarController的viewControllers时调用此方法。
要把CustomButton的点击与tabBarController的viewControllers关联起来，需要一个代理方法。在代理方法中直接设置tabBarController的selectedIndex即可
@protocol CustomTabBarDelegate <NSObject>
- (void)tabBar:(CustomTabBar *)tabBar didSelectedButtonFrom:(long)fromBtnTag to:(long)toBtnTag;
@end
#pragma mark --------------------mainTabBar delegate
- (void)tabBar:(CustomTabBar *)tabBar didSelectedButtonFrom:(long)fromBtnTag to:(long)toBtnTag{
self.selectedIndex = toBtnTag;
}
3.创建自定义的CustomTabBarController
@interface CustomTabBarController : UITabBarController
@end
这部分有两个关键点
1.移除系统的tabBar
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
for (UIView *child in self.tabBar.subviews) {
if ([child isKindOfClass:[UIControl class]]) {
[child removeFromSuperview];
}
}
}
2.viewControllers与CustomButton关联
childVc.tabBarItem.image = [UIImage imageNamed:imageName];
childVc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImageName];
childVc.tabBarItem.title = title;
[self.mainTabBar addTabBarButtonWithTabBarItem:childVc.tabBarItem];
[self addChildViewController:childVc];
以上是自定义tabBar的一个主要过程，下面说一些可能要注意到的问题。
三、自定义tabBar过程中需要注意的问题
1.中间的Button是个特殊的button.
这种情况大多数和闲鱼都比较类似，点击会present一个viewController。这种情况我们可以单独添加一个按钮，单独设置点击方法。调整其frame即可。
- (void)setupPostButton {
UIButton * postBtn = [UIButton new];
postBtn.adjustsImageWhenHighlighted = NO;
[postBtn setBackgroundImage:[UIImage imageNamed:@"post_normal"] forState:UIControlStateNormal];
[postBtn addTarget:self action:@selector(postGoodAction) forControlEvents:UIControlEventTouchUpInside];
[postBtn setTitle:@"发布" forState:UIControlStateNormal];
postBtn.titleLabel.font = [UIFont systemFontOfSize:12];
[postBtn setTitleColor:[UIColor colorWithRed:117/255.0f green:117/255.0f blue:117/255.0f alpha:1.0] forState:UIControlStateNormal];
postBtn.bounds = CGRectMake(0, 0, postBtn.currentBackgroundImage.size.width, postBtn.currentBackgroundImage.size.height);
[postBtn setTitleEdgeInsets:UIEdgeInsetsMake(78, 0, 0, 0)];
[self addSubview:postBtn];
self.postBtn = postBtn;
}
2.导航栏顶部阴影效果
导航栏顶部原本是有一条线的，并不是阴影效果，达到这种效果有两张方案：
1.加一张阴影效果的image.
self.tabBar.shadowImage = [UIImage imageNamed:@"tapbar_top_line"];
2.代码绘制。
这里讲一下第二种方法
- (void)dropShadowWithOffset:(CGSize)offset
radius:(CGFloat)radius
color:(UIColor *)color
opacity:(CGFloat)opacity {
// Creating shadow path for better performance
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, self.tabBar.bounds);
self.tabBar.layer.shadowPath = path;
CGPathCloseSubpath(path);
CGPathRelease(path);
self.tabBar.layer.shadowColor = color.CGColor;
self.tabBar.layer.shadowOffset = offset;
self.tabBar.layer.shadowRadius = radius;
self.tabBar.layer.shadowOpacity = opacity;
// Default clipsToBounds is YES, will clip off the shadow, so we disable it.
self.tabBar.clipsToBounds = NO;
}
3.popToRootViewController时tabBar重叠的问题
当项目中出现popToRootViewController回到tabBarController的childViewController时，会出现tabBar重叠的情况，我们之前在tabBarController的viewWillAppear移除系统tabBar此时无效，此时可以通过通知的方法解决此问题。
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(removeTabBarBtn) name:@"removeTabBarBtn" object:nil];
for (UIView *tabBar in self.tabBar.subviews) {
if ([tabBar isKindOfClass:[UIControl class]]) {
[tabBar removeFromSuperview];
}
}
}
//返回根视图时移除原有的按钮
- (void)removeTabBarBtn
{
for (UIView *tabBar in self.tabBar.subviews) {
if ([tabBar isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
[tabBar removeFromSuperview];
}
}
}
** 注意：使用通知记得在合适的时机remove **
有关UITabBarController更详细的内容可参考iOS-UITabBarController详细总结。
结束语：
此文是我在学习过程中的探索与总结，不足之处还望大家见谅，并欢迎指正！
愿每一个人都能学有所成！
网友评论
中第三个，可以看看