IOS快速自定义UITabBarController内的TabBar控件

转载 2015年07月06日 16:35:53

  我们都知道在IOS7之前,Xcode中自带的UITabBarController控制器的tabbar样子很难看,可有时又想利用UITabBarController来快速切换界面,这样就牵扯到要自定义其中的tabbar。那么,如何才能自定义一个tabbar,拥有与QQ或者新浪微博那样好看的界面呢?



   如上图中,我们的目标是自定义tabbar做成图中下方的样子,这样点击下方,以快速切换界面。

 

   思路:1.定义一个GXViewController类继承自UITabBarController

    2.将原先的tabbar隐藏,自定义一个控件覆盖在上面

    3.在控件内增加可以点击的按钮,调整控件和按钮的具体细节,以达到上图中的效果。

 

具体代码如下:

在GXViewController的.m文件中

复制代码
 1 #import "GXViewController.h"
 2 
 3 #import "GXCustomButton.h"
 4 
 5 @interface GXViewController ()
 6 {
 7     
 8     UIImageView *_tabBarView; //自定义的覆盖原先的tarbar的控件
 9     
10     GXCustomButton *_previousBtn; //记录前一次选中的按钮
11     
12 }
13 
14 @end
15 
16 
17 
18 @implementation GXViewController
19 
20 - (void)viewDidLoad
21 {
22     
23     [super viewDidLoad];
24     
25     
26     self.tabBar.hidden = YES; //隐藏原先的tabBar
27     CGFloat tabBarViewY = self.view.frame.size.height - 49;
28     
29     _tabBarView = [[UIImageView alloc] initWithFrame:CGRectMake(0, tabBarViewY, 320, 49)];
30     _tabBarView.userInteractionEnabled = YES; //这一步一定要设置为YES,否则不能和用户交互
31     _tabBarView.image = [UIImage imageNamed:@"背景图片"];
32     
33     [self.view addSubview:_tabBarView];
34     
35     // 下面的方法是调用自定义的生成按钮的方法
36     [self creatButtonWithNormalName:@"图片1"andSelectName:@"图片2"andTitle:@"消息"andIndex:0];
37     [self creatButtonWithNormalName:@"图片3"andSelectName:@"图片4"andTitle:@"联系人"andIndex:1];
38     [self creatButtonWithNormalName:@"图片5"andSelectName:@"图片6"andTitle:@"动态"andIndex:2];
39     [self creatButtonWithNormalName:@"图片7"andSelectName:@"图片8"andTitle:@"设置"andIndex:3];
40     
41     GXCustomButton *btn = _tabBarView.subviews[0];
42     
43     [self changeViewController:btn]; //自定义的控件中的按钮被点击了调用的方法,默认进入界面就选中第一个按钮
44     
45 }
46 
47 #pragma mark 创建一个按钮
48 - (void)creatButtonWithNormalName:(NSString *)normal andSelectName:(NSString *)selected andTitle:(NSString *)title andIndex:(int)index
49 {
50     /*
51      GXCustomButton是自定义的一个继承自UIButton的类,自定义该类的目的是因为系统自带的Button可以设置image和title属性,但是默认的image是在title的左边,若想想上面图片中那样,将image放在title的上面,就需要自定义Button,设置一些东西。(具体GXCustomButton设置了什么,放在下面讲)
52      */
53     
54     GXCustomButton *button = [GXCustomButton buttonWithType:UIButtonTypeCustom];
55     button.tag = index;
56     
57     
58     CGFloat buttonW = _tabBarView.frame.size.width / 4;
59     CGFloat buttonH = _tabBarView.frame.size.height;
60     button.frame = CGRectMake(80 *index, 0, buttonW, buttonH);
61     
62     
63     [button setImage:[UIImage imageNamed:normal] forState:UIControlStateNormal];
64     [button setImage:[UIImage imageNamed:selected] forState:UIControlStateDisabled];
65     [button setTitle:title forState:UIControlStateNormal];
66     
67     
68     [button addTarget:self action:@selector(changeViewController:) forControlEvents:UIControlEventTouchDown];
69     
70     button.imageView.contentMode = UIViewContentModeCenter; // 让图片在按钮内居中
71     button.titleLabel.textAlignment = NSTextAlignmentCenter; // 让标题在按钮内居中
72     button.font = [UIFont systemFontOfSize:12]; // 设置标题的字体大小
73     
74     [_tabBarView addSubview:button];
75     
76 }
77 
78 
79 
80 #pragma mark 按钮被点击时调用
81 - (void)changeViewController:(GXCustomButton *)sender
82 {
83     self.selectedIndex = sender.tag; //切换不同控制器的界面
84     
85     sender.enabled = NO;
86     
87     if (_previousBtn != sender) {
88         
89         _previousBtn.enabled = YES;
90         
91     }
92     
93     _previousBtn = sender;
94     
95 }
96 
97 @end
复制代码
 

