如何自定义一个TabBar

自定义一个TabBar的步骤:
1. 首先自定义一个TabBarController继承自UITabBarController,比如JieTabBarController:UITabBarController
.h文件如下

@interface JieTabBarController : UITabBarController

@end

.m文件


#import "JieTabBarController.h"
#import "ViewController.h"
#import "ViewController1.h"
#import "ViewController2.h"
#import "ViewController3.h"
#import "JieTabBar.h"

@interface JieTabBarController ()<JieTabBarDelegate>

@property(nonatomic, strong)NSArray *vcClassNameArr;

@property(nonatomic, strong)JieTabBar *jie_tabBar;

@end

@implementation JieTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 1. 加载控制器
    [self configVCs];

    [self.tabBar addSubview:self.jie_tabBar];
}

- (void)tabBar:(JieTabBar *)tabBar barIdx:(JieBarType)barIdx {
    self.selectedIndex = barIdx - JieBarType_One;
}

- (JieTabBar *)jie_tabBar {
    if (!_jie_tabBar) {
        _jie_tabBar = [[JieTabBar alloc] initWithFrame:CGRectMake(0, 0, self.tabBar.frame.size.width, self.tabBar.frame.size.height)];
        _jie_tabBar.delegate = self;
    }
    return _jie_tabBar;
}


- (void)configVCs {
    _vcClassNameArr = @[@"ViewController", @"ViewController1", @"ViewController2", @"ViewController3"];
    NSMutableArray *vcArr = [[NSMutableArray alloc] init];
    for (int i = 0; i < 4; i++) {
        id vcClass = NSClassFromString(_vcClassNameArr[i]);
        UINavigationController *naVC = [[UINavigationController alloc] initWithRootViewController:[vcClass new]];
        [vcArr addObject:naVC];
    }
    self.viewControllers = vcArr;
}

@end

2.自定义完了TabBarController,然后需要自定义一个TabBar,eg.:JieTabBar
.h文件如下

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSUInteger, JieBarType) {
    JieBarType_One = 1000,
    JieBarType_Two,
    JieBarType_Three,
    JieBarType_Four,
};

@class JieTabBar;

@protocol JieTabBarDelegate<NSObject>

- (void)tabBar:(JieTabBar *)tabBar barIdx:(JieBarType)barIdx;

@end

@interface JieTabBar : UIView

@property(nonatomic, weak)id<JieTabBarDelegate> delegate;

@end

.m实现文件

#import "JieTabBar.h"

@interface JieTabBar()

//背景图
@property(nonatomic, strong)UIImageView *tabbarBgImageView;
// tabbarItem图片数据源
@property(nonatomic, strong)NSArray *dataArray;
// 当前被选中的tabBarItem
@property(nonatomic, strong)UIButton *lastBtn;

@end

@implementation JieTabBar

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self addSubview:self.tabbarBgImageView];

        for (int i = 0; i < 4; i++) {
            UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
            [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@", self.dataArray[i]]] forState:UIControlStateNormal];
            [btn setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@p", self.dataArray[i]]] forState:UIControlStateSelected];
            [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
            btn.adjustsImageWhenHighlighted = NO;
            btn.tag = JieBarType_One + i;
            if (i == 0) {
                btn.selected = YES;
                self.lastBtn = btn;
            } else {
                btn.selected = NO;
            }

            [self addSubview:btn];
        }
    }
    return self;
}

- (NSArray *)dataArray {
    if (!_dataArray) {
        _dataArray = @[@"1", @"2", @"3", @"4"];
    }
    return _dataArray;
}

- (UIImageView *)tabbarBgImageView {
    if (!_tabbarBgImageView) {
        _tabbarBgImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@""]];

    }
    return _tabbarBgImageView;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    self.tabbarBgImageView.frame = self.bounds;
    CGFloat width = self.bounds.size.width / self.dataArray.count;

    for (int i = 0; i < self.subviews.count; i++) {
        UIView *view = self.subviews[i];
        if ([view isKindOfClass:[UIButton class]]) {
            view.frame = CGRectMake((view.tag - JieBarType_One) * width, 0, width, self.frame.size.height);
        }
    }
}

- (void)clickBtn:(UIButton *)btn {
    if ([self.delegate respondsToSelector:@selector(tabBar:barIdx:)]) {
        [self.delegate tabBar:self barIdx:btn.tag];
    }
    self.lastBtn.selected = NO;
    btn.selected = YES;
    self.lastBtn = btn;

    [UIView animateWithDuration:0.3 animations:^{
        btn.transform = CGAffineTransformMakeScale(1.2, 1.2);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 animations:^{
            btn.transform = CGAffineTransformIdentity;
        }];
    }];
}

@end

当然,可以将UIButton替换自定义的View,比如:
自定义JieTabBarButton的.h文件



@class JieTabBarButton;

@protocol JieTabBarButtonDelegate<NSObject>

- (void)jieTabBarButton:(JieTabBarButton *)jieTabBarButton;

@end

@interface JieTabBarButton : UIView

@property(nonatomic, assign)BOOL selected;

@property(nonatomic, assign)BOOL playListVC;   // 判断是否是播放列表首页,如果是播放列表首页,则在选中的时候,TabBarButton的颜色为白色,其他的为红色

@property(nonatomic, copy)NSString *buttonTitle;

@property(nonatomic, strong)UILabel *titleLabel;

@property(nonatomic, strong)UIView *bottomLineView;

@property(nonatomic, weak)id<JieTabBarButtonDelegate> delegate;

@end

.m实现文件


#import "JieTabBarButton.h"

@interface JieTabBarButton()

@property(nonatomic, strong)UIView *converView;

@end

@implementation JieTabBarButton

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = UIColor.clearColor;
        self.userInteractionEnabled = YES;
        [self addSubview:self.titleLabel];
        [self addSubview:self.bottomLineView];
        [self addSubview:self.converView];

        WS(ws);
        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.offset(0);
            make.top.offset(12);
            make.height.mas_equalTo(23);
        }];

        [self.bottomLineView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(ws.titleLabel.mas_bottom).offset(5);
            make.height.mas_equalTo(2);
            make.width.mas_equalTo(30);
            make.centerX.equalTo(ws.titleLabel);
        }];

        [self.converView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.left.bottom.right.offset(0);
        }];
    }
    return self;
}

- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] init];
        _titleLabel.font = [UIFont systemFontOfSize:17];
        _titleLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _titleLabel;
}

- (UIView *)bottomLineView {
    if (!_bottomLineView) {
        _bottomLineView = [[UIView alloc] init];
    }
    return _bottomLineView;
}

- (UIView *)converView {
    if (!_converView) {
        _converView = [[UIView alloc] init];
        _converView.backgroundColor = [UIColor clearColor];
        _converView.userInteractionEnabled = YES;
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickAction)];
        [_converView addGestureRecognizer:tap];
    }
    return _converView;
}

- (void)clickAction {
    if ([self.delegate respondsToSelector:@selector(jieTabBarButton:)]) {
        [self.delegate jieTabBarButton:self];
    }
}

- (void)layoutSubviews {
    [super layoutSubviews];
    // 如果是首页播放列表,则在选中情况下,底部线条为白色,否则为红色
    self.titleLabel.text = self.buttonTitle;
    if (self.playListVC) {
        if (self.selected) {
            self.bottomLineView.backgroundColor = UIColor.whiteColor;
            self.titleLabel.textColor = UIColor.whiteColor;
        } else {
            self.bottomLineView.backgroundColor = UIColor.clearColor;
            self.titleLabel.textColor = RGBCOLOR(142, 142, 142);
        }
    } else {
        if (self.selected) {
            self.bottomLineView.backgroundColor = RGBCOLOR(251, 37, 49);
            self.titleLabel.textColor = RGBCOLOR(251, 37, 49);
        } else {
            self.bottomLineView.backgroundColor = UIColor.clearColor;
            self.titleLabel.textColor = RGBCOLOR(142, 142, 142);
        }
    }
}

@end

猜你喜欢

转载自blog.csdn.net/renjie_Yan/article/details/81865797