之前在做直播的时候，参照了映客App，发现其首页的效果还挺不错，在网上找了一下相关仿映客App代码和博客，大部分都是说如何播放直播流和推流，对于UI这块甚少，所以我自己花了点时间研究了一下映客的首页UI效果。
我们来看看最终效果
从效果图上可以看出，映客首页主要分两部分，一部分是实现没有文字而且中间按钮突出的TabBar，另一部分是显示滑动ScrollView隐藏和显示NavBar和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类型，自定义中间按钮为UIButton，所以可以根据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部分（即红色框部分）响应点击事件呢？
（2）超出TabBar部分响应点击
按照系统默认处理方式，超出TabBar部分，是不会响应点击事件的（不信的可以自己试试哦）。要响应点击事件，这里就需要重写UIView 的 hitTest：方法（该方法可以决定点击事件的响应者，关于hitTest说明，可以参见iOS-使用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实现
首先，我们来看看效果
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 + 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项目地址：https://github.com/HustHank/YingKeHomeDemo
封装的滑动隐藏NavBar和TabBar开源控件
项目地址：https://github.com/HustHank/HKScrollingNavAndTabBar
如果觉得该文章对你有用，请帮忙点赞或者Star我的GitHub项目，谢谢!
