推荐这篇日记的豆列
······iMAG移动应用开发指南
标签栏控件，通常放在顶部用来切换多个
标签栏标签
通常放在顶部用来切换多个
bottom样式，包括：
controlContents
是否控制Contents控件的切换：
true:控制切换，默认值
false:不控制切换
scrollable
设置是否允许标签页左右滑动：
true:允许滑动，默认值
false:不允许滑动
css(name:String)
name:样式名称
根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
设置单个样式
css(style:String)
style:样式文本，多个样式用分号分隔
设置多个样式
css(style:Object)
style:样式对象，键值对形式
设置多个样式
add(item:Object)
item:TabbarItem对象
添加一个item
remove(item:Object)
content:TabbarItem对象
移除一个item
移除Tabbar中所有的item
TabbarItem
菜单项子标签
显示菜单项
是否是当前的item，取值：
true:当前的item
false:非当前的item，默认值
Javascript
切换TabbarItem时触发的脚本事件
● 用Tabbar控制Contents切换
&?xml version="1.0" encoding="utf-8"?&
&label&Tabbar&/label&
&item label="头条"&&/item&
&item label="体育"&&/item&
&item label="娱乐"&&/item&
&item label="财经"&&/item&
&item label="科技"&&/item&
&item label="时尚"&&/item&
&item label="汽车"&&/item&
&contents id="contents"&
&content style="background:white"&
&label&头条&/label&
&/content&
&content style="background:blue"&
&label&体育&/label&
&/content&
&content style="background:green"&
&label&娱乐&/label&
&/content&
&content style="background:yellow"&
&label&财经&/label&
&/content&
&content style="background:gray"&
&label&科技&/label&
&/content&
&content style="background:red"&
&label&时尚&/label&
&/content&
&content style="background:brown"&
&label&汽车&/label&
&/content&
&/contents&
Tabbar默认会控制Contents的切换，可以设置controlContents="false"来取消对Contents的控制。
● 设置Tabbar样式
&?xml version="1.0" encoding="utf-8"?&
&label&Tabbar样式&/label&
&tabbar controlContents="true" style="background:#444444;label-color:white,indicator-color:indicator-height:3"&
&item label="头条"&&/item&
&item label="体育"&&/item&
&item label="娱乐"&&/item&
&item label="财经"&&/item&
&item label="科技"&&/item&
&item label="时尚"&&/item&
&item label="汽车"&&/item&
&contents id="contents"&
&content style="background:white"&
&label&头条&/label&
&/content&
&content style="background:blue"&
&label&体育&/label&
&/content&
&content style="background:green"&
&label&娱乐&/label&
&/content&
&content style="background:yellow"&
&label&财经&/label&
&/content&
&content style="background:gray"&
&label&科技&/label&
&/content&
&content style="background:red"&
&label&时尚&/label&
&/content&
&content style="background:brown"&
&label&汽车&/label&
&/content&
&/contents&
设置tabbar的样式，其中label-color是文字颜色，indicator-color是indicator滑块的颜色，indicator-height是indicator滑块的高度。
● 自定义TabbarItem
&?xml version="1.0" encoding="utf-8"?&
var i = 0;
function changeIcon(index, src) {
for (var i = 0; i & 4; i++) {
$('icon' + i).src = $('icon' + i).src.replace('selected', 'normal');
$('icon' + index).src =
&label&自定义TabbarItem&/label&
&contents id="contents"&
&content style="background:white"&
&label&微信&/label&
&/content&
&content style="background:blue"&
&label&通信录&/label&
&/content&
&content style="background:green"&
&label&发现&/label&
&/content&
&content style="background:yellow"&
&label&我&/label&
&/content&
&/contents&
&item onchange="changeIcon(0, 'tab_home_selected.png')"&&row&&icon id="icon0" src="tab_home_selected.png"/&&label&微信&/label&&/row&&/item&
&item onchange="changeIcon(1, 'tab_category_selected.png')"&&row&&icon id="icon1" src="tab_category_normal.png"/&&label&通信&/label&&/row&&/item&
&item onchange="changeIcon(2, 'tab_service_selected.png')"&&row&&icon id="icon2" src="tab_service_normal.png"/&&label&发现&/label&&/row&&/item&
&item onchange="changeIcon(3, 'tab_mine_selected.png')"&&row&&icon id="icon3" src="tab_mine_normal.png"/&&label&我&/label&&/row&&/item&
说明：不设置TabbarItem的label属性，而是使用row布局，item里可以放更多控件。
● 设置当前的TabbarItem
&?xml version="1.0" encoding="utf-8"?&
&label&设置当前的TabbarItem&/label&
&button onclick="$('tabitem4').current=true"&设置&/button&
&item label="头条"&&/item&
&item label="体育"&&/item&
&item label="娱乐" current="true"&&/item&
&item label="财经"&&/item&
&item label="科技" id="tabitem4"&&/item&
&item label="时尚"&&/item&
&item label="汽车"&&/item&
&contents id="contents"&
&content style="background:white"&
&label&头条&/label&
&/content&
&content style="background:blue"&
&label&体育&/label&
&/content&
&content style="background:green"&
&label&娱乐&/label&
&/content&
&content style="background:yellow"&
&label&财经&/label&
&/content&
&content style="background:gray"&
&label&科技&/label&
&/content&
&content style="background:red"&
&label&时尚&/label&
&/content&
&content style="background:brown"&
&label&汽车&/label&
&/content&
&/contents&
说明：通过设置current属性来设置当前的TabbarItem，其中$('tabitem4').current=true是用脚本动态修改。
● Tabbar切换的onchange事件
&?xml version="1.0" encoding="utf-8"?&
&label&Tabbar&/label&
&item label="头条" onchange="hint('头条');"&&/item&
&item label="体育" onchange="hint('体育');"&&/item&
&item label="娱乐" onchange="hint('娱乐');"&&/item&
&item label="财经" onchange="hint('财经');"&&/item&
&item label="科技" onchange="hint('科技');"&&/item&
&item label="时尚" onchange="hint('时尚');"&&/item&
&item label="汽车" onchange="hint('汽车');"&&/item&
&contents id="contents"&
&content style="background:white"&
&label&头条&/label&
&/content&
&content style="background:blue"&
&label&体育&/label&
&/content&
&content style="background:green"&
&label&娱乐&/label&
&/content&
&content style="background:yellow"&
&label&财经&/label&
&/content&
&content style="background:gray"&
&label&科技&/label&
&/content&
&content style="background:red"&
&label&时尚&/label&
&/content&
&content style="background:brown"&
&label&汽车&/label&
&/content&
&/contents&
● 动态添加TabbarItem
&?xml version="1.0" encoding="utf-8"?&
var i = 0;
function addTabbarItem() {
var item = $C('&tabbar-item&&item onclick="$(\'contents\').showContent(' + i + ')"&&label&tabb' + i + '&/label&&/item&&/tabbar-item&');
$('tabbar').add(item);
&label&添加TabbarItem&/label&
&button onclick="addTabbarItem()"&添加&/button&
&tabbar id="tabbar"&&/tabbar&
&contents id="contents"&
&label&content1&/label&
&/content&
&label&content2&/label&
&/content&
&label&content3&/label&
&/content&
&/contents&
● 移除TabbarItem
&?xml version="1.0" encoding="utf-8"?&
var i = 0;
function removeTabbarItem() {
$('tabbar').remove($('tab' + i));
&label&移除TabbarItem&/label&
&tabbar id="tabbar" controlContents="false"&
&item id="tab0" onclick="hint('头条')"&&label&头条&/label&&/item&
&item id="tab1" onclick="hint('体育')"&&label&体育&/label&&/item&
&item id="tab2" onclick="hint('娱乐')"&&label&娱乐&/label&&/item&
&item id="tab3" onclick="hint('财经')"&&label&财经&/label&&/item&
&item id="tab4" onclick="hint('科技')"&&label&科技&/label&&/item&
&button onclick="removeTabbarItem()"&移除TabbarItem&/button&
&/content&
点击按钮移除相应的TabbarItem。
点此下载tabbar相关的示例代码：自定义Tabbar,样式和尺寸
家好，这么晚了，因为我昨天再接过的项目是，发现外包的伙伴们写的Tabbar是系统的，因为我们的产品要求的是44的高度，而系统的Tabbar的高度是49像素，所以怎么办呢，外包的伙伴们做的是在系统的Tabbar的Item上做的视图覆盖，这样我发现有白色的5像素视图会在iPhone5一下的设备并且是IOS7一下的系统上出现，那么怎么办呢，当然做好的办法是不是补补改改，最好的就是从跟上解决，这样我们框架上的其他东西就不会导致一些问题的出现，所以就要自定义Tabbar,
系统给了一个好的方法：切换视图控制器的：
- (void)transitionFromViewController:(UIViewController&*)fromViewController
toViewController:(UIViewController&*)toViewController
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void&(^)(void))animations
completion:(void&(^)(BOOL&finished))completion&NS_AVAILABLE_IOS(5_0);
//这个要注意的一点事一定要判断是否finished
做一个BOOL判断，如果没有判断，你要快速的点击切换，会出现白屏，因为你的某一个Controller有refresh或者reload之类的，影响切换的速度，所以一定要做个bool值判断，下来这家看代码吧：
(void)viewDidLoad
& [superviewDidLoad];
&&isTransted&=&YES;
&&//主控制器的内容视图
&&_contentView&=
[[UIView&alloc]&initWithFrame:CGRectMake(0,&0,&self.view.width,&self.view.height&-&44)];
& [self.viewaddSubview:_contentView];
&&//主控制器的
&&_toolView&=
[[UIView&alloc]&initWithFrame:CGRectMake(0,&self.view.height&-&44,&self.view.width,44)];
&&_toolView.backgroundColor&=
[UIColorredColor];
&&_toolView.autoresizingMask&=&UIViewAutoresizingFlexibleTopMargin;
& [self.view&addSubview:_toolView];
&&messages&=
[[Messagesalloc]&init];
&&Grade&*grade&
= [[Grade&alloc]&init];
&&PhotoTakeCenterVC&*tvc =
[[PhotoTakeCenterVCalloc]init];
&&ListenClassListController&*listen =
[[ListenClassListControlleralloc]init];
&&Setting&*setting
= [[Setting&alloc]&init];
& [selfaddChildViewController:messages];
& [selfaddChildViewController:grade];
& [selfaddChildViewController:tvc];
& [selfaddChildViewController:listen];
& [selfaddChildViewController:setting];
&&UIViewController&*firstController
=&self.childViewControllers[0];
&&_selectedIndex&=&1;
& firstController.view.top&=&0;
&for&(NSInteger&i
=&0; i & i
&&CGFloat&width&
&&CGFloat&height
&&CGFloat&y
=&524&-&AutoHeight;
&&CGFloat&x =
(width +&1)*i;
& & height
&&else&if&(i
&&CGFloat&lineY
&&UIView&*lineView
= [[UIView&alloc]&initWithFrame:CGRectMake(x +
width,&0,&2, height)];
lineView.backgroundColor&=&COLOR_WITH_RGB(28.0f,&30.0f,&36.0f);
[_toolView&addSubview:lineView];
[lineView&release];
&&if&(iPhone5) {
=&568&-&44;
=&480&-&44;
& &&BarItem&*button
= [[BarItem&alloc]&initWithFrame:CGRectMake(x,&0, width,
& &&NSString&*normal
= [NSString&stringWithFormat:@"TabItem%d_0",i];
[button&setImage:LOADIMAGE(normal,&@"png")&forState:UIControlStateNormal];
& &&NSString&*selected
= [NSString&stringWithFormat:@"NewTabItem%d_1",i];
[button&setImage:LOADIMAGE(selected,&@"png")&forState:UIControlStateSelected];
& & button.badgeValue&=&@"0";
& & button.tag&= i
+&ITEM_TAG&-&999;
& & [_toolView&addSubview:button];
& button.selected&=&YES;
& [[NSNotificationCenterdefaultCenter]&postNotificationName:@"UPDATE_ITEM_BADGEVALUE"object:chattype_chat];
[button&release];
[button&addTarget:selfaction:@selector(selectControl:)&forControlEvents:UIControlEventTouchUpInside];
& &&self.selectedIndex&=&1;
& &&BarItem&*button
= [[BarItem&alloc]&initWithFrame:CGRectMake(x,
width, height)];
& &&NSString&*normal
= [NSString&stringWithFormat:@"TabItem%d_0",i];
[button&setImage:LOADIMAGE(normal,&@"png")&forState:UIControlStateNormal];
& &&NSString&*selected
= [NSString&stringWithFormat:@"NewTabItem%d_1",i];
[button&setImage:LOADIMAGE(selected,&@"png")&forState:UIControlStateSelected];
& & button.badgeValue&=&@"0";
& & button.tag&= i
+&ITEM_TAG&-999;
& & [_toolView&addSubview:button];
[button&addTarget:selfaction:@selector(takePhoto)&forControlEvents:UIControlEventTouchUpInside];
[button&release];
&[_contentView&addSubview:firstController.view];
(void)selectControl:(BarItem&*)sender
&&if&(isTransted&==&NO) {
&&if&(_selectedIndex&!=
sender.tag)
&&isTransted&=&NO;
&&UIViewController&*toViewController
=&self.childViewControllers[sender.tag&-&1];
toViewController.view.top&=&0;
[selftransitionFromViewController:self.childViewControllers[_selectedIndex&-&1]&toViewController:toViewController&duration:0options:0animations:^{
}&completion:^(BOOL&finished)
& &&isTransted&=&YES;
&&//变换控制器
&&_selectedIndex&=
sender.tag;
&&for&(BarItem&*btn&in_toolView.subviews)
&&if&([btn&isKindOfClass:[BarItem&class]])
& & btn.selected&=&NO;
& &&NSString&*normal
= [NSString&stringWithFormat:@"TabItem%d_0",btn.tag&-
[btn&setImage:LOADIMAGE(normal,&@"png")&forState:UIControlStateNormal];
&&BarItem&*btn1
= (BarItem&*)[_toolView&viewWithTag:sender.tag];
&&NSString&*selected
= [NSString&stringWithFormat:@"NewTabItem%d_1",sender.tag&-
[btn1&setImage:LOADIMAGE(selected,&@"png")&forState:UIControlStateNormal];
& btn1.selected&=&YES;
这里的BarItem是一个自定义的button
大家尝试吧。其实还有比这更好的，那个是封装的，资源code4App里有。
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。iOS（136）
UI层技术（44）
项目需求，希望当用户存在未读消息的时候在对应的UITabBarItem上显示小红点。发现IOS自带的UITabBarItem的badgeValue尺寸偏大，不满足项目需求。
第一步，建一个UITabBar的category类别。
第二步，编写代码。
第三步，引入到需要使用的类中。
引用代码如下：
大功告成，接下来看看效果。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：73206次
积分：2327
积分：2327
排名：第12585名
原创：162篇
转载：16篇
评论：14条
(9)(5)(6)(40)(16)(4)(7)(19)(17)(6)(4)(9)(9)(5)(24)}