自定义UITabBar-CSDN博客

像Instagram和闲鱼或者映客直播等app，其TabBar中间是一块圆形的Icon。想要实现这样的布局，基本上需要自定义一个UITabBar.

StackOverflow上较多人选择的答案是不需要继承UITabBar来自定义，而是将UIButton作为一个subview添加到当前的view中。这样做的话，看起来会比较奇怪，因为其他item的间距并没有被调整，另外如果隐藏tabbar的话，按钮需要单独进行隐藏。

所以我选择的方法是自定义UITabBar，实现自己需要的功能:

BaseTabBar.h

#import <UIKit/UIKit.h>

@interface BaseTabBar : UITabBar

/// Button that layout in the middle
@property (nonatomic, strong) UIButton *centerButton;

/// Button width. If button is a circle, buttonWidth shoule equal to buttonHeight
@property (nonatomic, assign) CGFloat buttonWidth;

/// Button height. If button is a circle, buttonHeight shoule equal to buttonWidth
@property (nonatomic, assign) CGFloat buttonHeight;

/// Block that handle button event
@property (nonatomic, copy) void (^tapBlock)();

@end
复制代码

BaseTabBar.m

#import "BaseTabBar.h"

@implementation BaseTabBar

- (instancetype)init {
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
       	self.centerButton = ({
            UIButton *button = [[UIButton alloc] init];
            [button setBackgroundImage:[UIImage imageNamed:@"Instagram"] forState:UIControlStateNormal];
            [button setBackgroundImage:[UIImage imageNamed:@"Instagram"] forState:UIControlStateHighlighted];
            [button addTarget:self action:@selector(didTappedCenterButton) forControlEvents:UIControlEventTouchUpInside];
            button;
        });
        [self addSubview:self.centerButton];
    }
    return self;
}

- (void)layoutSubviews {
    
    [super layoutSubviews];
    CGFloat centerX = self.center.x;
    // 这里需要注意的是，如果想要获取self.center.y的值的话，获取出来的是tabbar在当前vc的view的坐标系的位置
    self.centerButton.frame = CGRectMake(centerX - self.buttonWidth/2, -20, self.buttonWidth, self.buttonHeight);

    Class class = NSClassFromString(@"UITabBarButton");
    int index = 0;
    int tabWidth = self.bounds.size.width / 3; // tab的数目，也可更改为5个
    for (UIView *view in self.subviews) {
        if ([view isKindOfClass:class]) {
            CGRect rect = view.frame;
            rect.origin.x = index * tabWidth;
            rect.size.width = tabWidth;
            view.frame = rect;
            index++;

            if (index == 1) index++;
        }
    }
}

// 拦截点击事件
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if (!self.hidden) {
        if ([self touchInCircle:self.centerButton.center radius:self.buttonWidth/2 targetPoint:point]) {
            return self.centerButton;
        } else {
			return [super hitTest:point withEvent:event];
        }
    }
    return [super hitTest:point withEvent:event];
}

// 判断点击点是否在按钮内
- (BOOL)touchInCircle:(CGPoint)center radius:(CGFloat)radius targetPoint:(CGPoint)point {
    CGFloat dist = sqrtf((point.x - center.x) * (point.x - center.x) + (point.y - center.y) * (point.y - center.y));
    return dist <= radius;
}

- (void)didTappedCenterButton {
    if (self.tapBlock) {
        self.tapBlock();
    }
}

@end
复制代码

继承UITabBarController

BaseTabBarController.h

#import <UIKit/UIKit.h>

@interface BaseTabBarController : UITabBarController

@end
复制代码

BaseTabBarController.m

#import "BaseTabBarController.h"
#import "BaseTabBar.h"

@interface BaseTabBarController ()

@end

@implementation BaseTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    BaseTabBar *tabBar = [[BaseTabBar alloc] init];
    tabBar.buttonHeight = 50;
    tabBar.buttonWidth = 50;
    tabBar.tapBlock = ^() {
        NSLog(@"You did tapped center button");
    };
    // 利用KVO来设置TabBar
    [self setValue:tabBar forKeyPath:@"tabBar"];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
复制代码