UITabBar使用小结

一、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方法拦截。

你可能感兴趣的:(UITabBar使用小结)