自定义的GXCustomButton按钮.m中的代码如下:

复制代码
 1 #import "GXCustomButton.h"
 2 
 3 @implementation GXCustomButton
 4 
 5 #pragma mark 设置Button内部的image的范围
 6 - (CGRect)imageRectForContentRect:(CGRect)contentRect
 7 {
 8     CGFloat imageW = contentRect.size.width;
 9     CGFloat imageH = contentRect.size.height * 0.6;
10     
11     return CGRectMake(0, 0, imageW, imageH);
12 }
13 
14 #pragma mark 设置Button内部的title的范围
15 - (CGRect)titleRectForContentRect:(CGRect)contentRect
16 {
17     CGFloat titleY = contentRect.size.height *0.6;
18     CGFloat titleW = contentRect.size.width;
19     CGFloat titleH = contentRect.size.height - titleY;
20     
21     return CGRectMake(0, titleY, titleW, titleH);
22 }
23 
24 @end
复制代码
 

   经过以上代码,就完成了快速自定义UITabBarController内的tabbar控件的目标。

如有任何疑问,欢迎各位留言沟通。


Android UI之自定义——类似iOS的Tabbar

转载请注明本文出自JFlex的博客http://blog.csdn.net/jflex/article/details/46492501,请尊重他人的辛勤劳动成果,谢谢!Android UI之自定义—...
  • englishbage
  • englishbage
  • 2015年06月14日 19:14
  • 3570

UITabBarController、TabBar背景颜色设置、TabBarItem颜色处理

在iOS的开发过程中我们使用最多的框架结构估计就是UITabBarController + UINavigationController架构了,然而在开发过程中,对于许多初学者,甚至对于许多有半年多开...
  • qq_16231975
  • qq_16231975
  • 2016年06月30日 11:16
  • 1464

iOS UITabBarController tabbar 自定义 详解

UITabBarController的item间距能不能设置  UITabBarController的每个item不设title的话,那个title还是会占据着最下面那一行的位置,该怎么去隐...
  • jeffasd
  • jeffasd
  • 2016年03月29日 11:24
  • 1455

iOS 关于自定义转场动画,以UITabBarController为例

1.小记 关于自定义转场动画,只要你理清他的”套路”,你就可以随心所欲地自定义了. 大体思路就是:遵守对应的代理协议,然后设置对应的代理,实现代理方法,这个代理方法要返回的值就是你要实现的动画.(如果...
  • SEVEN_ELEVEN_LGW
  • SEVEN_ELEVEN_LGW
  • 2017年05月25日 11:40
  • 1176

IOS 自定义UITabBarController的高度处理

UITabBarController 是App里面经常使用的 控件,一般主要栏目都会设置在 UITabBarController里面,最多可是设置五项。UITabBarController功能实用强大...
  • yimiyuangguang
  • yimiyuangguang
  • 2017年03月17日 18:04
  • 2414

iOS开发- UITabBarController的TabBar、TabBarItem背景颜色设置

UITabBarController、TabBar背景颜色设置、TabBarItem颜色处理 字数829 阅读10537 评论17 喜欢35 在iOS的开发过程中我们使用最多的框架结构...
  • a910577347
  • a910577347
  • 2016年11月21日 15:17
  • 3599

UITabBarController自定义底栏图标和字体颜色

UITabBarController在开发中是经常用到的系统组件之一,一般刚入门的iOS开发者都会简单的使用,在StoryBoard里面直接设定好图片就行,但是这样出来的效果就是图片默认是灰色,选中时...
  • momo_Pro
  • momo_Pro
  • 2017年09月22日 14:59
  • 186

iOS 原生UITabBarController 的tabbar 图标状态自定义

SellerViewController *sellerVC = [[SellerViewController alloc] initWithNibName:nil bundle:nil]; ...
  • MoMo_KUA_1
  • MoMo_KUA_1
  • 2014年06月18日 16:19
  • 1657

滑动切换UITabBarController

这个类别下的文章仅仅只是作为Demo使用,旨在于分享交流,不作为其他用途!这篇文章主要给出了一个滑动切换标签控制器的实现,主要点如下: 将当前控制器的索引的前后控制器视图通过截屏加载在控制器的左右UI...
  • ZeroOnet
  • ZeroOnet
  • 2016年09月19日 20:36
  • 518

[iOS]系统UITabBarController详解及自定义

对于UITabBarController, 大家都不陌生, 但是有时候又不那么的熟悉, 下面就来再认识一下这个熟悉的陌生人....
  • lqq200912408
  • lqq200912408
  • 2016年12月17日 16:59
  • 2049
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IOS快速自定义UITabBarController内的TabBar控件
举报原因:
原因补充:

(最多只允许输入30个字)