码迷，mamicode.com
首页 > 其他好文 > 详细

自定义tabbar

时间：2016-03-29 10:58:20      阅读：485      评论：0      收藏：0      [点我收藏+]

标签：

一、自定义的思路

自定义TabBar的原则：尽量利用系统自带TabBar，只改需要改的地方。


二、自定义TabBar的总体过程
1.先把自带的TabBar条给取消了
2.自己做一个view,上面放几个按钮,设定按钮的点击事件.并设置selectIndex。
3.关联各个子viewController，覆盖相关事件。

三、细节很重要

1. 让自己创建的按钮关联到viewController:
?用tabbar的selectedIndex属性.设置这个属性就行了.
2. 取消系统的高亮:
?可以自定义一个按钮.重写里面的setHighhighted方法,什么也不做就行了.(如果调用super就相当于没写)
3. 关于几个按钮只选中一个的方法:
?设置一个属性,记录上一个选中的按钮.
?点击当前按钮时,把上一个按钮设置为未选中,并把当前按钮设置为选中,最后把当前按钮赋值给上一个按钮.

四、初步自定义
直接上代码，详见注释。
XNTabBarController.h

[objc] view plain copy
 技术分享技术分享
  1. #import <UIKit/UIKit.h>  
  2.   
  3. @interface XNTabBarController : UITabBarController  
  4.   
  5. @end  

XNTabBarController.m

[objc] view plain copy
 技术分享技术分享
  1. //  
  2. //  XNTabBarController.m  
  3. //  
  4. //  
  5. //  Created by neng on 14-6-19.  
  6. //  Copyright (c) 2014年 neng. All rights reserved.  
  7. //  
  8.   
  9. #import "XNTabBarController.h"  
  10. #import "Common.h"  
  11. #import "XNTabBarButton.h"  
  12.   
  13. @interface XNTabBarController ()  
  14. /** 
  15.  *  设置之前选中的按钮 
  16.  */  
  17. @property (nonatomic, weak) UIButton *selectedBtn;  
  18. @end  
  19.   
  20. @implementation XNTabBarController  
  21.   
  22. - (void)viewDidLoad {  
  23.     [super viewDidLoad];  
  24.     //下面两个方法在开发中是经常会用到的  
  25. //    NSLog(@"%s",__func__);  
  26. //    NSLog(@"%@",self.view.subviews); //能打印出所有子视图,和其frame  
  27.     LogFun;  
  28.     LogSubviews(self.view);  
  29.   
  30.   
  31.     //删除现有的tabBar  
  32.     CGRect rect = self.tabBar.frame;  
  33.     [self.tabBar removeFromSuperview];  //移除TabBarController自带的下部的条  
  34.   
  35.     //测试添加自己的视图  
  36.     UIView *myView = [[UIView alloc] init];  
  37.     myView.frame = rect;  
  38.     myView.backgroundColor = [UIColor redColor];  
  39.     [self.view addSubview:myView];  
  40.   
  41.     for (int i = 0; i < 5; i++) {  
  42.         //UIButton *btn = [[UIButton alloc] init];  
  43.         XNTabBarButton *btn = [[XNTabBarButton alloc] init];  
  44.           
  45.         NSString *imageName = [NSString stringWithFormat:@"TabBar%d", i + 1];  
  46.         NSString *imageNameSel = [NSString stringWithFormat:@"TabBar%dSel", i + 1];  
  47.   
  48.         [btn setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];  
  49.         [btn setImage:[UIImage imageNamed:imageNameSel] forState:UIControlStateSelected];  
  50.   
  51.         CGFloat x = i * myView.frame.size.width / 5;  
  52.         btn.frame = CGRectMake(x, 0, myView.frame.size.width / 5, myView.frame.size.height);  
  53.   
  54.         [myView addSubview:btn];  
  55.           
  56.         btn.tag = i;//设置按钮的标记, 方便来索引当前的按钮,并跳转到相应的视图  
  57.   
  58.         //带参数的监听方法记得加"冒号"  
  59.         [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];  
  60.   
  61.         //设置刚进入时,第一个按钮为选中状态  
  62.         if (0 == i) {  
  63.             btn.selected = YES;  
  64.             self.selectedBtn = btn;  //设置该按钮为选中的按钮  
  65.         }  
  66.     }  
  67. }  
  68.   
  69. /** 
  70.  *  自定义TabBar的按钮点击事件 
  71.  */  
  72. - (void)clickBtn:(UIButton *)button {  
  73.     //1.先将之前选中的按钮设置为未选中  
  74.     self.selectedBtn.selected = NO;  
  75.     //2.再将当前按钮设置为选中  
  76.     button.selected = YES;  
  77.     //3.最后把当前按钮赋值为之前选中的按钮  
  78.     self.selectedBtn = button;  
  79.       
  80.     //4.跳转到相应的视图控制器. (通过selectIndex参数来设置选中了那个控制器)  
  81.     self.selectedIndex = button.tag;  
  82. }  
  83.   
  84. @end  

