UITabBar UITabBarItem 自定义

最新推荐文章于 2024-07-18 13:49:49 发布
最新推荐文章于 2024-07-18 13:49:49 发布
阅读量4.3k 收藏 1
点赞数 3
分类专栏： IOS 文章标签： UITabbar UITabbarItem 自定义UITabbar 自定义UITabbarItem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chmod_R_755/article/details/80169173
版权

UITabBar 自定义详细解读

不得不说UITabBar神一般的存在

使用过UITabbar的人都知道， 很多App开发都挺喜欢用UITabbar，系统的UITabbar的确很方便，省事，强大的iOS 的api给开发带来很多便利，我们看看企鹅开发的微信就知道了 。。。。 微信的iOS 版就使用了UITabbar，而且可以猜测，八成是用的系统自带的 为啥敢这样下结论，微信不会浪费性能在花哨的UI上的，支付宝的大框架也是UITabbar，还有美团等等 。。。。。
不管是支付宝，微信还是美团 ， 他们的UITabbar都有个特点 。。。
这里写图片描述

第一： 每个UITabBarItem 都包含图片和文字 ，而且包含两种状态，选中和未选中
第二：无论选中或者未选中，图片和文字的布局都不变
这种UITabbar是程序猿最喜欢的，因为代码最少，性能最高
But , 还有一种 UITabBarItem 只有图片 ， 有代表性的是 Facebook
这里写图片描述

