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

96
HK_Hank
2017.01.08 17:26* 字数 2232

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

我们来看看最终效果


滑动隐藏NavBar和TabBar效果

从效果图上可以看出,映客首页主要分两部分,一部分是实现没有文字而且中间按钮突出的TabBar,另一部分是显示滑动ScrollView隐藏和显示NavBarTabBar。我们来慢慢看。

一、TabBar实现

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


映客底部TabBar效果

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

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

1. 提出问题:

  1. 如何实现中间的突出按钮
  2. 中间突出按钮超出TabBar部分是如何响应点击的
  3. 如何实现TabBarItem图片居中且不带文字
(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.在HKTabBarinitWithFrame:方法中,初始化中间按钮

//设置中间按钮图片和尺寸
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位置
由于系统ItemUITabBarButton类型,自定义中间按钮为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部分(即红色框部分)响应点击事件呢?

TabBar中间按钮突出位置

(2)超出TabBar部分响应点击

按照系统默认处理方式,超出TabBar部分,是不会响应点击事件的(不信的可以自己试试哦)。要响应点击事件,这里就需要重写UIViewhitTest:方法(该方法可以决定点击事件的响应者,关于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图片居中且不带文字

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

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

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

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

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

首先,我们来看看效果


滑动隐藏NavBar和TabBar效果

1. 提出问题:

  1. 如何移动NavBarTabBar
  2. 如何控制NavBarTabBar移动距离
  3. 如何控制使ScrollView移动的同时其显示的区域正确
  4. 如何在手指滑动距离较小时,收起或者展开NavBarTabBar
  5. 如何在Push到其他页面,再Pop回来后,NavBarTabBar显示正确

首先,我们要解决最基本的问题,如何让NavBarTabBar移动

(1)移动NavBar和TabBar

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

//这里的self就是NavBar或者TabBar
CGRect viewFrame = self.frame;
viewFrame.origin.y = newOffsetY;
self.frame = viewFrame;
(2)控制NavBar和TabBar移动距离

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

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

_previousOffsetY = scrollView.contentOffset.y;

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

CGFloat deltaY = scrollView.contentOffset.y - _previousOffsetY;

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

要注意的是:当相对距离超出应移动范围时,需要对其校正
那么,我们必须先知道NavBarTabBar坐标的上下限,即其展开和收起时的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));   

之后,就只要将NavBarTabBar移动到指定坐标即可

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

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

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

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

这里,我们可以改变ScrollViewcontentInset来满足我们的需求,相对于改变ScrollViewframe要方便很多哦。

我们要根据NavBarTabBar移动后的坐标,改变ScrollViewcontentInsettopbottom
topNavBarMaxY,就是当前Y坐标加上本身的高度。
bottomTabBar突出的距离,即屏幕高度减去其Y坐标大于0的部分。
这里要注意:ScrollViewscrollIndicatorInsets同时也需要更新,不然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

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

这个就需要在停止滑动的时候处理,我们可以在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;
}

当知道是展开还是收起后,就可以进行滑动了。这里我们做一个简单动画,使滑动看起来自然一些,这里除了需要改变ScrollViewcontentInset,还需要改变其contentOffset,因为NavBarTabBar移动了,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到其他页面之前,必须把NavBarTabBar都展开,不然在收起的状态Push到其他页面,NavBarTabBar都不见了。
这里就需要在- (void)viewWillDisappear:(BOOL)animated中将NavBarTabBar都展开。

还有一个地方需要注意:
Push到其他页面的时候,如果此时ScrollViewcontentInset不为(0,0,0,0)时,系统会自动将其置为(0,0,0,0),这样在Push后,还会走到之前页面ScrollViewscrollViewDidScroll:方法中,会导致NavBar消失。对于这种情况,就不应该让其继续走我们处理展开和收取NavBarTabBar的流程。
我们可以通过以下代码控制,当该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项目,谢谢!

iOS技术整理
Web note ad 1