iOS - 实现映客首页 TabBar 和滑动隐藏 NavBar 和 TabBar

之前在做直播的时候，参照了映客App，发现其首页的效果还挺不错，在网上找了一下相关仿映客App代码和博客，大部分都是说如何播放直播流和推流，对于UI这块甚少，所以我自己花了点时间研究了一下映客的首页UI效果。

映客首页主要分两部分，一部分是实现没有文字而且中间按钮突出的TabBar，另一部分是显示滑动ScrollView隐藏和显示NavBar和TabBar。我们来慢慢看。

一、TabBar实现

首先，我们看下实现后的效果。

映客底部TabBar效果

这里我们可以使用系统的TabBar来实现该效果。

关于如何设置系统的TabBar，这里就不赘述了，可以看到我项目的代码。我们来看重点部分。

1. 提出问题：

如何实现中间的突出按钮
中间突出按钮超出TabBar部分是如何响应点击的
如何实现TabBar中Item图片居中且不带文字

（1）中间突出按钮

要实现中间突出的按钮，直接使用系统TabBar还是不行，需要用一个取巧的方法，通过KVC的方式（使用KVC可以修改readonly属性，不过不能滥用哦）使用自定义的TabBar替换系统UITabBar。

//创建自己的tabbar，然后用KVC将自己的tabbar和系统的tabBar替换下
HKTabBar *tabbar = [[HKTabBar alloc] init];
//KVC实质是修改了系统的_tabBar
[self setValue:tabbar forKeyPath:@"tabBar"];

替换了系统UITabBar后，就需要实现中间按钮了。我们在自定义TabBar中添加UIButton，作为中间按钮。

1.在HKTabBar的initWithFrame:方法中，初始化中间按钮