XNTabBarButton.h

[objc] view plain copy
 技术分享技术分享
  1. #import <UIKit/UIKit.h>  
  2.   
  3. @interface XNTabBarButton : UIButton  
  4.   
  5. @end  

XNTabBarButton.m

[objc] view plain copy
 技术分享技术分享
  1. #import "XNTabBarButton.h"  
  2.   
  3. @implementation XNTabBarButton  
  4. /**什么也不做就可以取消系统按钮的高亮状态*/  
  5. - (void)setHighlighted:(BOOL)highlighted{  
  6. //    [super setHighlighted:highlighted];  
  7. }  
  8.   
  9. @end  

五、代码重构

重构的目的是把代码放到他最该到的地方去. 提高可读写与可拓展性。

对控件的重构要保证可重用性. 做到封装做其他应用时,可以直接拿过去用的地步.

tips ：
1、关于init与initWithFrame:
?在对象初始化调用init时,会调用initWithFrame方法.
?Init与initWithFrame都会被调用.
?建议自定义控件不要重写init方法,需要初始化时重写initWithFrame方法.
?好处:其他人调用无论是调用init,还是调用initWithFrame都会调用initWithFrame方法.

2、关于控件的布局代码:
?建议写在layoutSubviews方法中.
?不要忘记写super方法
?将设置x,y,frame等写在这里面.
3、将自定义的Tabbar添加为系统TabBar的子视图,这样TabBar的切换自动隐藏/滑动功能就不用自己做了. (hidebottombaronpush)

重构后的代码如下：
将自定义的TabBar单独建立，并将代码移过去。
设置代理方法，工具栏按钮被选中,记录从哪里跳转到哪里. 

XNTabBar.h

[objc] view plain copy
 技术分享技术分享
  1. #import <UIKit/UIKit.h>  
  2. @class XNTabBar;  
  3.   
  4. @protocol XNTabBarDelegate <NSObject>  
  5. /** 
  6.  *  工具栏按钮被选中, 记录从哪里跳转到哪里. (方便以后做相应特效) 
  7.  */  
  8. - (void) tabBar:(XNTabBar *)tabBar selectedFrom:(NSInteger) from to:(NSInteger)to;  
  9.   
  10. @end  
  11.   
  12. @interface XNTabBar : UIView  
  13. @property(nonatomic,weak) id<XNTabBarDelegate> delegate;  
  14. /** 
  15.  *  使用特定图片来创建按钮, 这样做的好处就是可扩展性. 拿到别的项目里面去也能换图片直接用 
  16.  * 
  17.  *  @param image         普通状态下的图片 
  18.  *  @param selectedImage 选中状态下的图片 
  19.  */  
  20. -(void)addButtonWithImage:(UIImage *)image selectedImage:(UIImage *) selectedImage;  
  21. @end  


XNTabBar.m


