一、UITabBar
1. UITabBarController底部的选项卡条
二、UITabBarButton
1. UITabBar底部的每一个标签
2. 每一个UITabBarButton里面显示什么内容,取决于当前控制器的tabBarItem属性
3. UITabBarButton是view, tabBarItem是model
4. 由tabBarItem给UITabBarButton提供显示的数据
三、UITabBarItem
1> 获得方式
self.tabBarItem // self是指控制器
2> 作用
可以用来设置当前控制器对应的选项卡标签的内容
// 标签的标题
self.tabBarItem.title
// 标签的图标
self.tabBarItem.image
// 标签的选中图标
self.tabBarItem.selectdImage
注:大致图为:
UITabbar的一些常规用法(总结)
往往系统自带的UITabbar 不能满足我们的样式或者颜色设计,所以需要调整UITabbar。
1、自定义UITabbar,也是我学到的第一种方式(简单暴力)。
先记录一下思路:
首先,隐藏系统自带的Tabbar,在init 方法中:self.tabBar.hidden = YES;
然后自定义一个高度49px的UIView,在UIView上添加多个UIButton,我们通过UIView、UIButton的颜色、样式修改来实现我们要的效果。
记录一段我常用的自定义UITabbbar的代码:
//初始化tabbar
- (void)_initTabbarView
{
_tabbarView = [[UIViewalloc]initWithFrame:CGRectMake(0,ScreenHeight-49,ScreenWidth,49)];
[self.viewaddSubview:_tabbarView];
//给tabbarView添加背景图片
UIImageView *tabbarGroundImage = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"tabbar_background.png"]];
tabbarGroundImage.frame =_tabbarView.bounds;
[_tabbarViewaddSubview:tabbarGroundImage];
NSArray *bgroud =@[@"tabbar_home.png",@"tabbar_message_center.png",@"tabbar_profile.png",@"tabbar_discover.png",@"tabbar_more.png"];
NSArray *heightBground =@[@"tabbar_home_highlighted.png",@"tabbar_message_center_highlighted.png",@"tabbar_profile_highlighted.png",@"tabbar_discover_highlighted.png",@"tabbar_more_highlighted.png"];
for (int i = 0; i < bgroud.count; i++) {
NSString *backImage = bgroud[i];
NSString *heightImage = heightBground[i];
UIButton *button = [[UIButtonalloc]initWithFrame:CGRectMake((64-30)/2+(i*64), (49-30)/2,30,30)];
button.showsTouchWhenHighlighted =YES;
button.tag = i;
[button setImage:[UIImageimageNamed:backImage]forState:UIControlStateNormal];
[button setImage:[UIImageimageNamed:heightImage]forState:UIControlStateHighlighted];
[button addTarget:selfaction:@selector(selectedTab:)forControlEvents:UIControlEventTouchUpInside];
[_tabbarViewaddSubview:button];
}
_sliderView = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:@"tabbar_slider.png"]];
_sliderView.backgroundColor = [UIColorclearColor];
_sliderView.frame = CGRectMake((64-15)/2,5,15,44);
[_tabbarViewaddSubview:_sliderView];
}
2、直接修改系统自带的UITabbar (适用iOS 5—iOS 7)
修改背景颜色:
//设置tabbar的背景色
UIView *bgView = [[UIViewalloc]initWithFrame:CGRectMake(0,0,320,49)];
bgView.backgroundColor = [UIColororangeColor];
[self.tabBarinsertSubview:bgViewatIndex:1];
self.tabBar.opaque = YES;
然后设置图片
UITabBarItem *item1 = [[UITabBarItemalloc]initWithTitle:@"会话"image:niltag:2];
[item1 setFinishedSelectedImage:[UIImageimageNamed:@"com_icon_hover"]withFinishedUnselectedImage:[UIImageimageNamed:@"com_icon"]];
firstVC.tabBarItem = item1;
3、直接修改系统自带的UITabbar (适用iOS 7以上)
//设置tabbar的背景色
UIView *bgView = [[UIViewalloc]initWithFrame:CGRectMake(0,0,320,49)];
bgView.backgroundColor = [UIColororangeColor];
[self.tabBarinsertSubview:bgViewatIndex:1];
self.tabBar.opaque = YES;
UIImage *image1 = [[UIImageimageNamed:@"com_icon"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *image1Selected = [[UIImageimageNamed:@"com_icon_hover"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UITabBarItem *item1 = [[UITabBarItemalloc]initWithTitle:nilimage:image1selectedImage:image1Selected];
firstVC.tabBarItem = item1;
这里关键是要设置图片的 RenderingMode.
附:
中间大图标,无封装。
中间大图标present,有封装。
仿咸鱼的tabbar,通过hitTest方法拦截。