//设置中间按钮图片和尺寸
UIButton *centerBtn = [[UIButton alloc] init];
[centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"] forState:UIControlStateNormal];
[centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"] forState:UIControlStateHighlighted];
//这里button的size是根据需要设置的中间图片来的
centerBtn.size = centerBtn.currentBackgroundImage.size;
[centerBtn addTarget:self action:@selector(centerBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
self.centerBtn = centerBtn;
[self addSubview:centerBtn];

2.在layoutSubviews中设置中间按钮和其他Item位置
由于系统Item是UITabBarButton类型，自定义中间按钮为UIutton，所以可以根据Item类型来区分是自定义按钮还是系统Item，再调整每个Item的位置。这里系统UITabBarButton宽度为TabBar宽度减去中间按钮宽度的一半。

//系统自带的按钮类型是UITabBarButton，找出这些类型的按钮，然后重新排布位置，空出中间的位置
Class class = NSClassFromString(@"UITabBarButton");

self.centerBtn.centerX = self.centerX;
//调整中间按钮的中线点Y值
self.centerBtn.centerY = (self.height - (self.centerBtn.height - self.height)) * 0.5;

NSInteger btnIndex = 0;
for (UIView *btn in self.subviews) {//遍历tabbar的子控件
    if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
        //按钮宽度为TabBar宽度减去中间按钮宽度的一半
        btn.width = (self.width - self.centerBtn.width) * 0.5;
        //中间按钮前的宽度，这里就3个按钮，中间按钮Index为1
        if (btnIndex < 1) {
            btn.x = btn.width * btnIndex;
        } else { //中间按钮后的宽度
            btn.x = btn.width * btnIndex + self.centerBtn.width;
        }

        btnIndex++;
        //如果是索引是0(从0开始的)，直接让索引++，目的就是让消息按钮的位置向右移动，空出来中间按钮的位置
        if (btnIndex == 0) {
            btnIndex++;
        }
    }
}

[self bringSubviewToFront:self.centerBtn];

到这里，中间按钮就实现好了，但是如何让超出TabBar部分（即红色框部分）响应点击事件呢？

TabBar中间按钮突出位置

（2）超出TabBar部分响应点击

按照系统默认处理方式，超出TabBar部分，是不会响应点击事件的（不信的可以自己试试哦）。要响应点击事件，这里就需要重写UIView 的 hitTest：方法（该方法可以决定点击事件的响应者）了。

//重写hitTest方法，去监听中间按钮的点击，目的是为了让凸出的部分点击也有反应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {

    //判断当前手指是否点击到中间按钮上，如果是，则响应按钮点击，其他则系统处理
    //首先判断当前View是否被隐藏了，隐藏了就不需要处理了
    if (self.isHidden == NO) {

        //将当前tabbar的触摸点转换坐标系，转换到中间按钮的身上，生成一个新的点
        CGPoint newP = [self convertPoint:point toView:self.centerBtn];

        //判断如果这个新的点是在中间按钮身上，那么处理点击事件最合适的view就是中间按钮
        if ( [self.centerBtn pointInside:newP withEvent:event]) {
            return self.centerBtn;
        }
    }

    return [super hitTest:point withEvent:event];
}

处理完突出部分，就剩下不带文字的Item了。

(3) TabBar中Item图片居中且不带文字

有的同学可能就会说了，要不带文字，不设置tabBarItem的title不就好了。但是title这个NavBar的标题也是要用的，所以还是必须要设置。

那要怎么办呢？其实很简单，要实现该效果，以下代码就够了

//设置图片居中，这里的4.5，根据实际中间按钮图片大小来决定
Vc.tabBarItem.imageInsets = UIEdgeInsetsMake(4.5, 0, -4.5, 0);
//设置不显示文字，将title的位置设置成无限远，就看不到了
Vc.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, MAXFLOAT);

到这里，TabBar的实现就结束了，下面我们来看看如何实现隐藏和显示NavBar和TabBar。

二、隐藏和显示NavBar和TabBar实现

首先，我们来看看效果

滑动隐藏NavBar和TabBar效果

1. 提出问题：

如何移动NavBar和TabBar
如何控制NavBar和TabBar移动距离
如何控制使ScrollView移动的同时其显示的区域正确
如何在手指滑动距离较小时，收起或者展开NavBar和TabBar
如何在Push到其他页面，再Pop回来后，NavBar和TabBar显示正确

首先，我们要解决最基本的问题，如何让NavBar和TabBar移动

（1）移动NavBar和TabBar

移动的话，其实很简单，只需要改变他们的Y坐标即可。

//这里的self就是NavBar或者TabBar
CGRect viewFrame = self.frame;
viewFrame.origin.y = newOffsetY;
self.frame = viewFrame;

（2）控制NavBar和TabBar移动距离

移动距离，就要取决于ScrollView的相对移动距离了，即相对之前contentOffset.y滑动了多少。

在计算相对移动距离之前，我们需要获取上次滑动ScrollView的contentOffset.y，我们可以在- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView中获取上次滑动ScrollView的contentOffset.y，即_previousOffsetY，

_previousOffsetY = scrollView.contentOffset.y;

之后实现ScrollView的委托方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView,在其中监听ScrollView的移动距离，从而计算相对移动距离deltaY

CGFloat deltaY = scrollView.contentOffset.y - _previousOffsetY;

在得到相对移动距离后，我们就需要分别控制NavBar和TabBar的移动距离了。
这里，我们可以实现一个分类来专门控制他们的移动。

要注意的是：当相对距离超出应移动范围时，需要对其校正
那么，我们必须先知道NavBar和TabBar坐标的上下限，即其展开和收起时的Y坐标，以下代码openOffsetY为展开的Y坐标，closeOffsetY为收起的Y坐标。

//NavBar
//kStatusBarHeight为状态栏高度
openOffsetY = kStatusBarHeight;
closeOffsetY = -CGRectGetHeight(self.frame;
//TabBar
//kScreenHeight为屏幕宽度，hk_extraDistance为中间按钮突出的距离
openOffsetY = kScreenHeight - CGRectGetHeight(self.frame);
closeOffsetY = kScreenHeight + CGRectGetHeight(self.frame) + self.hk_extraDistance;

以下坐标都代表Y坐标，我们这里只做竖直方向移动
知道可以移动的范围后，就可以根据相对移动距离deltaY计算移动后的坐标了。
对于NavBar，计算后的坐标（即当前坐标减去deltaY），要大于收起的坐标小于展开的坐标。
对于TabBar，计算后的坐标（即即当前坐标加上deltaY），要大于展开的坐标小于收起的坐标。
这里画画图会好理解一些。

//NavBar最终要移动的Y坐标
newOffsetY = CGRectGetMinY(self.frame) - deltaY;
newOffsetY = MAX(closeOffsetY, MIN(openOffsetY, newOffsetY));
//TabBar最终要移动的Y坐标
newOffsetY = CGRectGetMinY(self.frame) + deltaY;
newOffsetY = MIN(closeOffsetY, MAX(openOffsetY, newOffsetY));

之后，就只要将NavBar和TabBar移动到指定坐标即可

CGRect viewFrame = self.frame;
viewFrame.origin.y = newOffsetY;
self.frame = viewFrame;

我们再来看看ScrollView是怎么控制移动的。

（3）控制使ScrollView移动的同时其显示的区域正确

细心的童鞋可能会发现，当NavBar收起或者展开的过程中，ScrollView是跟着一起移动的，即ScrollView本身并没滑动，而是Y坐标在改变。那如何实现呢？

这里，我们可以改变ScrollView的contentInset来满足我们的需求，相对于改变ScrollView的frame要方便很多哦。

我们要根据NavBar和TabBar移动后的坐标，改变ScrollView的contentInset的top和bottom。
top取NavBar的MaxY，就是当前Y坐标加上本身的高度。
bottom取TabBar突出的距离，即屏幕高度减去其Y坐标大于0的部分。
这里要注意：ScrollView的scrollIndicatorInsets同时也需要更新，不然Indicator显示就有问题了。

CGFloat navBarMaxY = CGRectGetMaxY(self.navigationController.navigationBar.frame);
CGFloat tabBarMinY = CGRectGetMinY(self.tabBarController.tabBar.frame);
UIEdgeInsets scrollViewInset = self.tableView.contentInset;
scrollViewInset.top = navBarMaxY;
scrollViewInset.bottom = MAX(0, kScreenHeight - tabBarMinY);
self.tableView.contentInset = scrollViewInset;
self.tableView.scrollIndicatorInsets = scrollViewInset;

（4）在手指滑动距离较小时，收起或者展开NavBar和TabBar

细心的童鞋可能会发现，映客在滑动距离比较小的时候，有的时候NavBar和TabBar会弹回来，有的时候会收起。这个是怎么做的呢？

这个就需要在停止滑动的时候处理，我们可以在ScrollView的委托方法- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate中处理。
在滑动时，要判断当前NavBar或者TabBar滑动距离，是否滑到到最大坐标（最大坐标减去最小坐标）的一半。如果没有滑动，则收起，反之展开。这里可能比较绕，我们看看代码。

//判断当前`NavBar`是展开还是收起
- (BOOL)hk_shouldOpen {
    CGFloat viewY = CGRectGetMinY(self.frame);
    //[self hk_openOffsetY]为展开的Y坐标，[self hk_closeOffsetY] 为收起的Y坐标
    CGFloat viewMinY = [self hk_openOffsetY];
    viewMinY = [self hk_closeOffsetY] + ([self hk_openOffsetY] - [self hk_closeOffsetY]) * 0.5;

    if (viewY <= viewMinY) {
        return NO;
    }
    return YES;
}

当知道是展开还是收起后，就可以进行滑动了。这里我们做一个简单动画，使滑动看起来自然一些，这里除了需要改变ScrollView的contentInset，还需要改变其contentOffset，因为NavBar和TabBar移动了，ScrollView也要跟着一起移动。

[UIView animateWithDuration:0.2 animations:^{

    CGFloat navBarOffsetY = 0;
    if (opening) {
        //navBarOffsetY为NavBar从当前位置到展开滑动的距离
        navBarOffsetY = [self.navigationController.navigationBar hk_open];
        [self.tabBarController.tabBar hk_open];
    } else {
        //navBarOffsetY为NavBar从当前位置到收起滑动的距离
        navBarOffsetY = [self.navigationController.navigationBar hk_close];
        [self.tabBarController.tabBar hk_close];
    }
    //更新TableView的contentInset
    [self updateScrollViewInset];
    //根据NavBar的偏移量来滑动TableView
    CGPoint contentOffset = self.tableView.contentOffset;
    contentOffset.y += navBarOffsetY;
    self.tableView.contentOffset = contentOffset;
}];

（5）在Push到其他页面，再Pop回来后，NavBar和TabBar显示正确

在Push到其他页面之前，必须把NavBar和TabBar都展开，不然在收起的状态Push到其他页面，NavBar和TabBar都不见了。
这里就需要在- (void)viewWillDisappear:(BOOL)animated中将NavBar和TabBar都展开。

还有一个地方需要注意：
当Push到其他页面的时候，如果此时ScrollView的contentInset不为(0,0,0,0)时，系统会自动将其置为(0,0,0,0)，这样在Push后，还会走到之前页面ScrollView的scrollViewDidScroll：方法中，会导致NavBar消失。对于这种情况，就不应该让其继续走我们处理展开和收取NavBar和TabBar的流程。
我们可以通过以下代码控制，当该UIViewController不是当前显示的UIViewController时，就不往下走了。

//在push到其他页面时候，还是会走该方法，这个时候不应该继续执行
if (!(self.isViewLoaded && self.view.window != nil)) {
   return;
}

到这里，映客首页的效果就实现好了！

Demo项目

该Demo项目地址：github.com/HustHank/Yi…

如果觉得该文章对你有用，请帮忙点赞或者Star我的GitHub项目，谢谢!