UITabBar 自定义

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

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

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

[objc]  view plain  copy

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

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

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

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

然后就是图片了 

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

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

我就直接上代码了

[objc]  view plain  copy

1. #pragma mark -设置一个子控制器  
2. - (void)setUpOneChildViewController:(UIViewController *)vc title:(NSString *)title image:(UIImage *)image selImage:(UIImage *)selImage  
3. {  
4.     vc.tabBarItem.title = title;  
5.     vc.tabBarItem.image = image;  
6.     
7.     /** 
8.      *  iteam的上角标用来提醒用户的 
9.      */  
10.     vc.tabBarItem.badgeValue = @"10";  
11.     /** 
12.      *  告诉系统我的图片已经进行过处理了系统不需要做多余的处理了 
13.      */  
14.     selImage = [selImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];  
15.     /** 
16.      *  设置选中的背景颜色 
17.      */  
18.     vc.tabBarItem.selectedImage = selImage;  
19.     [self addChildViewController:vc];  
20.      
21.     [_cusTomTabBar addTabBarButton:vc.tabBarItem];  
22.      
23. }  

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

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

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

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

先来一个效果图吧

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

1. #import <UIKit/UIKit.h>  
2.   
3. @class XXBTabBar;  
4.   
5. @protocol XXBTabBarDeledgate <NSObject>  
6.   
7. @optional  
8.   
9. - (void)tabBar:(XXBTabBar *)tabBar from:(int)from to:(int)to;  
10. - (void)tabBarAddButtonClick:(XXBTabBar *)tabBar;  
11. @end  
12.   
13. @interface XXBTabBar : UIView  
14.   
15. @property (weak, nonatomic) id<XXBTabBarDeledgate> delegate;  
16.   
17. - (void)addTabBarButton:(UITabBarItem *)item;  
18.   
19. @end  

1. #import "XXBTabBar.h"  
2. #import "XXBTabBarButton.h"  
3.   
4. @interface XXBTabBar ()  
5.   
6. @property (nonatomic, weak) UIButton *addButton;  
7. @property (strong, nonatomic) NSMutableArray *tabBarButtonArray;  
8. @property (weak, nonatomic) XXBTabBarButton *selectBtn;  
9.   
10. @end  
11.   
12. @implementation XXBTabBar  
13.   
14. - (void)layoutSubviews  
15. {  
16.     [super layoutSubviews];  
17.       
18.     // 设置所有tabBarButton的frame  
19.     [self setUpAllTabBarButtonFrame];  
20.       
21.     // 设置加号按钮的frame  
22.     [self setUpAddButtonFrame];  
23. }  
24. - (void)setUpAllTabBarButtonFrame  
25. {  
26.     int count = (int)self.tabBarButtonArray.count + 1;  
27.     CGFloat w = self.bounds.size.width / count;  
28.     CGFloat h = self.bounds.size.height;  
29.     CGFloat x = 0;  
30.     CGFloat y = 0;  
31.     int i = 0;  
32.     for (UIView *tabBarButton in self.tabBarButtonArray) {  
33.           
34.         if (i == 2) {  
35.             i = 3;  
36.         }  
37.         x = i * w;  
38.         tabBarButton.frame = CGRectMake(x, y, w, h);  
39.         i++;  
40.           
41.     }  
42. }  
43. /** 
44.  *  设置所有的按钮的frame 
45.  */  
46. - (void)setUpAddButtonFrame  
47. {  
48.     CGFloat x = self.bounds.size.width * 0.5;  
49.     CGFloat y = self.bounds.size.height * 0.5;  
50.     self.addButton.center = CGPointMake(x, y);  
51. }  
52.   
53. /** 
54.  *  添加一个按钮 
55.  */  
56. - (void)addTabBarButton:(UITabBarItem *)item  
57. {  
58.     XXBTabBarButton *tabBarButton = [[XXBTabBarButton alloc] init];  
59.     tabBarButton.item = item;  
60.     tabBarButton.tag = self.tabBarButtonArray.count;  
61.     [tabBarButton setTitle:item.title forState:UIControlStateNormal];  
62.     [tabBarButton setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];  
63.     [tabBarButton setImage:item.image forState:UIControlStateNormal];  
64.     [tabBarButton setImage:item.selectedImage forState:UIControlStateSelected];  
65.     [self addSubview:tabBarButton];  
66.     [self.tabBarButtonArray addObject:tabBarButton];  
67.     [tabBarButton addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];  
68.     if (self.tabBarButtonArray.count == 1) {  
69.         tabBarButton.selected = YES;  
70.         self.selectBtn = tabBarButton;  
71.     }  
72.      
73. }  
74. /** 
75.  *  按钮点击事件 
76.  */  
77. - (void)btnClick:(XXBTabBarButton *)clickedBtn  
78. {  
79.     if ([self.delegate respondsToSelector:@selector(tabBar:from:to:)]) {  
80.         [self.delegate tabBar:self from:(int)self.selectBtn.tag to:(int)clickedBtn.tag];  
81.     }  
82.     self.selectBtn.selected = NO;  
83.     clickedBtn.selected = YES;  
84.     self.selectBtn = clickedBtn;  
85. }  
86. #pragma mark - 懒加载  
87.   
88. - (NSMutableArray *)tabBarButtonArray  
89. {  
90.     if(_tabBarButtonArray == nil)  
91.     {  
92.         _tabBarButtonArray = [NSMutableArray array];  
93.     }  
94.     return _tabBarButtonArray;  
95. }  
96. - (UIButton *)addButton  
97. {  
98.     if (_addButton == nil) {  
99.         UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];  
100.         [addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];  
101.         [addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];  
102.         [addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];  
103.         [addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];  
104.         /** 
105.          *  自动计算按钮的大小 默认的情况下跟背景图片的大侠一样 
106.          */  
107.         [addButton sizeToFit];  
108.         [addButton addTarget:self action:@selector(addButtonClick) forControlEvents:UIControlEventTouchUpInside];  
109.         [self addSubview:addButton];  
110.         self.addButton = addButton;  
111.     }  
112.     return _addButton;  
113. }  
114. /** 
115.  *  处理加号点击 
116.  */  
117. - (void)addButtonClick  
118. {  
119.     if ([self.delegate respondsToSelector:@selector(tabBarAddButtonClick:)]) {  
120.         [self.delegate tabBarAddButtonClick:self];  
121.     }  
122. }  
123. @end  

