iOS 自定义选项卡控件(TabBar)的制作思路

来源：互联网发布：盘古网络真的双休么编辑：程序博客网时间：2024/05/26 12:03

其实一般我在博客针对控件这一块来说,是很少进行解说.

不过主要 TabBar 相对于其他控件的重要性要多得多,制作方面也要复杂一些.

为此,我专门写一篇教程,记录一下原理和思路.以供各路神仙参考!

OK,进入正文:

iOS 5以后其实制作这类控件简单多了, 不需要自己去组织各个View 之间的切换.

第一点,原理:

TabBar它讲白了也是View,只是在一个View上面暂时只显示一个View 根据用户选按决定显示哪个View

iOS5以后提供在ViewController内部直接填装其他子ViewController,代码如下:

[self addChildViewController:viewController];

这样写的好处是什么,为什么iOS5以后要这样添加呢? 参考下文,你就知道为什么:

http://blog.devtang.com/blog/2012/02/06/new-methods-in-uiviewcontroller-of-ios5/

那么针对系统下的UITabBarViewController 如何进行自定义呢?

默认的TabBarView高度是49 这里注意,不要尝试去修改这个高度以来展现更多的容器视图,总之这样怎么弄都弄不到你想要的效果.

原理方面是将UITabBar 隐藏. 那么在添加一个自定义的UIView 到 UITabBarViewController的View上面

这样这个UIView 就随便你什么开发了.

另外值得一提的是,当你Push到下一个视图时,你想隐藏你自己自定义的视图. 此时纠结了.

那么在我自己经过无数次尝试以后,得带以下代码,配合系统默认的 hidesBottomBarWhenPushed 也算是实现了.

原理则是,默认addSubView 到根视图中,当要切换Push到新的视图的时候.再把自定义视图 addSubView到TabBarView上面. 连带着一起过去.

一:声明这个变量在第一次加载界面时不会有错乱的动画出现

@interface FESBHomeViewController (){    BOOL _isFirstShowCoopTabBar;}

二:在TabBarViewController 执行ViewDidLoad时显示出自定义选项卡视图

- (void)viewDidLoad{    [super viewDidLoad];    _isFirstShowCoopTabBar = YES;    [self isHiddenTabBar:NO withViewController:nil];}

三:核心切换自定义选项卡视图的代码

- (void)isHiddenTabBar:(BOOL)hidden withViewController:(UIViewController *)viewController{    if (!self.tabBar.hidden == hidden) {        return;    }    [coopTabBarView removeFromSuperview];    if (hidden) {        [self.tabBar setHidden:NO];        [coopTabBarView setFrame:self.tabBar.bounds];        [self.tabBar addSubview:coopTabBarView];        if (viewController != nil) {            viewController.hidesBottomBarWhenPushed = YES;        }    }else    {        [self.tabBar setHidden:YES];        [coopTabBarView setFrame:self.tabBar.frame];        int statusBarHeight = 0;        if (_isFirstShowCoopTabBar) {            _isFirstShowCoopTabBar = NO;            statusBarHeight = 20;        }        if (self.navigationController.viewControllers == nil) {            coopTabBarView.Help_top -=statusBarHeight;        }else        {            coopTabBarView.Help_top -=statusBarHeight+44;        }        [self.view addSubview:coopTabBarView];    }}