UITabBarController是在IOS应用开发中很常用的一个类,继承于UIViewController,来实现多个视图间的切换,但很多时候系统自带的TabBar不能满足我们的需求,系统自带的一些属性我们往往无法修改,像切换项的图片的大小,这时候就需要我们自定义TabBar。例如,我们想实现下方的TabBar的这个效果,使用系统的就无法完成。
演示所需图片下载地址http://download.csdn.net/detail/zsmile123/8136531
------------------------------------------------------下面演示过程-----------------------------------------------
首先,新建一个继承于UIViewController得视图控制器,随便起名为CustomTarBarViewController,勾选上xib。我们首先来布局一下TabBar,也就是模仿系统的TabBar
-----------------------------依次拖放view,imageView,以及5个button,并给5个button设置tag值为1,2,3,4,5------------------------------------------------
----------------------------------------------------------------------------------------------------
----------------------------------------CustomTarBarViewController.h文件中--------------------------------------------
#import <UIKit/UIKit.h>
@interface CustomTarBarViewController : UIViewController<UINavigationControllerDelegate >
{
//正常状态下的图片数组
NSArray *_nomalImageArray;
//高亮状态下的图片数组
NSArray *_hightlightedImageArray;
}
//添加两个属性,selectedIndex用来记录选中的是那一个视图(或button),viewControllers数组用来存放button点击对应的视图控制器
@property (nonatomic ,assign ) NSInteger selectedIndex;
@property (nonatomic ,retain ) NSArray *viewControllers;
//将xib中的view,和5个button连线
@property (retain , nonatomic ) IBOutlet UIView *tabBarView;
- ( IBAction)tabBarButtonClick:( UIButton *)sender;
@end
-----------------------------------------------------------CustomTarBarViewController.m文件中------------------------------------
- ( id)initWithNibName:( NSString *)nibNameOrNil bundle:( NSBundle *)nibBundleOrNil
{
self = [ super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if ( self) {
//这里是为了每次首次进入都能加载第一个视图
_selectedIndex = - 1 ;
}
return self ;
}
- ( void)viewDidLoad
{
[ super viewDidLoad ];
self .view .backgroundColor = [UIColor redColor ];
//正常状态下按钮图片
_nomalImageArray = [[ NSArray alloc ] initWithObjects:@"tabbar_button_binders_normal.png" ,@"tabbar_button_updates_normal.png",@"tabbar_button_centeradd.png" ,@"tabbar_button_sessions_normal.png",@"tabbar_button_notes_normal.png" , nil ];
//高亮状态下按钮图片
_hightlightedImageArray = [[ NSArray alloc ] initWithObjects:@"tabbar_button_binders_selected.png" ,@"tabbar_button_updates_selected.png",@"tabbar_button_centeradd.png" ,@"tabbar_button_sessions_selected.png",@"tabbar_button_notes_selected.png" , nil ];
if (_selectedIndex == - 1 )
{
self. selectedIndex = 0 ;
}
}
#pragma mark ---- 切换视图选项
- ( IBAction)tabBarButtonClick:( UIButton *)sender
{
// 当前选中的button self.selectedIndex 会调用set 方法,button的tag值-1即为其对应的视图
self. selectedIndex = sender. tag - 1;
}
#pragma mark ---- 重写selectedIndex 属性的set 方法
- ( void)setSelectedIndex:( NSInteger)aselectedIndex
{
//判断新的值与原来的值是否相等,相等则选择的任然是当前视图,不做处理
if (aselectedIndex == _selectedIndex)
{
return;
}
//_selectedIndex >=0 说明选中了某一按钮
if (_selectedIndex >= 0 )
{
// 需要将前一个视图移除
// 根据_selectedIndex 从视图控制器数组中取出先前选中的视图
UIViewController *previousViewController = [ _viewControllers objectAtIndex:_selectedIndex ];
[previousViewController. view removeFromSuperview];
//需要将前一个 button的图片改为普通状态的图片
UIButton *previousButton = ( UIButton *)[ self. view viewWithTag: _selectedIndex+1];
[previousButton setBackgroundImage :[ UIImage imageNamed :[_nomalImageArray objectAtIndex : _selectedIndex ]] forState :(UIControlStateNormal)];
}
// 然后将新的aselectedIndex 赋值给_selectedIndex
_selectedIndex = aselectedIndex;
// 显示新的视图
UIViewController *currentViewController = [ _viewControllers objectAtIndex:_selectedIndex];
//找到 当前button,将其 背景图片改为高亮
UIButton *currentButton = ( UIButton *)[ self. view viewWithTag: _selectedIndex +1];
[currentButton setBackgroundImage :[ UIImage imageNamed :[_hightlightedImageArray objectAtIndex : _selectedIndex ]] forState :(UIControlStateNormal )];
//由于第一个视图是加在导航中的,所以需要判断
if ([currentViewController isKindOfClass:[ UINavigationController class]])
{
// 表示这个视图是navgationController
// 设置导航的代理
(( UINavigationController *)currentViewController). delegate = self;
}
//设置当前视图的大小
currentViewController. view. frame = CGRectMake( 0, 0, 320, self. view. bounds.size. height- 44);
// 添加到tab 的view 上
[ self. view addSubview:currentViewController. view];
[ self. view sendSubviewToBack:currentViewController. view];
}
@end
--------------------------------------AppDelegate.h文件中给TabBar添加视图------------------------------------------------
#import "AppDelegate.h"
#import "CustomTarBarViewController.h"
@implementation AppDelegate
- ( BOOL)application:( UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self . window = [[ UIWindow alloc ] initWithFrame :[[ UIScreen mainScreen ] bounds ]];
self . window .backgroundColor = [UIColor whiteColor ];
[ self . window makeKeyAndVisible ];
//这里给第一个视图添加了导航,也可不添加(这里演示导航的添加)
UIViewController *homeVC = [[UIViewController alloc ] init ] ;
homeVC.view .backgroundColor = [UIColor redColor ];
UINavigationController *nav = [[[UINavigationController alloc ]initWithRootViewController :homeVC] autorelease ];
UIViewController *setVC = [[UIViewController alloc ] init ] ;
setVC.view .backgroundColor = [UIColor blueColor ];
UIViewController *shareVC = [[UIViewController alloc ] init ] ;
shareVC.view .backgroundColor = [UIColor yellowColor ];
UIViewController *plusVC = [[UIViewController alloc ] init ] ;
plusVC.view .backgroundColor = [UIColor greenColor ];
UIViewController *playVC = [[UIViewController alloc ] init ] ;
playVC.view .backgroundColor = [UIColor orangeColor ];
CustomTarBarViewController *tabVC = [[CustomTarBarViewController alloc ] init ] ;
//将视图加到tabVC中
tabVC. viewControllers = [ NSArrayarrayWithObjects:nav,setVC,shareVC,plusVC,playVC, nil];
self . window .rootViewController = tabVC;
return YES ;
}