鉴于评论中的问题,本人又写已一遍demo,暂时没有发现大家提出item顺序错误与图片变大等问题.
现已将demo上传,大家可下载查看.demo链接
若有其他问题,可提供demo链接供我查看.

------- 前言 ------

现在制作TabBar中间凸出按钮的方法一般都是自定义一个tabBar,然后在进行其他处理,这方面的文章很多,就不多说.

今天我们介绍一种使用原生UITabBar制作中间凸出Item的方法,个人感觉方便快捷.

先看效果

QQ20180829-153018.gif

第一步:

和普通tabbar一样,设置UITabBarViewController的viewControllers和tabBarItem的样式;

image.png

第二步:

在TabBarViewVController中重写viewDidLayoutSubviews方法,在此方法中,调整中间item的imageInsets,这是系统自带的.

image.png

第二步(修改)

因为发现在来回切换tabbarItem的时候,Item地址存在变化,原因未明(估计是系统内部浅拷贝的原因),故而修改手势添加的位置.修改为在TabBarViewVController的delegate协议中的- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController中添加,避免系统内部每次拷贝导致手势响应丢失,看下图;

image.png

第三步:

创建UIBarItem的Category文件,使用KVC获取View

image.png

image.png

第四步:

创建UITabBarItem的Category文件,获取系统展示item展示图片的UIImageView,此处可运行时绑定Item的双击事件

image.png

image.png

第五步:

创建UITabBar的Category文件,重写响应链

image.png

拓展:

可在手势响应方法中制作旋转等动画,因为重写了响应链,手势的tap.view就是UIImageView;或者直接使用UITabBarItem的Category定义的方法获取UIImageView.

附代码,直接拷贝拿去用吧,代码少,就不上传Demo了

• *** UIBarItem的Category文件 ***

 - (UIView *)gs_view {
    return [self valueForKey:@"view"];
}

• *** UITabBarItem的Category文件 ***

/**
 *  双击 tabBarItem 时的回调，默认为 nil。
 *  @arg tabBarItem 被双击的 UITabBarItem
 *  @arg index      被双击的 UITabBarItem 的序号
 */
@property(nonatomic, copy) void (^gs_doubleTapBlock)(UITabBarItem *tabBarItem, NSInteger index);

/**
 * 获取一个UITabBarItem内显示图标的UIImageView，如果找不到则返回nil
 * @warning 需要对nil的返回值做保护
 */
- (UIImageView *)gs_imageView;

+ (UIImageView *)gs_imageViewInTabBarButton:(UIView *)tabBarButton;

- (UIImageView *)gs_imageView {
    return [self.class gs_imageViewInTabBarButton:self.gs_view];
}

+ (UIImageView *)gs_imageViewInTabBarButton:(UIView *)tabBarButton {
    
    if (!tabBarButton) {
        return nil;
    }
    
    for (UIView *subview in tabBarButton.subviews) {
        // iOS10及以后，imageView都是用UITabBarSwappableImageView实现的，所以遇到这个class就直接拿
        if ([NSStringFromClass([subview class]) isEqualToString:@"UITabBarSwappableImageView"]) {
            return (UIImageView *)subview;
        }
        
        if (IOS_VERSION < 10) {
            // iOS10以前，选中的item的高亮是用UITabBarSelectionIndicatorView实现的，所以要屏蔽掉
            if ([subview isKindOfClass:[UIImageView class]] && ![NSStringFromClass([subview class]) isEqualToString:@"UITabBarSelectionIndicatorView"]) {
                return (UIImageView *)subview;
            }
        }
    }
    return nil;
}

static char kAssociatedObjectKey_doubleTapBlock;

- (void)setGs_doubleTapBlock:(void (^)(UITabBarItem *, NSInteger))gs_doubleTapBlock {
    objc_setAssociatedObject(self, &kAssociatedObjectKey_doubleTapBlock, gs_doubleTapBlock, OBJC_ASSOCIATION_COPY_NONATOMIC);
}

- (void (^)(UITabBarItem *, NSInteger))gs_doubleTapBlock {
    return (void (^)(UITabBarItem *, NSInteger))objc_getAssociatedObject(self, &kAssociatedObjectKey_doubleTapBlock);
}

• *** UITabBar的Category文件 ***

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if (!self.isUserInteractionEnabled || self.isHidden || self.alpha <= 0.01) {
        return nil;
    }
    
    if (self.items.count < 2) {
        return [super hitTest:point withEvent:event];
    }
    
    UITabBarItem *item = self.items[2];
    UIImageView *itemImageView  = [item gs_imageView];
    
    if (!itemImageView) {
        return [super hitTest:point withEvent:event];
    }
    
    UIView *view = [super hitTest:point withEvent:event];
    if (view == nil){
        //转换坐标
        CGPoint tempPoint = [itemImageView convertPoint:point fromView:self];
        //判断点击的点是否在按钮区域内
        if (CGRectContainsPoint(itemImageView.bounds, tempPoint)){
            //返回按钮
            return itemImageView;
        }
        
        //******************    或者使用这个方法     ****************
        
        //判断如果这个新的点是在发布按钮身上，那么处理点击事件最合适的view就是发布按钮
        if ([itemImageView pointInside:point withEvent:event]) {
            return itemImageView;
        }else{//如果点不在发布按钮身上，直接让系统处理就可以了
            return [super hitTest:point withEvent:event];
        }
    }
    return view;
}