IOS之UITabBarController,uitabbarcontroller
在學習IOS開發過程中,針對於UITabBarController的使用也不少出現,UITabBarController和UINavigationController類似,UITabBarController也可以輕鬆地管理多個控制器,輕鬆完成控制器之間的切換
使用步驟:
1初始化UITabBarController
2設定UIWindow的rootViewController為UITabBarController
3建立相應的子控制器(viewcontroller)
4把子控制器添加到UITabBarController
代碼如下
//初始化視圖控制器 UIViewController * vc1=[[UIViewController alloc] init]; vc1.view.backgroundColor=[UIColor redColor]; UIViewController * vc2=[[UIViewController alloc] init]; vc2.view.backgroundColor=[UIColor greenColor]; UIViewController * vc3=[[UIViewController alloc] init]; vc3.view.backgroundColor=[UIColor yellowColor]; UIViewController * vc4=[[UIViewController alloc] init]; vc4.view.backgroundColor=[UIColor orangeColor]; UIViewController * vc5=[[UIViewController alloc] init]; vc5.view.backgroundColor=[UIColor purpleColor]; //為tabbarController添加控制器 UITabBarController * tabVC=[[UITabBarController alloc] init]; tabVC.delegate=self; tabVC.viewControllers=@[vc1,vc2,vc3,vc4,vc5 ]; //初始化系統UITabBarItem UITabBarItem * item1=[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:101]; vc1.tabBarItem=item1; UITabBarItem * item2=[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemBookmarks tag:102]; vc2.tabBarItem=item2; //初始化帶圖片的UITabBarItem UIImage * selImage=[UIImage imageNamed:@"tabbar_cate_f"]; selImage=[selImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; UITabBarItem * item3=[[UITabBarItem alloc] initWithTitle:@"最近" image:[UIImage imageNamed:@"tabbar_cate"] selectedImage:selImage]; NSDictionary * dic=@{NSFontAttributeName:[UIFont systemFontOfSize:20],NSForegroundColorAttributeName:[UIColor redColor]}; [item3 setTitleTextAttributes:dic forState:UIControlStateSelected]; vc3.tabBarItem=item3; //初始化帶圖片的UITabBarItem UITabBarItem * item4=[[UITabBarItem alloc] initWithTitle:@"你好" image:[UIImage imageNamed:@"tabbar_fov"] tag:104]; vc4.tabBarItem=item4; UITabBarItem * item5=[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:105]; vc5.tabBarItem=item5; //將TabBarController設定為視窗的根控制器self.window.rootViewController=tabVC;
2.UITabBar自己有一些方法是可以改變自身狀態,但是對於UITabBarController內建的tabBar還是不能滿足需求的,因此們需要用到自訂
思路如下: 我們需要自訂一個tabbar,這裡我們用UIView來替代,同時我們需要在tabbar上面來增加Item,從而達到點擊控制視圖控制器的目的。Item涉及到點擊事件因此我們可以考慮用Button來完成,同時在button上面添加表徵圖和標題。
1 我們自訂類JRTabBarController.h
2 分別實現三個方法
代碼如下
#pragma mark - loadVC- (void) _loadVC{ self.tabBar.hidden=YES; //1 建立視圖控制器 JRViewController * vc1=[[JRViewController alloc] init]; UIViewController * vc2=[[UIViewController alloc] init]; vc2.view.backgroundColor=[UIColor greenColor]; UIViewController * vc3=[[UIViewController alloc] init]; vc3.view.backgroundColor=[UIColor yellowColor]; UIViewController * vc4=[[UIViewController alloc] init]; vc4.view.backgroundColor=[UIColor blueColor]; self.viewControllers=@[vc1,vc2,vc3,vc4]; }#pragma mark - _makeTabBar- (void)_makeTabBar{ //1 >定製tabbar UIView * bgview=[[UIView alloc] initWithFrame:CGRectMake(0, kHeight-49, kWidth, 49)]; bgview.backgroundColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5]; [self.view addSubview:bgview]; //2 >定製btn CGFloat space=(kWidth-2*kLeftSpace-5*kBtSize)/4.0+kBtSize; for(int i=0;i<5;i++){ NSDictionary * dic=_array[i]; //1 初始化button大小 JRButton * button= [[JRButton alloc] initWithFrame:CGRectMake(kLeftSpace+i*space, 49/2.0-kBtSize/2.0, kBtSize, kBtSize)]; //2 初始化button的標題和圖片 [button initButtonWithTitle:dic[@"title"] andImage:dic[@"image"]]; //3 為button 設定tag 和代理 button.tag=i; button.delegate=self; [bgview addSubview:button]; //4 將button 加入到數組,來調整選中背景的位置 [_btArray addObject:button]; } //3 >增加選中表徵圖 _selectView=[[UIImageView alloc] initWithFrame:CGRectMake(10, 49/2.0-(kBtSize+2)/2.0, kBtSize+4, kBtSize+4)]; UIButton * button=_btArray[0]; _selectView.center=button.center; _selectView.image=[UIImage imageNamed:@"bg"]; [bgview addSubview:_selectView]; [bgview sendSubviewToBack:_selectView]; }#pragma mark - 載入資料- (void) _loadData{ _btArray=[NSMutableArray array]; NSDictionary * dic1=@{@"title":@"電影",@"image":[UIImage imageNamed:@"movie_cinema"]}; NSDictionary * dic2=@{@"title":@"新聞",@"image":[UIImage imageNamed:@"msg_new"]}; NSDictionary * dic3=@{@"title":@"top",@"image":[UIImage imageNamed:@"star_top250"]}; NSDictionary * dic4=@{@"title":@"影院",@"image":[UIImage imageNamed:@"icon_cinema"]}; NSDictionary * dic5=@{@"title":@"更多",@"image":[UIImage imageNamed:@"more_select_setting"]}; _array=@[dic1,dic2,dic3,dic4,dic5]; }
2、這裡還有一個需要完成的功能就是點擊事件,當每個Item被點擊的時候我們需要進行視圖控制器的切換,在切換視圖控制器的同時我們還需要控制黑色背景小圖片的移動,下面我們來實現這個方法
#pragma mark - ButtonDelegate- (void)changePage:(NSInteger)index{ //1 改變選中圖片 UIButton * button=_btArray[index]; [UIView beginAnimations:nil context:nil]; _selectView.center=button.center; [UIView commitAnimations]; //2 切換視圖控制器 self.selectedIndex=index; }
3 、Item的定義,這裡我們自訂一個button用來自訂Item,分別在button上面增加圖片和標題來達到我們的效果,同時,通過代理實現控制項的控制,代碼如下:
/** * 初始化圖片和標題 * * @param title 標題 * @param image 圖片 */- (void) initButtonWithTitle:(NSString *) title andImage:(UIImage *) image{ if(self) { //1> 添加Image UIImageView * imageView=[[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width/2.0-kImageSize/2.0, 2, kImageSize, kImageSize)]; imageView.contentMode=UIViewContentModeScaleAspectFit; imageView.image=image; [self addSubview:imageView]; //2> 添加title UILabel * label=[[UILabel alloc] initWithFrame:CGRectMake(0, kImageSize, self.frame.size.width, self.frame.size.height-kImageSize)]; label.text=title; label.textColor=[UIColor whiteColor]; label.textAlignment=NSTextAlignmentCenter; label.font=[UIFont boldSystemFontOfSize:13]; [self addSubview:label]; [self addTarget:self action:@selector(showClick) forControlEvents:UIControlEventTouchUpInside]; } }
作者:傑瑞教育
出處:http://www.cnblogs.com/jerehedu/
著作權聲明:本文著作權歸煙台傑瑞教育科技有限公司和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文串連,否則保留追究法律責任的權利。
技術諮詢: