使用 AxcAE_TabBar 制作底部凸起的 TabBar
首先这是传送门:https://github.com/axclogo/AxcAE_TabBar
根据需求了解需要用的TabBar是什么样的,其次大致了解下以下三个重要架构基层控制器所担任的位置
UINavigationController
UITabBarController
UIViewController
以及app主体窗口:UIWindow
对于TabBar和Navigation的嵌套方案流行的是:
Window持有一个TabBarVC,然后TabBar根据原型需求决定嵌套几个选项卡,每个选项卡中嵌套一个Navigation,然后Navigation中嵌套一个ViewController
也就是说每个选项卡的导航推出(push)规则是完全独立开的。
页面结构可以理解为下:
TB+Nav+VC结构另外一种就是Window持有一个Navigation,然后Navigation中嵌套一个TabBarVC,之后TabBarVC中持有N个ViewController
优点是每次推出不需要 vc.hidesBottomBarWhenPushed = YES; 对于一些特殊交互效果/动画的app来讲会很方便,并且所有页面共用一个Navigation,
缺点是直接[self.navigationController pushViewController:vc animated:YES];这么写是push不出来的,需要把VC添加到导航条的ChildViewController中,就是需要将 使用的VC 添加到 带有Nav的VC中去 (addChildViewController了解下) 不过TabBar设置选项卡的时候就已经添加了(viewControllers这个数组了解下)
好了,基础页面结构了解后,再看看需求选择其中一种方式,下面就正式开始快速制作一个底部凸起的Tabbar
首先创建工程,然后使用cocoaPods导入
1.在Podfile 中添加 pod 'AxcAE_TabBar'
2.执行 pod setup
3.执行 pod install 或 pod update
4.导入 #import "AxcAE_TabBar.h"
Pods然后创建一个继承TabBarController的VC:
tabbarvc再将其设置为RootVC:
然后在这个TabBar里开始遍历大法创建选项卡:
VCs然后遍历这个集合,并且使用AxcAE_TabBar的模型构造进行设置:
只需要特殊对待第二个凸起就可以了
最后收尾,把视图添加上去即可,记得实现代理方法
123实现代理,并且重写一下切换视图的函数,这里的响应链为:手指触发AE_TabBar -> 代理回调给TabBarVC -> TabBarVC调用系统函数完成切换视图,所以需要实现这么两个函数:
select最后,再进行一下布局适配,这里设置frame大小,然后使其主动重规划布局即可:
layout然后运行一下看效果:
纵屏 横屏最后,还有一个问题,就是会发现点击凸起TabbBar之上会没有反应,这时候需要自建一个UITabBar来替换并重写点击触发
这里详见作者给出的解决方案:https://github.com/axclogo/AxcAE_TabBar/issues/2
testTabbar那么就是再创建一个继承于UITabBar的组件
tabbar然后根据作者的描述写入以下代码:
testTB之后在TabBarVC里加上这么一句替换:
tihuan再运行测试:
run就完成了凸起TabBar的凸出部分点击事件
GitHub:https://github.com/axclogo/AxcAE_TabBar