使用 AxcAE_TabBar 制作底部凸起的 TabBar

2018-06-22  本文已影响0人  我看到你点赞了

首先这是传送门: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

上一篇下一篇

猜你喜欢

热点阅读