[objc] view plain copy
 技术分享技术分享
  1. //  
  2. //  XNTabBar.m  
  3. //  
  4. //  Created by neng on 14-6-19.  
  5. //  Copyright (c) 2014年 neng. All rights reserved.  
  6. //  
  7.   
  8. #import "XNTabBar.h"  
  9. #import "XNTabBarButton.h"  
  10.   
  11. @interface XNTabBar ()  
  12. /** 
  13.  *  设置之前选中的按钮 
  14.  */  
  15. @property (nonatomic, weak) UIButton *selectedBtn;  
  16. @end  
  17.   
  18. @implementation XNTabBar  
  19.   
  20. /** 
  21.  *  在这个方法里写控件初始化的东西, 调用init方法时会调用 
  22.  */  
  23. //- (id)initWithFrame:(CGRect)frame {  
  24. //  if (self = [super initWithFrame:frame]) {  
  25. //      //添加按钮  
  26. //      for (int i = 0; i < 5; i++) { //取消掉特定的数字  
  27. //          //UIButton *btn = [[UIButton alloc] init];  
  28. //          XNTabBarButton *btn = [[XNTabBarButton alloc] init];  
  29. //  
  30. //          NSString *imageName = [NSString stringWithFormat:@"TabBar%d", i + 1];  
  31. //          NSString *imageNameSel = [NSString stringWithFormat:@"TabBar%dSel", i + 1];  
  32. //  
  33. //          [btn setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];  
  34. //          [btn setImage:[UIImage imageNamed:imageNameSel] forState:UIControlStateSelected];  
  35. //  
  36. //          [self addSubview:btn];  
  37. //  
  38. //          btn.tag = i; //设置按钮的标记, 方便来索引当前的按钮,并跳转到相应的视图  
  39. //  
  40. //          //带参数的监听方法记得加"冒号"  
  41. //          [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];  
  42. //  
  43. //          if (0 == i) {  
  44. //              [self clickBtn:btn];  
  45. //          }  
  46. //      }  
  47. //  }  
  48. //  return self;  
  49. //}  
  50.   
  51. - (void)addButtonWithImage:(UIImage *)image selectedImage:(UIImage *)selectedImage {  
  52.     UIButton *btn = [[UIButton alloc] init];  
  53.   
  54.     [btn setImage:image forState:UIControlStateNormal];  
  55.     [btn setImage:selectedImage forState:UIControlStateSelected];  
  56.   
  57.     [self addSubview:btn];  
  58.   
  59.     //带参数的监听方法记得加"冒号"  
  60.     [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];  
  61.   
  62.     //如果是第一个按钮, 则选中(按顺序一个个添加)  
  63.     if (self.subviews.count == 1) {  
  64.         [self clickBtn:btn];  
  65.     }  
  66. }  
  67.   
  68. /**专门用来布局子视图, 别忘了调用super方法*/  
  69. - (void)layoutSubviews {  
  70.     [super layoutSubviews];  
  71.   
  72.     int count = self.subviews.count;  
  73.     for (int i = 0; i < count; i++) {  
  74.         //取得按钮  
  75.         UIButton *btn = self.subviews[i];  
  76.   
  77.         btn.tag = i; //设置按钮的标记, 方便来索引当前的按钮,并跳转到相应的视图  
  78.   
  79.         CGFloat x = i * self.bounds.size.width / count;  
  80.         CGFloat y = 0;  
  81.         CGFloat width = self.bounds.size.width / count;  
  82.         CGFloat height = self.bounds.size.height;  
  83.         btn.frame = CGRectMake(x, y, width, height);  
  84.     }  
  85. }  
  86.   
  87. /** 
  88.  *  自定义TabBar的按钮点击事件 
  89.  */  
  90. - (void)clickBtn:(UIButton *)button {  
  91.     //1.先将之前选中的按钮设置为未选中  
  92.     self.selectedBtn.selected = NO;  
  93.     //2.再将当前按钮设置为选中  
  94.     button.selected = YES;  
  95.     //3.最后把当前按钮赋值为之前选中的按钮  
  96.     self.selectedBtn = button;  
  97.   
  98.     //却换视图控制器的事情,应该交给controller来做  
  99.     //最好这样写, 先判断该代理方法是否实现  
  100.     if ([self.delegate respondsToSelector:@selector(tabBar:selectedFrom:to:)]) {  
  101.         [self.delegate tabBar:self selectedFrom:self.selectedBtn.tag to:button.tag];  
  102.     }  
  103.   
  104.     //4.跳转到相应的视图控制器. (通过selectIndex参数来设置选中了那个控制器)  
  105.     //self.selectedIndex = button.tag;  
  106. }  
  107.   
  108. @end  

原先的XNTabBarController.m经过修改后，注释了原先的代码。

