UITabBar 自定义

最新推荐文章于 2019-03-07 18:42:00 发布
最新推荐文章于 2019-03-07 18:42:00 发布
阅读量1k 收藏
点赞数
分类专栏： ios 学习笔记 文章标签： 自定义 改系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsjxiaobing/article/details/42292937
版权

系统自带的UITabBar可以通过简单地设置满足开发的需求，二很多人还不知道

比如说 系统默认文字是蓝色的，但是我们想让他默认的时橘色的就可以通过简单的设置一下啊富文本属性就能解决问题

这几仅具有一个简单地例子 


可以在这里设置虽有的iteam的属性 默认是蓝色的
// 第一次使用这个类或者他的子类的时候调用
// 第一次使用这个类或者他的子类的时候调用
+ (void)initialize
{
    // 它只是所有item的标志
    UITabBarItem *item = [UITabBarItem appearance];
   
    NSMutableDictionary *textAtt = [NSMutableDictionary dictionary];
    /**
     * 把你想更改的状态的颜色设置给富文本属性就行了
     * 这里只是简单地举了个例子 把蓝色的字体改成了红色
     */
    textAtt[NSForegroundColorAttributeName] = [UIColor orangeColor];
    [item setTitleTextAttributes:textAtt forState:UIControlStateSelected];

}
当然上边的例子仅仅改变了选中的时候的状态

你可以通过简单地设施改变他的默认状态下地文字颜色去满足你的设计需求

这里就不再写多余的代码了


然后就是图片了 

系统默认会对图片进行渲染

我们只要说明我们已经对图片进行了渲染就没有问题了

我就直接上代码了

#pragma mark -设置一个子控制器
- (void)setUpOneChildViewController:(UIViewController *)vc title:(NSString *)title image:(UIImage *)image selImage:(UIImage *)selImage
{
    vc.tabBarItem.title = title;
    vc.tabBarItem.image = image;
  
    /**
     *  iteam的上角标用来提醒用户的
     */
    vc.tabBarItem.badgeValue = @"10";
    /**
     *  告诉系统我的图片已经进行过处理了系统不需要做多余的处理了
     */
    selImage = [selImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    /**
     *  设置选中的背景颜色
     */
    vc.tabBarItem.selectedImage = selImage;
    [self addChildViewController:vc];
   
    [_cusTomTabBar addTabBarButton:vc.tabBarItem];
   
}

然后你就发现tabbar基本上就能满足你的需求了

当然如果要求太高的话还是需要完全自定义

建议大家直接用view自定义一个

下边我就直接把我自定义好的给大家看一下可能会有很多问题，但是基本上能满足需求

先来一个效果图吧


哈哈哈


当然通过我上边的设置也能达到那个效果

//
//  XXBTabBar.h
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import <UIKit/UIKit.h>

@class XXBTabBar;

@protocol XXBTabBarDeledgate <NSObject>

@optional

- (void)tabBar:(XXBTabBar *)tabBar from:(int)from to:(int)to;
- (void)tabBarAddButtonClick:(XXBTabBar *)tabBar;
@end

@interface XXBTabBar : UIView

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

- (void)addTabBarButton:(UITabBarItem *)item;

@end


//
//  XXBTabBar.m
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import "XXBTabBar.h"
#import "XXBTabBarButton.h"

@interface XXBTabBar ()

@property (nonatomic, weak) UIButton *addButton;
@property (strong, nonatomic) NSMutableArray *tabBarButtonArray;
@property (weak, nonatomic) XXBTabBarButton *selectBtn;

@end

@implementation XXBTabBar

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // 设置所有tabBarButton的frame
    [self setUpAllTabBarButtonFrame];
    
    // 设置加号按钮的frame
    [self setUpAddButtonFrame];
}
- (void)setUpAllTabBarButtonFrame
{
    int count = (int)self.tabBarButtonArray.count + 1;
    CGFloat w = self.bounds.size.width / count;
    CGFloat h = self.bounds.size.height;
    CGFloat x = 0;
    CGFloat y = 0;
    int i = 0;
    for (UIView *tabBarButton in self.tabBarButtonArray) {
        
        if (i == 2) {
            i = 3;
        }
        x = i * w;
        tabBarButton.frame = CGRectMake(x, y, w, h);
        i++;
        
    }
}
/**
 *  设置所有的按钮的frame
 */
