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

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

不过主要 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];
    }
}