美文网首页
使用 AxcAE_TabBar 制作底部凸起的 TabBar

使用 AxcAE_TabBar 制作底部凸起的 TabBar

作者: 我看到你点赞了 | 来源:发表于2018-06-22 11:48 被阅读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

    相关文章

      网友评论

          本文标题:使用 AxcAE_TabBar 制作底部凸起的 TabBar

          本文链接:https://www.haomeiwen.com/subject/qmpfzttx.html