以上两种都比较好办，只有图片的话其实通过移动 系统 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=@[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不存在效率问题—因为没人用

源码 下载地址： https://download.csdn.net/download/chmod_r_755/10388492

hebia0
关注
专栏目录
自定义TabBarItem
萌萌哒博客
12-11 669
自定义tabBar有好多种方法，本文介绍的是：删除TabBarItem，添加自定义Item1、 首先遍历删除系统TabBarItem: NSArray *systemTabbarItemsArray = self.tabBar.subviews; //遍历tabbar中的子视图 for (UIView *view in systemTabbarItemsArray) {
UITabBarController的使用自定义UITabBar样式
番薯大佬的专栏
03-07 5252
UITabBarController的使用过程中，可能会出现需要自定义UITabBar样式的时候，下面介绍两种实现方法。 方法1 存在N个视图控制器，且需要使用自定义的UITabBar样式来进行交互操作哪个视图控制器的显示。具体做法是在UITabBarController中的view中添加自定义样式的子视图，设置子视图响应方法跳转对应的视图控制器，然后再通过UITabBarController的代...
UITabBarItem 自定义
chmod_R_755的专栏
04-22 736
HomeViewController *h1=[[HomeViewController alloc] init];          UITabBarItem *t1=[self createTabBarItem:@"首  页" normalImage:@"bar5.png" selectedImage:@"bar9.png" itemTag:1];
艺术成分很高的完全自定义的UITabBar（很简单）
最新发布
weixin_39339407的博客
07-18 1598
要解决系统UITabBar的各种痛点，我们需要进行自定义。这通常包括更改外观、添加动画效果、动态管理标签、扩展功能以及优化响应式设计。在自定义UITabBar时，常见的做法是继承UITabBar类，利用其现有的方法和属性来进行扩展和修改。然而，为了最大限度地提升灵活性和可扩展性，我们可以直接继承UIView来创建自己的TabBar。这样可以完全掌控TabBar的布局和行为，从而更灵活地实现定制需求。接下来我们将展示如何通过继承UIView来创建一个自定义的TabBar。完全自定义外观。
IOS7 tabBarItem 自定义图片的设置
热门推荐
寒流的专栏
09-18 2万+
IOS7之前：
iOS开发- UITabBarItem自定义图片
我是菜鸟－我在记录我的学习
06-15 2855
1:如图一下效果 代码如下： QRcodeViewController *threeViewController     = [[QRcodeViewController alloc] init];     UINavigationController *threeNavigationController     = [[UINavigationContro
（六十三）自定义TabBar和TabBarButtonItem
weixin_30468137的博客
03-08 253
自定义TabBar 先自定义一个UITabBarController，为了方便跳转与设定属性，借助系统的TabBarController的功能，但是要移除内部的控件然后自己添加一个View和多个按钮。 首先要移除已有的TabBarItem，通过判断是否是TabBarItem，但是TabBarItem是私有类，不让直接判断。 因此通过判断父类类型来检查。 要得...
iOS开发-实现自定义Tabbar及tabbar按钮动画效果
一名开发者
07-31 2061
INSysTabbar继承UIView，实现tabbarButton效果//代理 @property(nonatomic , strong) UIImage * bgroundImage;//背景图 @property(nonatomic , strong) INSysTabbarShapeView * tabbarBGShapeView;//背景图 @property(nonatomic , strong) UIColor * lineColor;
ios-自定义UITabbar.zip
07-11
2. **自定义`UITabBarItem`**：通过重写`- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item`方法，可以在用户切换选项卡时执行自定义动画或操作。 3. **使用自定义视图**：可以创建一个继承自...
详解iOS自定义UITabBar与布局
01-05
但是，很多时候，我们需要修改TabBarItem的图片和文字属性之外，还需要自定义TabBarItem的位置，这样系统自带的TabBar的样式并不能满足我们的项目需求，所以我们需要对系统的UITabBar进行自定义，以达到我们的项目...
ios-一款可高度自定义的TabBarController，几乎可以自定义所有想自定义的元素，如底部TabBar、Segment、仿网易、搜狐新闻客户端等。.zip
07-11
功能强大的自定义TabBarController，可以自定义： 1. 替代系统的UITabBarController，以下属性均可自定义： a) TabBar：位置、大小、边框、圆角、分割线、内容支持滚动等； b) TabItem：图像、选中背景、title字体、title颜色等，均包含选中和未选中两种状态； c) Badge：支持数字badge和小圆点badge，可自定义：位置、大小、背景颜色、背景图像、badge title字体、badge title颜色等； 2. 替代系统的UISegmentControl，且功能更加强大； 3. 仿网易、搜狐等新闻客户端的可滑动的内容视图和TabBar，支持滑动内容视图时，对应TabItem的字体、颜色、选中背景跟随内容视图的滚动进行平滑渐变切换。
iOS 自定义TabBar
09-14
iOS自定义的TabBar，加了点击tabbar按钮的动画效果，布局使用的Masonry，Masonry用的CocoaPods管理。所以这个简单的demo包含的知识还是不少～
iOS UITabBarController(自定义, tarBar中间有自定义按钮)
12-11
包括tabBarController的基本设置, 自定义tabBar(tabBar中间包含按钮)
ios-iOS自定义tabBar(包含OC和Swift版).zip
07-11
iOS自定义tabBar(包含OC和Swift版) 特点 1.方便自定义TabBar每个TabBarItem选中文本和未选中文本样式以及图片 2.通过Block控制TabBarItem能不能选中(可用于如登录控制等) 3.切换TabBarItem更简单 OC版仓库地址：https://github.com/James-oc/JMTabBarKit Swift版仓库地址：https://github.com/James-swift/JMSTabBarKit
ios-自定义tabbar主框架.zip
07-11
本程序的主要功能是自定义tabbar的主框架，里边实现了自定义tabbar，自定义button，自定义badgebutton，各个tabbaritem的切换，有需要的朋友，可直接下载，拿去使用
UITabBar 自定义
小水先森的博客
12-31 1090
系统自带的UITabBar可以通过简单地设置满足开发的需求，二很多人还不知道 比如说 系统默认文字是蓝色的，但是我们想让他默认的时橘色的就可以通过简单的设置一下啊富文本属性就能解决问题 这几仅具有一个简单地例子  可以在这里设置虽有的iteam的属性 默认是蓝色的 // 第一次使用这个类或者他的子类的时候调用 // 第一次使用这个类或者他的子类的时候调用 + (void)initia
ios tabbar插件_iOS 自定义 UITabBar 的样式
weixin_39553272的博客
12-19 320
两种方式：1.在原 UItabBar 样式的基础上扩展2.完全自定义 UITabBar 的样式效果预览：自定义 tabBar 的样式有4个 tabBarItem，中间按钮凸起一丢丢，原生半透明的背景。简介目前市场上的大部分 App UI 结构都是使用这种标签式的结构，我觉得它至少有以下优点：很清晰的展示了 App 的主要入口和当前所在入口各个入口间的切换也很简单，适合频繁切换缺点：入口个数不能太多...
自定义iOS UITabBar：布局与实现策略
- 配置所有UITabBarItem的文字属性：在《iOS项目——基本框架搭建》一文中已经详细说明了如何定制文字属性。 - 适配不同尺寸的TabBarItem：自定义布局方案能更好地处理各个TabBarItem的尺寸差异。 - 控制器的管理：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值