- (void)setUpAddButtonFrame
{
    CGFloat x = self.bounds.size.width * 0.5;
    CGFloat y = self.bounds.size.height * 0.5;
    self.addButton.center = CGPointMake(x, y);
}

/**
 *  添加一个按钮
 */
- (void)addTabBarButton:(UITabBarItem *)item
{
    XXBTabBarButton *tabBarButton = [[XXBTabBarButton alloc] init];
    tabBarButton.item = item;
    tabBarButton.tag = self.tabBarButtonArray.count;
    [tabBarButton setTitle:item.title forState:UIControlStateNormal];
    [tabBarButton setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];
    [tabBarButton setImage:item.image forState:UIControlStateNormal];
    [tabBarButton setImage:item.selectedImage forState:UIControlStateSelected];
    [self addSubview:tabBarButton];
    [self.tabBarButtonArray addObject:tabBarButton];
    [tabBarButton addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    if (self.tabBarButtonArray.count == 1) {
        tabBarButton.selected = YES;
        self.selectBtn = tabBarButton;
    }
   
}
/**
 *  按钮点击事件
 */
- (void)btnClick:(XXBTabBarButton *)clickedBtn
{
    if ([self.delegate respondsToSelector:@selector(tabBar:from:to:)]) {
        [self.delegate tabBar:self from:(int)self.selectBtn.tag to:(int)clickedBtn.tag];
    }
    self.selectBtn.selected = NO;
    clickedBtn.selected = YES;
    self.selectBtn = clickedBtn;
}
#pragma mark - 懒加载

- (NSMutableArray *)tabBarButtonArray
{
    if(_tabBarButtonArray == nil)
    {
        _tabBarButtonArray = [NSMutableArray array];
    }
    return _tabBarButtonArray;
}
- (UIButton *)addButton
{
    if (_addButton == nil) {
        UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
        [addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
        [addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
        [addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
        /**
         *  自动计算按钮的大小 默认的情况下跟背景图片的大侠一样
         */
        [addButton sizeToFit];
        [addButton addTarget:self action:@selector(addButtonClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:addButton];
        self.addButton = addButton;
    }
    return _addButton;
}
/**
 *  处理加号点击
 */
- (void)addButtonClick
{
    if ([self.delegate respondsToSelector:@selector(tabBarAddButtonClick:)]) {
        [self.delegate tabBarAddButtonClick:self];
    }
}
@end


//
//  XXBTabBarButton.h
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XXBTabBarButton : UIButton

@property (nonatomic, strong) UITabBarItem *item;

@end


//
//  XXBTabBarButton.m
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-20.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import "XXBTabBarButton.h"
#import "XXBBadgeValue.h"
#define ImageRadio 0.7

#define margin 5

@interface XXBTabBarButton ()
@property (weak, nonatomic) XXBBadgeValue *badgeButton;

@end

@implementation XXBTabBarButton

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        
        [self setupTabBarButton];
    }
    return self;
}

- (void)dealloc
{
#warning 一定要取消监听
    /**
     *  取消监听
     */
    [self.item removeObserver:self forKeyPath:@"badgeValue"];
    [self.item removeObserver:self forKeyPath:@"title"];
    [self.item removeObserver:self forKeyPath:@"image"];
    [self.item removeObserver:self forKeyPath:@"selectedImage"];
}

/**
 *  初始化按钮
 */
- (void)setupTabBarButton
{
    
    self.imageView.contentMode = UIViewContentModeCenter;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:12];
}
- (void)setItem:(UITabBarItem *)item
{
    _item = item;
    /**
     * 添加观察者
     */
    [item addObserver:self forKeyPath:@"badgeValue" options:0 context:nil];
    [item addObserver:self forKeyPath:@"title" options:0 context:nil];
    [item addObserver:self forKeyPath:@"image" options:0 context:nil];
    [item addObserver:self forKeyPath:@"selectedImage" options:0 context:nil];
    
    
    [self observeValueForKeyPath:nil ofObject:nil change:nil context:nil];
    
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
    
    /**
     *  处理通知
     */
    [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self setImage:_item.image forState:UIControlStateNormal];
    [self setImage:_item.selectedImage forState:UIControlStateSelected];
    [self setTitle:_item.title forState:UIControlStateNormal];
    // 设置提醒数字
    self.badgeButton.badgeValue = self.item.badgeValue;
}

/**
 *  设置button的布局
 */
- (void)layoutSubviews
{
    [super layoutSubviews];
    /**
     *  图片的位置
     */
    CGFloat imageX = 0;
    CGFloat imageY = 0;
    CGFloat imageH = self.bounds.size.height * ImageRadio;
    CGFloat imageW = self.bounds.size.width;
    self.imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
    /**
     *  文字的位置
     */
    CGFloat titleY = imageH;
    CGFloat titleX = 0;
    CGFloat titleW = imageW;
    CGFloat titleH = self.bounds.size.height - imageH;
    self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);
    /**
     *  提示数字的位置
     */
    self.badgeButton.frame = CGRectMake(self.frame.size.width - self.badgeButton.frame.size.width - margin, 0, self.badgeButton.frame.size.width, self.badgeButton.frame.size.height);
    
}

- (XXBBadgeValue *)badgeButton
{
    if (_badgeButton == nil) {
        XXBBadgeValue *badgeButton = [[XXBBadgeValue alloc] init];
        [self addSubview:badgeButton];
        _badgeButton = badgeButton;
    }
    return  _badgeButton;
}
- (void)setHighlighted:(BOOL)highlighted{}

@end


//
//  XXBBadgeValue.h
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-21.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XXBBadgeValue : UIButton


@property (copy, nonatomic) NSString *badgeValue;

@end

//
//  XXBBadgeValue.m
//  2014_11_20_微博
//
//  Created by Mac10.9 on 14-11-21.
//  Copyright (c) 2014年 xiaoxiaobing. All rights reserved.
//

#import "XXBBadgeValue.h"

/**
 *  注意，左右会有一个像素的偏差，右边的需要比左边的少2
 */
#define marginLeft 7
#define marginRight 5

@implementation XXBBadgeValue

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}
- (void)setup
{
    self.hidden = YES;
    self.userInteractionEnabled = NO;
    self.titleLabel.font = [UIFont systemFontOfSize:12];
    /**
     *  微调文字的位置
     */
    self.titleEdgeInsets = UIEdgeInsetsMake(0, marginLeft, 0, marginRight) ;
}
- (void)setBadgeValue:(NSString *)badgeValue
{
    _badgeValue = [badgeValue copy];
    if (badgeValue && badgeValue.intValue >0)
    {
        /**
         *  有值并且值不等于1 的情况向才进行相关设置
         */
        self.hidden = NO;
        
        if (badgeValue.length>2)
        {
            /**
             *  值大约99的画就显示一个小圆点
             */
            [self setImage:[UIImage imageNamed:@"new_dot"] forState:UIControlStateNormal];
            
            [self setBackgroundImage:nil forState:UIControlStateNormal];
            self.frame = CGRectMake(0, 0, 30, 20);
        }
        else
        {
            /**
             *  其他情况就设置为相应的数值
             */
            
            UIImage *bgImage = [UIImage imageNamed:@"main_badge"];
            
            /**
             *  设置提示按钮的背景图片
             */
            
            [self setBackgroundImage:[bgImage stretchableImageWithLeftCapWidth:bgImage.size.width * 0.5 topCapHeight:bgImage.size.height * 0.5] forState:UIControlStateNormal];
            [self setImage:nil forState:UIControlStateNormal];
            [self setTitle:badgeValue forState:UIControlStateNormal];
            // 根据文字的多少动态计算frame
            CGRect frame = self.frame;
            CGFloat badgeH = self.currentBackgroundImage.size.height;
            CGFloat badgeW ;
            NSMutableDictionary *dict = [NSMutableDictionary dictionary];
            dict[NSFontAttributeName] = self.titleLabel.font;
           
            CGSize badgeSize =  [self.badgeValue boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
            badgeW = badgeSize.width + marginLeft +marginRight;
            frame.size.width = badgeW;
            frame.size.height = badgeH;
            self.frame = frame;
        }
    }
    else
    {
        /**
         *  其他情况直接隐藏
         */
        self.hidden = YES;
    }
}


@end


希望大家给出宝贵的意见

杨小兵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS UITabBarController(自定义, tarBar中间有自定义按钮)
12-11
包括tabBarController的基本设置, 自定义tabBar(tabBar中间包含按钮)
自定义UITabbar
海蛎煎
12-07 680
Affairs HD:  将window的rootViewController设置为原始UITabbarController，然后将原始UITabbarController的UITabbar隐藏，在原始UITabbarController上addsubview一个自定义的继承自view的UITabbar，将UITabbar里面的按钮事件委托到AppDelegate中来选择页面替换。最后剩下的就是
自定义UITabBar
chiren6654的博客
12-09 190
iOS开发项目篇—27自定义UITabBar 一、自定义 思路： （1）新建一个继承自UITabBar的类，自定义一个UITabBar （2）用自定义的UITabBar换掉系统的UItabBar(使用了KVC) （3）监听控制器的切换，只要控制器一切换，就调用代理方法强制重新布局子控...
UITabBarItem 自定义
chmod_R_755的专栏
04-22 711
HomeViewController *h1=[[HomeViewController alloc] init];          UITabBarItem *t1=[self createTabBarItem:@"首  页" normalImage:@"bar5.png" selectedImage:@"bar9.png" itemTag:1];
UITabBar UITabBarItem 自定义
chmod_R_755的专栏
05-03 4280
UITabBar 自定义详细解读 不得不说UITabBar神一般的存在 使用过UITabbar的人都知道， 很多App开发都挺喜欢用UITabbar，系统的UITabbar的确很方便，省事，强大的iOS 的api给开发带来很多便利，我们看看企鹅开发的微信就知道了 。。。。 微信的iOS 版就使用了UITabbar，而且可以猜测，八成是用的系统自带的 为啥敢这样下结论，微信不会浪费性能在花哨...
UITabBar自定义
04-12
UITabBar自定义，顶部曲线，中间按钮突出（OC）
UITabBar的自定义
11-03
通过自定义，实现与官方的UITabBar的不同效果
iOS自定义UITabBar中间按钮
08-19
主要为大家详细介绍了iOS自定义UITabBar中间按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义带圆弧的UITabBar
12-26
1.自定义中间带弧度的UITabBar(参照代码思路可改成其它形状)。 2.TabBar保留系统原有push和pop过渡效果。 3.由于自定义了UITabBar所以就连同TabBarController也一同定义了（用法和系统的很类似）。
自定义UITabbarController及向UITabBar中添加自定义按钮
wu948327362的博客
05-15 6735
在某些项目的初期我们经常会选择使用UITabbarController或者是UINavigationController或者是两者的结合，经常需要自定义自己需要的类，本文讲述了自定义UITabbarController及向UITabBar中添加自定义按钮的使用。 首先自定义一个继承自UITabbarController的类，定义4个属性，均为UIViewController类型的，作为tabba
完美封装 tabBar 自定义加号按钮
WZios的博客
06-15 3294
1.自定义TabBarController 1.自定义继承于UITabBarController 2.利用KVC 替换系统的tabBar 3. 利用appearance 全局统一设置UITabBarItem [self setValue:[[LCTabBar alloc] init] forKeyPath:@"tabBar"]; NSMutableDictionary *normalAtt
UITabBarController的使用自定义UITabBar样式
番薯大佬的专栏
03-07 5210
UITabBarController的使用过程中，可能会出现需要自定义UITabBar样式的时候，下面介绍两种实现方法。 方法1 存在N个视图控制器，且需要使用自定义的UITabBar样式来进行交互操作哪个视图控制器的显示。具体做法是在UITabBarController中的view中添加自定义样式的子视图，设置子视图响应方法跳转对应的视图控制器，然后再通过UITabBarController的代...
iOS开发进阶-用最简单的方式自定义TabBar
JoySeeDog
10-28 8440
本文将从一个具体的实例出发，介绍如何比较简单的自定义类似咸鱼的TabBar。
UITabBarItem title 和self.title设置不同的标题
chmod_R_755的专栏
03-07 6918
问题解决了，首先吐槽下百度，翻了好几页都没找到，Google一下就搞定了，Google不在天朝发展对中国程序员来说损失不少时间。。。 原文 http://stackoverflow.com/questions/21615637/how-to-change-uiviewcontroller-title-independent-of-tabbar-item-title 经典部
Objective-C自定义UITabBar位置
EverStar's Blog
01-21 2537
UITabBar是开发中常用到的控件，一般应用在底部，少数有在顶部的，但UITabBar得frame的属性是readonly的不能直接修改，但是可以通过layoutSubviews来实现自定义位置新建一个类继承自UITabBar.h文件代码：@interface MytabBar : UITabBar - (instancetype)initWithFrame:(CGRect)frame; + (i
iOS自定义tabbar
最新发布
05-25
创建一个继承于 UITabBar 的类，重写初始化方法和 layoutSubviews 方法，实现自定义 TabBar 的样式和布局。 2. 实现自定义 TabBarItem 创建一个继承于 UIButton 的类，用于实现自定义的 TabBarItem 样式，例如添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值