UITabBar 自定義詳細解讀

不得不說UITabBar神一般的存在

使用過UITabbar的人都知道， 很多App開發都挺喜歡用UITabbar，系統的UITabbar的確很方便，省事，強大的iOS 的api給開發帶來很多便利，我們看看企鵝開發的微信就知道了 。。。。 微信的iOS 版就使用了UITabbar，而且可以猜測，八成是用的系統自帶的 為啥敢這樣下結論，微信不會浪費效能在花哨的UI上的，支付寶的大框架也是UITabbar，還有美團等等 。。。。。
不管是支付寶，微信還是美團 ， 他們的UITabbar都有個特點 。。。

第一： 每個UITabBarItem 都包含圖片和文字 ，而且包含兩種狀態，選中和未選中
第二：無論選中或者未選中，圖片和文字的佈局都不變
這種UITabbar是程式猿最喜歡的，因為程式碼最少，效能最高

以上兩種都比較好辦，只有圖片的話其實通過移動 系統 UITabBarItem 中圖片的位置也可以處理好的 ， 但是有些比較 噁心的 UITabBarItem ，觀賞下 。。。

自定義UITabBarItem

1.通常情況下設計師不懂技術更不懂所謂的效能，模仿的居多，看到別人這樣TA也這樣；企鵝微信的UI是我見過最簡潔且比較容易實現的UI ， UITabBarItem為啥微信不自定義了 ？ 朋友圈的圖片為啥限制在9張之內了 ？ 為啥都採用iOS 系統的UITableView了 ？ 只能說企鵝的設計師還是有兩把刷子的，至少是很懂iOS系統的 。。。。
2.大部分小公司的設計呵呵， 能力沒有，懟起來牛逼，你見過高度是 55 的 UITabBar 我就見過，而且語不驚人死不休，來一句“等比放大” 。。。。 無需多吐槽，懂得自然懂。。。

1.首先定義UITabBarItem#####

簡單的說，把單個的Item當做一個View來看待就可以 ，圖片，文字，大圖等 。。。。。
就以我上面截圖來說

#import <UIKit/UIKit.h>

@interface HbTabBarItem : UIView{
    UILabel *textLabel;
    UIImage *select,*unselect;
    UIImageView *iconImage;
    UIImageView *bigImage;

}
-(instancetype)initWithTitle:(NSString
 
*)title unselectImage:(NSString * )unsimage selectedImage:(NSString *)selectImg size:(CGSize)imgSize;
-(void)setItemSelected:(BOOL)itemSelected tag:(NSInteger)tag;
@end

#import "HbTabBarItem.h"
#import "Masonry.h"


#define RGBA(R,G,B,A) [UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:A]
#define RGB(R,G,B) [UIColor colorWithRed:R/255.0 green:G/255.0 blue:B/255.0 alpha:1.0]


#define HEXRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
#define HEXRGBA(rgbValue,a) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:a]


#define COLOR_666666 HEXRGB(0x666666)
#define COLOR_abaaaa HEXRGB(0xabaaaa)

#define FONT_MEDIUM @"PingFangSC-Medium"
#define FONT_REGULAR @"PingFangSC-Regular"
#define FONT_SEMIBOLD @"PingFangSC-Semibold"
#define FONT_SC @"PingFangSC"


@implementation HbTabBarItem

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/
-(instancetype)init{
    if(self=[super init]){

    }
    return self;
}

-(void)awakeFromNib{
    [super awakeFromNib];

}

-(void)setup{
    textLabel = [[UILabel alloc] init];
    textLabel.font = [UIFont fontWithName:FONT_REGULAR size:11];
    textLabel.text = @"  ";
    [self addSubview:textLabel];
    [textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self).offset(-4);
        make.centerX.equalTo(self);
    }];
    iconImage = [[UIImageView alloc] init];
    iconImage.image = [UIImage imageNamed:@"bar1_selected"];
    [self addSubview:iconImage];
    [iconImage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(16, 16));
        make.bottom.equalTo(self).offset(-26);
        make.centerX.equalTo(self);
    }];

    bigImage = [[UIImageView alloc] init];
    bigImage.image = [UIImage imageNamed:@"bar1_selectImage"];
    [self addSubview:bigImage];
    [bigImage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(42, 42));
        make.center.equalTo(self);
    }];
    bigImage.hidden = YES;
}

-(instancetype)initWithTitle:(NSString*)title unselectImage:(NSString * )unsimage selectedImage:(NSString *)selectImg size:(CGSize)imgSize{
    self=[super init];
    [self setup];


    select = [UIImage imageNamed:selectImg];
    unselect = [UIImage imageNamed: unsimage];
    textLabel.text = title;
    [iconImage setImage:select];
    [iconImage mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(imgSize);
        make.bottom.equalTo(self).offset(-24);
        make.centerX.equalTo(self);
    }];
    return self;
}

-(void)setItemSelected:(BOOL)itemSelected tag:(NSInteger)tag{


    if (itemSelected && tag == 0) {
        bigImage.hidden = NO;
        textLabel.hidden = YES;
        iconImage.hidden = YES;
    }else{
        bigImage.hidden = !NO;
        textLabel.hidden = !YES;
        iconImage.hidden = !YES;
    }

    if (itemSelected) {
        iconImage.image = select;
        textLabel.textColor = COLOR_666666;
    }else{
        iconImage.image = unselect;
        textLabel.textColor = COLOR_abaaaa;
    }

}
@end

以上是定義單個的 Item ，然後就想把Item放在一起
也就是自定定義tabbar

#import <UIKit/UIKit.h>

@class HbTabBarItem;

@interface HbTabbar : UITabBar
@property(strong, nonatomic) NSArray <HbTabBarItem*> *tabItems;
-(void)setCurrentIndex:(NSInteger)tag;
@end

#import "HbTabbar.h"
#import "HbTabBarItem.h"


@implementation HbTabbar

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

    }
    return self;
}
-(void)clearView{
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
}

-(void)setTabItems:(NSArray *)tabItems{
    _tabItems=tabItems;
    [self clearView];
    for (int i=0; i<tabItems.count; i++) {

        HbTabBarItem *barItem=tabItems[i];
        [self addSubview:barItem];
    }

    [self setCurrentIndex:0];
}


-(void)setCurrentIndex:(NSInteger)tag{

    for (int i=0; i<self.tabItems.count; i++) {
        HbTabBarItem *barItem=self.tabItems[i];
        [barItem setItemSelected:i==tag tag:tag];

    }
}

- (void)layoutSubviews{
    [super layoutSubviews];
    [self setupTabBarItems];
}
- (void)setupTabBarItems
{
    CGFloat w = self.frame.size.width;
    CGFloat h = self.frame.size.height;

    int count = (int)self.tabItems.count;
    CGFloat itemY = 0;
    CGFloat itemW = w / count;
    CGFloat itemH = h;

    for (int index = 0; index < count; index++) {
        HbTabBarItem *tabBarItem = self.tabItems[index];
        CGFloat itemX = index * itemW;
        tabBarItem.frame = CGRectMake(itemX, itemY, itemW, itemH);
    }
}

@end

不用多解釋 ，複製程式碼就行 ,
然後就是使用了 。。。。。。

#import "ViewController.h"

#import "HbTabbar.h"
#import "HbTabBarItem.h"

#import "V1ViewController.h"
#import "V2ViewController.h"
#import "V3ViewController.h"
#import "V4ViewController.h"
#define AppFrameWidth  [UIScreen mainScreen].bounds.size.width
#define AppFrameHight [UIScreen mainScreen].bounds.size.height




@interface ViewController ()<UITabBarControllerDelegate>{
    UITabBarController  *viewController;
    HbTabbar *hbTabbar;

}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    V1ViewController *h1 = [[V1ViewController alloc] init];
    HbTabBarItem *t1 = [[HbTabBarItem alloc] initWithTitle:@"首頁" unselectImage:@"bar1_unselected" selectedImage:@"bar1_unselected" size:CGSizeMake(18, 16)];


     V2ViewController *h2 = [[V2ViewController alloc] init];
     HbTabBarItem *t2 = [[HbTabBarItem alloc] initWithTitle:@"聯絡人" unselectImage:@"bar2_unselected" selectedImage:@"bar2_selected" size:CGSizeMake(16, 16)];



     V3ViewController *h3 = [[V3ViewController alloc] init];
    HbTabBarItem *t3 = [[HbTabBarItem alloc] initWithTitle:@"收藏" unselectImage:@"bar3_unselected" selectedImage:@"bar3_selected" size:CGSizeMake(18, 16)];



     V4ViewController *h4 = [[V4ViewController alloc] init];
     HbTabBarItem *t4 = [[HbTabBarItem alloc] initWithTitle:@"其他" unselectImage:@"bar4_unselected" selectedImage:@"bar4_selected" size:CGSizeMake(17, 19)];





    UINavigationController *h11 = [[UINavigationController alloc] initWithRootViewController:h1];
    UINavigationController *h22 = [[UINavigationController alloc] initWithRootViewController:h2];
    UINavigationController *h33 = [[UINavigationController alloc] initWithRootViewController:h3];
    UINavigationController *h44  = [[UINavigationController alloc] initWithRootViewController:h4];


    NSArray *viewControllers = [NSArray arrayWithObjects:h11,h22,h33,h44, nil];


    viewController = [[UITabBarController alloc] init];


    hbTabbar = [[HbTabbar alloc] initWithFrame:viewController.tabBar.frame];
    //    hbTabbar.ydelegate=self;
    [viewController setValue:hbTabbar forKeyPath:@"tabBar"];
    hbTabbar.tabItems[email protected][t1,t2,t3,t4];

    viewController.delegate = self;
    viewController.viewControllers = viewControllers;
    viewController.view.frame = CGRectMake(0, 0, AppFrameWidth, AppFrameHight);
    [viewController.tabBar setClipsToBounds:YES];
//    [viewController.tabBar insertSubview:backView atIndex:0];
    viewController.tabBar.opaque = YES;
    [self.view addSubview:viewController.view];

}

-(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{

    [hbTabbar setCurrentIndex:tabBarController.selectedIndex];

}

最後，小公司的APP不存在效率問題—因為沒人用