您好,欢迎来到花图问答。
搜索
您的当前位置:首页使用 RDVTabBarController 制作底部凸起的 T

使用 RDVTabBarController 制作底部凸起的 T

来源:花图问答

本文主要针对底部凸起的 TabBar 这种特殊需求,不感兴趣的可以直接绕过~

最近做的一个项目需要底部凸起的 TabBar,效果如下:

实现方式与 iOS 原生UITableBarController基本一致,方便上手。RDVTabBar可以比较简单滴实现底部某个 tab 凸起的效果。支持自定义 badge。

切图

因为RDVTabBarItem本身提供如下支持:

设置选中和未选中的背景设置选中和未选中的 Image 设置选中和未选中的文本属性

而且考虑到屏幕的自适应,所以我们在切图的时候把 tab 的 icon 和背景(背景如果是纯色可以不切图)单独切图。

撸代码

首先,我们新建一个继承RDVTabBarController的类,然后通过代码或者SB的方式将其设置为根视图。

巨坑

这里有我之前踩过的一个坑,因为一般 App 都会有UINavigationController用来做视图导航,所以当 App 底部有 TabBar 的时候,我们有两种选择:

用一个UITabBarController包含多个UINavigationController。用一个UINavigationController包含一个UITabBarController。

曾经我很天真(sha bi)的选了第一种,理由是从逻辑上理解更自然,但是结果是被坑惨了,因为业务需求往往是底部UITabBar只在几个 Tab 的首页显示,进入下一个页面之后就要隐藏起来,如果采用了第一种方案,你就需要使用self.hidesBottomBarWhenPushed = YES或者自定义动画的方式来隐藏底部UITabBar,然后坑就出现了——当你需要从某个 Tab 的首页渐变到下一个页面的时候。

如果使用self.hidesBottomBarWhenPushed = YES,UITabBar仍然会按照原来动画方式隐藏和出现,也就是你会看到 Push 的时候它从右往左消失,Pop 的时候从左往右出现,OMG!!!这 tmd 能看么?你的切换动画是渐变的,但是竟然有个UITabBar在下面跑来跑去,不能忍好么?

这个时候是不是想自定义动画了?呵呵~不敢告诉你我试了好久,也没有得到一种可以让UITabBar渐变消失出现,然后 Tab 里面的页面还能平滑滴配合UITabBar做变化的动画效果。

所以!为什么不选第二种!在也不需要self.hidesBottomBarWhenPushed = YES!再也不需要为隐藏和显示UITabBar头疼!再也不需要搞各种动画来处理这个巨坑,你所需要做的只是:在 Tab 页面切换的时候把导航栏的标题换一下而已。So easy!

言归正传

好了,骂完以前天真(sha bi)的日子,感觉爽多了~现在继续定制 TabBar。

首先,和UITableBarController一样,先设置TabBarController管理的viewControllers:

UIStoryboard *homeStoryboard = [UIStoryboard storyboardWithName:WDHOMESTORYBOARD bundle:nil];

UIViewController *firstViewController=[homeStoryboard instantiateViewControllerWithIdentifier:WDHOMEVIEWCONTROLLER];

UIStoryboard *clothStoryboard = [UIStoryboard storyboardWithName:WDCLOTHSTORYBOARD bundle:nil];

UIViewController *secondViewController=[clothStoryboard instantiateViewControllerWithIdentifier:WDCLOTHVIEWCONTROLLER];

UIStoryboard *userStoryboard = [UIStoryboard storyboardWithName:WDUSERSTORYBOARD bundle:nil];

UIViewController *thirdViewController=[userStoryboard instantiateViewControllerWithIdentifier:WDLOGINVIEWCONTROLLER];

[self setViewControllers:@[firstViewController, secondViewController,

thirdViewController]];

代码很简单,就是从 SB 中加载 3 个ViewController然后放到viewControllers里面去。

然后是关键部分,对 TabBar 做定制:

self.tabBar.frame = CGRectMake(0, 0, SCREEN_SIZE.width, 68);

self.tabBar.backgroundColor = [UIColor clearColor];

// tab 图片

NSArray *tabBarItemImages = @[@"home_icon", @"cloth_icon", @"cloud_icon"];

// tab 标题

NSArray *tabBarItemTitles = @[@"首页", @"", @"云同步"];

NSInteger index = 0;

for (RDVTabBarItem *item in [[self tabBar] items])

{

if (index == 1) {

[item setBackgroundSelectedImage:[UIImage imageNamed:@"tabbar_bg_image"] withUnselectedImage:[UIImage imageNamed:@"tabbar_bg_image"]];

} else {

[item setBackgroundSelectedImage:[WDImageUtil createImageWithColor:TINT_COLOR] withUnselectedImage:[WDImageUtil createImageWithColor:DARK_COLOR]];

item.itemHeight = 57.0f;

}

UIImage *selectedimage = [UIImage imageNamed:[NSString stringWithFormat:@"%@_selected",[tabBarItemImages objectAtIndex:index]]];

UIImage *unselectedimage = [UIImage imageNamed:[NSString stringWithFormat:@"%@",[tabBarItemImages objectAtIndex:index]]];

[item setFinishedSelectedImage:selectedimage withFinishedUnselectedImage:unselectedimage];

[item setTitle:[tabBarItemTitles objectAtIndex:index]];

item.selectedTitleAttributes = @{

NSFontAttributeName: [UIFont boldSystemFontOfSize:12],

NSForegroundColorAttributeName:[UIColor whiteColor],

};

item.unselectedTitleAttributes = @{

NSFontAttributeName: [UIFont boldSystemFontOfSize:12],

NSForegroundColorAttributeName:[UIColor whiteColor],

};

index++;

}

这里我做了几件事情:

设置tabBar的frame,设置其高度为凸出 Tab 按钮的高度,如果不设置的话,凸出 Tab 按钮会被裁剪掉,如下图:

这样设置好之后就可以达到文章开始时的效果了。

唯一不足就是中间凸起按钮的背景图片用了一个比较猥琐的办法。如果大家有更科学的办法可以通过下面的评论告诉我~

Copyright © 2019- huatuowenda.com 版权所有 湘ICP备2023022495号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务