自定義UITabBar

像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
複製程式碼