[objc]  view plain  copy   

1. #import <UIKit/UIKit.h>  
2.   
3. @interface XXBTabBarButton : UIButton  
4.   
5. @property (nonatomic, strong) UITabBarItem *item;  
6.   
7. @end  

[objc]  view plain  copy

1.   
2. #import "XXBTabBarButton.h"  
3. #import "XXBBadgeValue.h"  
4. #define ImageRadio 0.7  
5.   
6. #define margin 5  
7.   
8. @interface XXBTabBarButton ()  
9. @property (weak, nonatomic) XXBBadgeValue *badgeButton;  
10.   
11. @end  
12.   
13. @implementation XXBTabBarButton  
14.   
15. - (instancetype)initWithFrame:(CGRect)frame  
16. {  
17.     if (self = [super initWithFrame:frame]) {  
18.           
19.         [self setupTabBarButton];  
20.     }  
21.     return self;  
22. }  
23.   
24. - (void)dealloc  
25. {  
26. #warning 一定要取消监听  
27.     /** 
28.      *  取消监听 
29.      */  
30.     [self.item removeObserver:self forKeyPath:@"badgeValue"];  
31.     [self.item removeObserver:self forKeyPath:@"title"];  
32.     [self.item removeObserver:self forKeyPath:@"image"];  
33.     [self.item removeObserver:self forKeyPath:@"selectedImage"];  
34. }  
35.   
36. /** 
37.  *  初始化按钮 
38.  */  
39. - (void)setupTabBarButton  
40. {  
41.       
42.     self.imageView.contentMode = UIViewContentModeCenter;  
43.     self.titleLabel.textAlignment = NSTextAlignmentCenter;  
44.     self.titleLabel.font = [UIFont systemFontOfSize:12];  
45. }  
46. - (void)setItem:(UITabBarItem *)item  
47. {  
48.     _item = item;  
49.     /** 
50.      * 添加观察者 
51.      */  
52.     [item addObserver:self forKeyPath:@"badgeValue" options:0 context:nil];  
53.     [item addObserver:self forKeyPath:@"title" options:0 context:nil];  
54.     [item addObserver:self forKeyPath:@"image" options:0 context:nil];  
55.     [item addObserver:self forKeyPath:@"selectedImage" options:0 context:nil];  
56.       
57.       
58.     [self observeValueForKeyPath:nil ofObject:nil change:nil context:nil];  
59.       
60. }  
61.   
62. - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(voidvoid *)context  
63. {  
64.       
65.     /** 
66.      *  处理通知 
67.      */  
68.     [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];  
69.     [self setImage:_item.image forState:UIControlStateNormal];  
70.     [self setImage:_item.selectedImage forState:UIControlStateSelected];  
71.     [self setTitle:_item.title forState:UIControlStateNormal];  
72.     // 设置提醒数字  
73.     self.badgeButton.badgeValue = self.item.badgeValue;  
74. }  
75.   
76. /** 
77.  *  设置button的布局 
78.  */  
79. - (void)layoutSubviews  
80. {  
81.     [super layoutSubviews];  
82.     /** 
83.      *  图片的位置 
84.      */  
85.     CGFloat imageX = 0;  
86.     CGFloat imageY = 0;  
87.     CGFloat imageH = self.bounds.size.height * ImageRadio;  
88.     CGFloat imageW = self.bounds.size.width;  
89.     self.imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);  
90.     /** 
91.      *  文字的位置 
92.      */  
93.     CGFloat titleY = imageH;  
94.     CGFloat titleX = 0;  
95.     CGFloat titleW = imageW;  
96.     CGFloat titleH = self.bounds.size.height - imageH;  
97.     self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);  
98.     /** 
99.      *  提示数字的位置 
100.      */  
101.     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);  
102.       
103. }  
104.   
105. - (XXBBadgeValue *)badgeButton  
106. {  
107.     if (_badgeButton == nil) {  
108.         XXBBadgeValue *badgeButton = [[XXBBadgeValue alloc] init];  
109.         [self addSubview:badgeButton];  
110.         _badgeButton = badgeButton;  
111.     }  
112.     return  _badgeButton;  
113. }  
114. - (void)setHighlighted:(BOOL)highlighted{}  
115.   
116. @end  