[objc] view plain copy
 技术分享技术分享
  1. //  
  2. //  XNTabBarController.m  
  3. //  
  4. //  Created by neng on 14-6-19.  
  5. //  Copyright (c) 2014年 neng. All rights reserved.  
  6. //  
  7.   
  8. #import "XNTabBarController.h"  
  9. #import "XNTabBarButton.h"  
  10. #import "XNTabBar.h"  
  11.   
  12. @interface XNTabBarController () <XNTabBarDelegate>  
  13. /** 
  14.  *  设置之前选中的按钮 
  15.  */  
  16. @property (nonatomic, weak) UIButton *selectedBtn;  
  17. @end  
  18.   
  19. @implementation XNTabBarController  
  20.   
  21. - (void)viewDidLoad {  
  22.     [super viewDidLoad];  
  23.     //下面两个方法在开发中是经常会用到的  
  24. //    NSLog(@"%s",__func__);  
  25. //    NSLog(@"%@",self.view.subviews); //能打印出所有子视图,和其frame  
  26. //  LogFun;  
  27. //  LogSubviews(self.view);  
  28.     //Hell  
  29.   
  30.   
  31.     //删除现有的tabBar  
  32.     CGRect rect = self.tabBar.bounds; //这里要用bounds来加, 否则会加到下面去.看不见  
  33.     LogFrame(self.tabBar);  
  34.     //[self.tabBar removeFromSuperview];  //移除TabBarController自带的下部的条  
  35.   
  36.     //测试添加自己的视图  
  37.     XNTabBar *myView = [[XNTabBar alloc] init]; //设置代理必须改掉前面的类型,不能用UIView  
  38.     myView.delegate = self; //设置代理  
  39.     myView.frame = rect;  
  40.     [self.tabBar addSubview:myView]; //添加到系统自带的tabBar上, 这样可以用的的事件方法. 而不必自己去写  
  41.       
  42.     //为控制器添加按钮  
  43.     for (int i=0; i<self.viewControllers.count; i++) { //根据有多少个子视图控制器来进行添加按钮  
  44.           
  45.         NSString *imageName = [NSString stringWithFormat:@"TabBar%d", i + 1];  
  46.         NSString *imageNameSel = [NSString stringWithFormat:@"TabBar%dSel", i + 1];  
  47.           
  48.         UIImage *image = [UIImage imageNamed:imageName];  
  49.         UIImage *imageSel = [UIImage imageNamed:imageNameSel];  
  50.           
  51.         [myView addButtonWithImage:image selectedImage:imageSel];  
  52.     }  
  53.       
  54.   
  55. //    //添加按钮  
  56. //  for (int i = 0; i < 5; i++) {  
  57. //      //UIButton *btn = [[UIButton alloc] init];  
  58. //        XNTabBarButton *btn = [[XNTabBarButton alloc] init];  
  59. //  
  60. //      NSString *imageName = [NSString stringWithFormat:@"TabBar%d", i + 1];  
  61. //      NSString *imageNameSel = [NSString stringWithFormat:@"TabBar%dSel", i + 1];  
  62. //  
  63. //      [btn setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];  
  64. //      [btn setImage:[UIImage imageNamed:imageNameSel] forState:UIControlStateSelected];  
  65. //  
  66. //      CGFloat x = i * myView.frame.size.width / 5;  
  67. //      btn.frame = CGRectMake(x, 0, myView.frame.size.width / 5, myView.frame.size.height);  
  68. //  
  69. //      [myView addSubview:btn];  
  70. //  
  71. //        btn.tag = i;//设置按钮的标记, 方便来索引当前的按钮,并跳转到相应的视图  
  72. //  
  73. //      //带参数的监听方法记得加"冒号"  
  74. //      [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];  
  75. //  
  76. //      //设置刚进入时,第一个按钮为选中状态  
  77. //      if (0 == i) {  
  78. //          btn.selected = YES;  
  79. //          self.selectedBtn = btn;  //设置该按钮为选中的按钮  
  80. //      }  
  81. //  }  
  82. }  
  83.   
  84. /**永远别忘记设置代理*/  
  85. - (void)tabBar:(XNTabBar *)tabBar selectedFrom:(NSInteger)from to:(NSInteger)to {  
  86.     self.selectedIndex = to;  
  87. }  
  88.   
  89. /** 
  90.  *  自定义TabBar的按钮点击事件 
  91.  */  
  92. //- (void)clickBtn:(UIButton *)button {  
  93. //  //1.先将之前选中的按钮设置为未选中  
  94. //  self.selectedBtn.selected = NO;  
  95. //  //2.再将当前按钮设置为选中  
  96. //  button.selected = YES;  
  97. //  //3.最后把当前按钮赋值为之前选中的按钮  
  98. //  self.selectedBtn = button;  
  99. //  
  100. //    //4.跳转到相应的视图控制器. (通过selectIndex参数来设置选中了那个控制器)  
  101. //    self.selectedIndex = button.tag;  
  102. //}  
  103.   
  104. @end  

自定义tabbar

标签：

原文地址：http://blog.csdn.net/it_zgc/article/details/50998070
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！