仿新浪微博IOS客户端（v5.2.8）——自定义UITabBar替换系统默认的（添加“+”号按钮）
时间： 22:34:33
&&&& 阅读：226
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&
转载请标明出处：
声明：仿新浪微博项目，所用所有图片资源都来源于官方新浪微博IOS客户端，编写本应用的目的在于学习交流，如涉及侵权请告知，我会及时换掉用到的相关图片。
自定义UITabBar替换系统默认的，目的是为了在UITabBar中间位置添加一个“+号按钮”，下面我们来聊聊具体的实现。
1、自定义WBTabBar，让其继承自UITabBar，代码如下：
WBTabBar.h
Created by android_ls on 15/5/21.
Copyright (c) 2015年 android_ls. All rights reserved.
#import &UIKit/UIKit.h&
@interface WBTabBar : UITabBar
2、tabBar是UITabBarController的只读成员变量（属性），是不让修改的，在UITabBarController.h文件中的声明如下：
@property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0);针对于这种情况，我们可以使用KVC的方式，更换系统自带的UITabBar，实现代码如下：
WBTabBar *tabBar = [[WBTabBar alloc] init];
[self setValue:tabBar forKeyPath:@&tabBar&];
3、添加一个UIButton到WBTabBar中，实现代码如下：
- (id)initWithFrame:(CGRect)frame
self = [super initWithFrame:frame];
if (self) {
// 添加一个按钮到tabbar中
UIButton *plusBtn = [[UIButton alloc] init];
[plusBtn setBackgroundImage:[UIImage imageNamed:@&tabbar_compose_button&] forState:UIControlStateNormal];
[plusBtn setBackgroundImage:[UIImage imageNamed:@&tabbar_compose_button_highlighted&] forState:UIControlStateHighlighted];
[plusBtn setImage:[UIImage imageNamed:@&tabbar_compose_background_icon_add&] forState:UIControlStateNormal];
[plusBtn setImage:[UIImage imageNamed:@&tabbar_compose_icon_add_highlighted&] forState:UIControlStateHighlighted];
plusBtn.size = plusBtn.currentBackgroundImage.
[plusBtn addTarget:self action:@selector(plusClick) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:plusBtn];
self.plusBtn = plusB
4、设置加号按钮的位置，调整WBTabBar中各个UITabBarButton的位置和宽度，具体实现代码如下：- (void)layoutSubviews
[super layoutSubviews];
// 1.设置加号按钮的位置
self.plusBtn.centerX = self.width * 0.5;
self.plusBtn.centerY = self.height * 0.5;
// 2.设置其它UITabBarButton的位置和尺寸
CGFloat tabbarButtonW = self.width / 5;
CGFloat tabbarButtonIndex = 0;
for (UIView *child in self.subviews) {
Class class = NSClassFromString(@&UITabBarButton&);
if ([child isKindOfClass:class]) {
// 设置宽度
child.width = tabbarButtonW;
child.x = tabbarButtonIndex * tabbarButtonW;
// 增加索引
tabbarButtonIndex++;
if (tabbarButtonIndex == 2) {
tabbarButtonIndex++;
5、定义WBTabBarDelegate协议，声明WBTabBar的代理，代码如下：//
WBTabBar.h
Created by android_ls on 15/5/21.
Copyright (c) 2015年 android_ls. All rights reserved.
#import &UIKit/UIKit.h&
#pragma mark 因为在UITabBar中已经声明过一个UITabBarDelegate协议，
#pragma mark 我们若想新增一个对外的代理函数，可以让我们自定义的协议继承自UITabBarDelegate，添加一个扩展函数。
@class WBTabB
@protocol WBTabBarDelegate &UITabBarDelegate&
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabB
@interface WBTabBar : UITabBar
@property (nonatomic, weak) id&WBTabBarDelegate& tabBarD
6、在加号按钮的点击事件处理器中，通知代理#pragma mark 加号按钮点击事件处理器
- (void)plusClick
// 通知代理
if ([self.tabBarDelegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
[self.tabBarDelegate tabBarDidClickPlusButton:self];
7、在WBTabBarController中设置WBTabBar的代理，具体实现如下：
// 2、使用KVC的方式，更换系统自带的UITabBar
WBTabBar *tabBar = [[WBTabBar alloc] init];
tabBar.tabBarDelegate =
[self setValue:tabBar forKeyPath:@&tabBar&];
#pragma mark - HWTabBarDelegate代理方法
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabBar
ComposeViewController *composeViewController= [[ComposeViewController alloc] init];
UINavigationController * navigationController = [[UINavigationController alloc]initWithRootViewController:composeViewController];
[self presentViewController:navigationController animated:YES completion:nil];
8、有图有真相，已实现的效果图如下：
点击加号按钮，弹出写作界面，效果图如下：
WBTabBarController.m文件完整源码如下：
WBTabBarController.m
Created by android_ls on 15/5/17.
Copyright (c) 2015年 android_ls. All rights reserved.
#import &WBTabBarController.h&
#import &HomeViewController.h&
#import &MessageViewController.h&
#import &DiscoverViewController.h&
#import &ProfileViewController.h&
#import &WBNavigationController.h&
#import &WBTabBar.h&
#import &ComposeViewController.h&
@interface WBTabBarController ()&WBTabBarDelegate&
HomeViewController * _homeViewC
MessageViewController * _messageViewC
DiscoverViewController * _discoverViewC
ProfileViewController * _profileViewC
@implementation WBTabBarController
- (void)viewDidLoad {
[super viewDidLoad];
// 初始化子控制器，并将其添加到UITabBarController中
_homeViewController = [[HomeViewController alloc]init];
[self addChildController:_homeViewController title:@&首页& image:@&tabbar_home&];
_messageViewController = [[MessageViewController alloc]init];
[self addChildController:_messageViewController title:@&消息& image:@&tabbar_message_center&];
_discoverViewController = [[DiscoverViewController alloc]init];
[self addChildController:_discoverViewController title:@&发现& image:@&tabbar_discover&];
_profileViewController = [[ProfileViewController alloc]init];
[self addChildController:_profileViewController title:@&我& image:@&tabbar_profile&];
// @property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0);
// tabBar是UITabBarController的只读成员变量（属性），是不让修改的
// 2、使用KVC的方式，更换系统自带的UITabBar
WBTabBar *tabBar = [[WBTabBar alloc] init];
tabBar.tabBarDelegate =
[self setValue:tabBar forKeyPath:@&tabBar&];
#pragma mark - HWTabBarDelegate代理方法
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabBar
ComposeViewController *composeViewController= [[ComposeViewController alloc] init];
UINavigationController * navigationController = [[UINavigationController alloc]initWithRootViewController:composeViewController];
[self presentViewController:navigationController animated:YES completion:nil];
* 添加子控制器到UITabBarController中
- (void)addChildController:(UIViewController *)childViewController title:(NSString *)title image:(NSString *)image
// 设置子控制器，tabbar和navigationBar上的title
childViewController.title =
// 设置tabBarItem上默认的指示图片和选中时的图片
childViewController.tabBarItem.image = [UIImage imageNamed:image];
childViewController.tabBarItem.selectedImage = [[UIImage imageNamed:[NSString stringWithFormat:@&%@%@&, image, @&_selected&]]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 设置tabBarItem上文字的样式（这里是设置文字在不同状态下的颜色值）
[childViewController.tabBarItem setTitleTextAttributes:
@{NSForegroundColorAttributeName:kColor(117, 117, 117)} forState:UIControlStateNormal];
[childViewController.tabBarItem setTitleTextAttributes:
@{NSForegroundColorAttributeName:kColor(253, 109, 10)} forState:UIControlStateSelected];
// 使用系统默认的UINavigationController
[self addChildViewController:[[UINavigationController alloc] initWithRootViewController:childViewController]];
// 使用我们自定义的导航栏(WBNavigationController继承自UINavigationController)
WBNavigationController * navigationController = [[WBNavigationController alloc]initWithRootViewController:childViewController];
[self addChildViewController:navigationController];
WBTabBar.h文件完整源码如下：
WBTabBar.h
Created by android_ls on 15/5/21.
Copyright (c) 2015年 android_ls. All rights reserved.
#import &UIKit/UIKit.h&
#pragma mark 因为在UITabBar中已经声明过一个UITabBarDelegate协议，
#pragma mark 我们若想新增一个对外的代理函数，可以让我们自定义的协议继承自UITabBarDelegate，添加一个扩展函数。
@class WBTabB
@protocol WBTabBarDelegate &UITabBarDelegate&
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabB
@interface WBTabBar : UITabBar
@property (nonatomic, weak) id&WBTabBarDelegate& tabBarD
WBTabBar.m文件完整源码如下：
WBTabBar.m
Created by android_ls on 15/5/21.
Copyright (c) 2015年 android_ls. All rights reserved.
#import &WBTabBar.h&
@interface WBTabBar()
@property (nonatomic, weak) UIButton *plusB
@implementation WBTabBar
- (id)initWithFrame:(CGRect)frame
self = [super initWithFrame:frame];
if (self) {
// 添加一个按钮到tabbar中
UIButton *plusBtn = [[UIButton alloc] init];
[plusBtn setBackgroundImage:[UIImage imageNamed:@&tabbar_compose_button&] forState:UIControlStateNormal];
[plusBtn setBackgroundImage:[UIImage imageNamed:@&tabbar_compose_button_highlighted&] forState:UIControlStateHighlighted];
[plusBtn setImage:[UIImage imageNamed:@&tabbar_compose_background_icon_add&] forState:UIControlStateNormal];
[plusBtn setImage:[UIImage imageNamed:@&tabbar_compose_icon_add_highlighted&] forState:UIControlStateHighlighted];
plusBtn.size = plusBtn.currentBackgroundImage.
[plusBtn addTarget:self action:@selector(plusClick) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:plusBtn];
self.plusBtn = plusB
#pragma mark 加号按钮点击事件处理器
- (void)plusClick
// 通知代理
if ([self.tabBarDelegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
[self.tabBarDelegate tabBarDidClickPlusButton:self];
- (void)layoutSubviews
[super layoutSubviews];
// 1.设置加号按钮的位置
self.plusBtn.centerX = self.width * 0.5;
self.plusBtn.centerY = self.height * 0.5;
// 2.设置其它UITabBarButton的位置和尺寸
CGFloat tabbarButtonW = self.width / 5;
CGFloat tabbarButtonIndex = 0;
for (UIView *child in self.subviews) {
Class class = NSClassFromString(@&UITabBarButton&);
if ([child isKindOfClass:class]) {
// 设置宽度
child.width = tabbarButtonW;
child.x = tabbarButtonIndex * tabbarButtonW;
// 增加索引
tabbarButtonIndex++;
if (tabbarButtonIndex == 2) {
tabbarButtonIndex++;
ComposeViewController继承自UIViewController，主要实现在m文件，其完整代码如下：
ComposeViewController.m
Created by android_ls on 15/5/21.
Copyright (c) 2015年 android_ls. All rights reserved.
#import &ComposeViewController.h&
#import &UIBarButtonItem+Category.h&
@interface ComposeViewController ()
@implementation ComposeViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @&写作界面&;
self.view.backgroundColor = [UIColor whiteColor];
self.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithTarget:self
action:@selector(back)
image:@&navigationbar_back_withtext&
highImage:@&navigationbar_back_withtext_highlighted&
title:@&返回&];
- (void)back
[self.navigationController dismissViewControllerAnimated:YES completion:^{}];
作为程序员，我不善于言谈。很多时候去面试，面的有些知识点我使用过，也知道其原理，但是就是表达不清楚，老让人鄙视。
最后聊聊我的技术博客写作思路，先详细讲解每一步的实现，最后我会贴出完整代码，供想认真阅读的读者看个痛快。
标签：&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！Pages: 1/2
主题 : 使用系统自带的tabbar，向中间添加一个大按钮，按钮后面tabbar交接的地方总是有一条白色的线
级别: 新手上路
可可豆: 83 CB
威望: 83 点
在线时间: 32(时)
发自: Web Page
来源于&&分类
使用系统自带的tabbar，向中间添加一个大按钮，按钮后面tabbar交接的地方总是有一条白色的线&&&
UIButton *addBtn = [UIButton buttonWithType:UIButtonTypeSystem];    [addBtn setBackgroundImage:[[UIImage imageNamed:@&add&] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];    float height = tabBar.frame.size. //添加大按钮    addBtn.frame = CGRectMake(_width*0.5-(height*0.5), 0-height*0.1, height*1, height*1);    [tabBar addSubview:addBtn]; UIImageView *iv= [[UIImageView alloc] initWithImage:[UIImage imageNamed:@&addbg&]]; //添加大按钮外面的白圈    iv.frame = CGRectMake(_width*0.5-(height*0.6), 0-height*0.2, height*1.2, height*1.2);    [tabBar addSubview:iv]; [tabBar addSubview:addBtn];大家看一下附件中的截图 
图片:284D-48D2-8B3F-.png
级别: 侠客
UID: 519457
可可豆: 161 CB
威望: 142 点
在线时间: 501(时)
发自: Web Page
&&&&self.tabBarController.tabBar.backgroundColor=[UIColor clearColor];&&设置成透明试试
级别: 新手上路
可可豆: 83 CB
威望: 83 点
在线时间: 32(时)
发自: Web Page
回 1楼() 的帖子
不可以 还是有那条线[ 此帖被roblonely在 10:26重新编辑 ]
级别: 新手上路
可可豆: 71 CB
威望: 71 点
在线时间: 139(时)
发自: Web Page
我记得我以前做这个东西的时候是把系统的隐藏 自己做个view上去 希望对你有帮助
级别: 新手上路
可可豆: 59 CB
威望: 59 点
在线时间: 535(时)
发自: Web Page
我也碰到了，而且点白线上面的部分还没有反应，同求
级别: 精灵王
UID: 40471
可可豆: 3639 CB
威望: 3620 点
在线时间: 838(时)
发自: Web Page
白条 是控件的层次的问题，自己仔细遍历查看一下还有就是说的那个点击 tab以外的部分不响应：是消息传递的问题，超出父控件的区域的部分 消息不会被父控件收到，也就不会传递给子控件。点击不响应可以忽略，或者自己写tabbar，上面透明，你懂得。。但是，归属关系你得控制好，不然内存不好处理。
级别: 新手上路
可可豆: 3 CB
威望: 3 点
在线时间: 19(时)
发自: Web Page
楼主怎么解决的
级别: 新手上路
UID: 496813
可可豆: 734 CB
威望: 452 点
在线时间: 244(时)
发自: Web Page
我没有你这个问题耶，我也是用的系统的tabbar，感觉你的中间大按钮是加上这句代码[tabBarController.tabBar bringSubviewToFront:button];
图片:屏幕快照
上午10.27.26.png
级别: 新手上路
可可豆: 3 CB
威望: 3 点
在线时间: 19(时)
发自: Web Page
回 7楼(liya0412) 的帖子
我的加了 低版本的系统上还会有这个问题
级别: 新手上路
UID: 496813
可可豆: 734 CB
威望: 452 点
在线时间: 244(时)
发自: Web Page
回 8楼(海底捞月) 的帖子
好吧，现在基本最低都是只适配iOS8了，iOS7没有去适配了！
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版iOS学习笔记——标签栏（TabBar）
创建根视图控制器，继承于UITabBarController类。创建其他视图控制器，作为TabBar的子视图，存储在数组中。
重写- (void)viewDidLoad方法：
- (void)viewDidLoad
[super viewDidLoad];
//创建视图对象，作为TabBar的子视图
LinFirstViewController * pFirstVC = [[LinFirstViewController alloc]initWithNibName:nil bundle:nil];
LinSecondViewController * pSecondVC = [[LinSecondViewController alloc]initWithNibName:nil bundle:nil];
//把视图对象以数组的形式存入到viewControllers中
self.viewControllers = [NSArray arrayWithObjects:pFirstVC, pSecondVC, nil];
//释放创建的对象
[pFirstVC release];
[pSecondVC release];
在子视图.m文件中的-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil方法中添加代码，为TabBar设置相关的属性。
//为tabBar设置自带的标志，在UITabBarSystemItem中选择，并设置标签
self.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:111];
//为tabBar设置自定义的名称与图片，图片可以为空
self.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"Second" image:nil tag:112];
//设置小角标，一般为显示信息数量
self.tabBarItem.badgeValue = @"1";在html里面怎么为一个按钮添加图片_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
在html里面怎么为一个按钮添加图片
在html里面怎么为一个按钮添加图片老师有讲过，但是我忘了
方法1：给图片加一个onclick事件，用js事件来提交就可以实现。例：&input&type=&image&&src=&图片地址&&/&方法2：有CSS把图片设为按钮背景就可以了例:&&input&name=&&&type=&button&&&style=&&width:10&height:10&&border:0;&background:url(图片路径)&no-repeat&left&top&&/&提示：需要把按钮的宽高设的和图片一样。
采纳率：46%
来自团队：
的意思是用图片当按钮吧;input name=&& type=&button&
style=& width?有CSS把图片设为按钮背景就可以了例: &lt:10 height:10
border:0; background:url(图片路径) no-repeat left top& /&把按钮的宽高设的和图片一样给按钮定义个clss比较好
本回答被提问者采纳
p&“ 的背景图像：p{ background-image:url(xxx.jpg)在HTML中出现图片通常有2种：①某元素的背景图像【绝大多数元素都可以通过background属性设置其背景图像】1;p&一个段落&/ }②图像元素img：&img src=&xxx.jpg&quot、直接在html中的标签里设置：&p style=”background-image:url(xxx.jpg)“&设置一个段落的背景图像&/p&2、在CSS上设置html中的 ”&lt
Button1.setIcon(icon); (&image/inter.jpg&);是文件地址,一般是在你的工程的文件下面新建个文件夹专门放图片,我的文件夹是image
Icon icon=new ImageIcon(&image/inter.jpg&); Button1.setIcon(icon); (&image/inter.jpg&);是文件地址,一般是在你的工程的文件下面新建个文件夹专门放图片,我的文件夹是image
其他2条回答
为您推荐：
其他类似问题
您可能关注的内容
添加图片的相关知识
换一换
回答问题，赢新手礼包如何将HTML文件中按钮与已写好的ASP代码关联_百度知道
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
如何将HTML文件中按钮与已写好的ASP代码关联
我有更好的答案
asp控件 在最后 都会变成 html标签代码
不信你写一个页面然后 打开查看源代码就知道了还有区别就是 asp控件会生成大量垃圾代码 不信 你可以试试同样的按钮一个用asp的button 一个用html的 button所以现在asp分成两种开发模式 一个是MVC 这个模式（ps:不知道问百度)另一个就是三层框架asp（三层框架）坏处 简单说 就是生成大量垃圾代码
好处 就是除了第一次 加载时间很长之外 之后 你会发现加载 真心快。。。(在你没删除缓存的时候—-— ）区别显然出来了- -
采纳率：96%
来自团队：
用ASP变量值替换原HTML中的固定值
要用到数据调用了
为您推荐：
其他类似问题
asp代码的相关知识
换一换
回答问题，赢新手礼包