[objc]  view plain  copy

1. 
   
2.   
3. #import <UIKit/UIKit.h>  
4.   
5. @interface XXBBadgeValue : UIButton  
6.   
7.   
8. @property (copy, nonatomic) NSString *badgeValue;  
9.   
10. @end  

[objc]  view plain  copy

1.  
2.   
3. #import "XXBBadgeValue.h"  
4.   
5. /** 
6.  *  注意，左右会有一个像素的偏差，右边的需要比左边的少2 
7.  */  
8. #define marginLeft 7  
9. #define marginRight 5  
10.   
11. @implementation XXBBadgeValue  
12.   
13. - (id)initWithFrame:(CGRect)frame  
14. {  
15.     self = [super initWithFrame:frame];  
16.     if (self) {  
17.         [self setup];  
18.     }  
19.     return self;  
20. }  
21. - (void)setup  
22. {  
23.     self.hidden = YES;  
24.     self.userInteractionEnabled = NO;  
25.     self.titleLabel.font = [UIFont systemFontOfSize:12];  
26.     /** 
27.      *  微调文字的位置 
28.      */  
29.     self.titleEdgeInsets = UIEdgeInsetsMake(0, marginLeft, 0, marginRight) ;  
30. }  
31. - (void)setBadgeValue:(NSString *)badgeValue  
32. {  
33.     _badgeValue = [badgeValue copy];  
34.     if (badgeValue && badgeValue.intValue >0)  
35.     {  
36.         /** 
37.          *  有值并且值不等于1 的情况向才进行相关设置 
38.          */  
39.         self.hidden = NO;  
40.           
41.         if (badgeValue.length>2)  
42.         {  
43.             /** 
44.              *  值大约99的画就显示一个小圆点 
45.              */  
46.             [self setImage:[UIImage imageNamed:@"new_dot"] forState:UIControlStateNormal];  
47.               
48.             [self setBackgroundImage:nil forState:UIControlStateNormal];  
49.             self.frame = CGRectMake(0, 0, 30, 20);  
50.         }  
51.         else  
52.         {  
53.             /** 
54.              *  其他情况就设置为相应的数值 
55.              */  
56.               
57.             UIImage *bgImage = [UIImage imageNamed:@"main_badge"];  
58.               
59.             /** 
60.              *  设置提示按钮的背景图片 
61.              */  
62.               
63.             [self setBackgroundImage:[bgImage stretchableImageWithLeftCapWidth:bgImage.size.width * 0.5 topCapHeight:bgImage.size.height * 0.5] forState:UIControlStateNormal];  
64.             [self setImage:nil forState:UIControlStateNormal];  
65.             [self setTitle:badgeValue forState:UIControlStateNormal];  
66.             // 根据文字的多少动态计算frame  
67.             CGRect frame = self.frame;  
68.             CGFloat badgeH = self.currentBackgroundImage.size.height;  
69.             CGFloat badgeW ;  
70.             NSMutableDictionary *dict = [NSMutableDictionary dictionary];  
71.             dict[NSFontAttributeName] = self.titleLabel.font;  
72.              
73.             CGSize badgeSize =  [self.badgeValue boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;  
74.             badgeW = badgeSize.width + marginLeft +marginRight;  
75.             frame.size.width = badgeW;  
76.             frame.size.height = badgeH;  
77.             self.frame = frame;  
78.         }  
79.     }  
80.     else  
81.     {  
82.         /** 
83.          *  其他情况直接隐藏 
84.          */  
85.         self.hidden = YES;  
86.     }  
87. }  
88.   
89.   
90. @end