自定义UITabbarController
最近使用新浪微博的图片模仿他的界面做了一个demo。在做新浪微博demo的时候第一个问题就时定制它下面的底部选项卡菜单(UITabBar)。因为系统提供给我们的UITabBar很多样式不能随意更改。那只能自定义了。下面我会介绍如何来自定义UITabBar
1、首先我们要定义UITabItem 的实体
UITabItem 就是每一个选项。。该选项有那些元素呢？
标题、图片、选中后的图片、标题的字体、选中后显示的ViewController.
确定了以上元素后。。开始动手创造实体。
CTTabBarItem.h
//// weibo // // Created by 王 强 on 13-8-8. // Copyright (c) 2013年 王 强. All rights reserved. // #import <Foundation/Foundation.h> @interface CTTabBarItem : NSObject { } @property (nonatomic,retain) NSString * name; @property (nonatomic,retain) UIImage * img; @property (nonatomic,readonly) UIFont *fontSize; @property (nonatomic,retain) UIImage * checkedimg; @property (nonatomic,readonly) UIViewController * viewController; -(id)initWithName:(NSString *) aname aImg:(UIImage *) aimag checkedImg:(UIImage *) acheckedimg; /** aname 按钮标题 aimg 按钮图标 checkedImg 选中时的图标 viewController 选中时视图区域的显示。 */ -(id)initWithName:(NSString *) aname aImg:(UIImage *) aimag checkedImg:(UIImage *) acheckedimg ViewController :(UIViewController *) aviewController; // 设置选中时的视图区域 -(void)setViewController:(UIViewController *)aviewController; @end
CTTabBarItem.m
// // CTTabBarButton.m // weibo // // Created by 王 强 on 13-8-8. // Copyright (c) 2013年 王 强. All rights reserved. // #import "CTTabBarItem.h" @implementation CTTabBarItem @synthesize img,checkedimg,name,fontSize,viewController; -(id)initWithName:(NSString *)aname aImg:(UIImage *)aimag checkedImg:(UIImage *)acheckedimg { if(self = [super init]){ img = aimag; name = aname; fontSize = [UIFont systemFontOfSize:10.0f]; checkedimg = acheckedimg; viewController = [[UIViewController alloc] init]; viewController.view.backgroundColor = [UIColor whiteColor]; viewController.view.frame = CGRectMake(0, 0, 320, 416); } return self; } -(id)initWithName:(NSString *)aname aImg:(UIImage *)aimag checkedImg:(UIImage *)acheckedimg ViewController:(UIViewController *)aviewController { if(self = [super init]){ img = aimag; name = aname; fontSize = [UIFont systemFontOfSize:10.0f]; checkedimg = acheckedimg; viewController = aviewController; viewController.view.frame = CGRectMake(0, 0, 320, 416); } return self; } -(void)setViewController:(UIViewController *)aviewController { viewController = aviewController; viewController.view.frame = CGRectMake(0, 0, 320, 416); } @end
实体文件完成后我们增加一个CTTabBarView 的类。它将会帮我们完成tabbar的背景、和初始化各项barItem。并控制barItem的切换效果。看代码：
CTTabBarView.h
// // CTTabBarViewController.h // weibo // // Created by 王 强 on 13-8-8. // Copyright (c) 2013年 王 强. All rights reserved. // #import <UIKit/UIKit.h> #import "CTTabBarItem.h" @protocol CTTabBarViewDelegate <NSObject> //btn 被点击的button item 被点击button的 数据源 @required -(void) clickButton : (UIButton *) btn TabBarButton : (CTTabBarItem *) item; @end @interface CTTabBarView : UIView { NSMutableArray * _showbtn; float avgWidth; int itemcount; int selectedIndex; float foolWidth; } @property(nonatomic,retain) NSMutableArray * buttons; @property(nonatomic,retain) UIView * superView; @property(nonatomic,retain)UIView * checkView; @property(nonatomic,retain)id <CTTabBarViewDelegate> delegate; -(id)initWithColor :(UIColor *) color Buttons :(NSArray *)buttons SuperView :(UIView *) asuperView; -(id)initWithImage :(UIImage *) aimg Buttons :(NSArray *)abuttons SuperView :(UIView *) asuperView; -(void)checkedButton:(UIButton *) sender; @end
CTTabBarView.m
// // CTTabBarViewController.m // weibo // // Created by 王 强 on 13-8-8. // Copyright (c) 2013年 王 强. All rights reserved. // #import "CTTabBarView.h" @interface CTTabBarView () @end @implementation CTTabBarView @synthesize buttons,checkView,superView; @synthesize delegate; -(id) initWithColor:(UIColor *)color Buttons:(NSArray *)btns SuperView:(UIView *)asuperView { if(self = [super init]) { //背景初始化 self.superView = asuperView; self.backgroundColor = color; //按钮数据初始化 self.buttons = [[NSMutableArray alloc]initWithArray:btns]; _showbtn = [[NSMutableArray alloc ]init]; //背景位置 CGRect frame = CGRectMake(0, 416, 320, 45); self.frame = frame; // 选中的视图初始化 checkView = [[UIView alloc ]init]; selectedIndex = 0; itemcount = [buttons count]; foolWidth = self.frame.size.width; avgWidth = foolWidth / itemcount - 0; [self selectedViewStyle]; [self putButtons]; [self showButtons]; CTTabBarItem * tmpb = buttons[selectedIndex]; [superView addSubview:tmpb.viewController.view]; // [self changeTab:1]; } return self; } -(id)initWithImage:(UIImage *)aimg Buttons:(NSArray *)abuttons SuperView:(UIView *)asuperView { UIColor * c = [[UIColor alloc ] initWithPatternImage:aimg]; if(self = [self initWithColor:c Buttons:abuttons SuperView:asuperView]) { } return self; } -(void) selectedViewStyle { UIImage * im = [UIImage imageNamed:@"tabbar_slider.png"]; CGRect frame = CGRectMake(avgWidth * selectedIndex, 0, avgWidth, 44); checkView.frame = frame; UIColor * c = [[UIColor alloc ]initWithPatternImage:im]; checkView.backgroundColor = c; // checkView.alpha = 0.4; [self addSubview:self.checkView]; } /** 装载buttons */ -(void) putButtons { for (int i = 0; i<itemcount; i++) { CTTabBarItem * tmpb = [self.buttons objectAtIndex:i]; UIButton * btn = [[UIButton alloc ] initWithFrame:CGRectMake(avgWidth * i, 0, avgWidth, 44)]; [btn setImage:tmpb.img forState:UIControlStateNormal]; [btn setImage:tmpb.checkedimg forState:UIControlStateHighlighted]; btn.tag = i; [btn setTitle:tmpb.name forState:UIControlStateNormal]; [btn addTarget:self action:@selector(checkedButton:) forControlEvents:UIControlEventTouchUpInside]; [btn.titleLabel setFont:tmpb.fontSize]; [btn setImageEdgeInsets:UIEdgeInsetsMake(-15, 14, 0, 16)]; [btn setTitleEdgeInsets:UIEdgeInsetsMake(20, -36, 0, -5)]; [_showbtn addObject:btn]; } CTTabBarItem * tmpb = buttons[selectedIndex]; [_showbtn[selectedIndex] setImage: tmpb.checkedimg forState:UIControlStateNormal]; } /** show出buttons */ -(void)showButtons { for (id o in _showbtn) { // [self.view addSubview:]; [self addSubview:o]; } } /** buttons的触发事件 */ -(void)checkedButton : (UIButton *) sender { [self changeTab:sender.tag]; [delegate clickButton:sender TabBarButton:buttons[sender.tag]]; } -(void)changeTab:(int) index { CTTabBarItem * tmpb1 = buttons[selectedIndex]; [_showbtn[selectedIndex] setImage:tmpb1.img forState:UIControlStateNormal]; selectedIndex = index; CTTabBarItem * tmpb2 = buttons[selectedIndex]; [_showbtn[selectedIndex] setImage:tmpb2.checkedimg forState:UIControlStateNormal]; [UIView beginAnimations:nil context:nil]; //设定动画持续时间 [UIView setAnimationDuration:0.1f]; CGRect frame = CGRectMake(avgWidth * selectedIndex, 0, avgWidth, 44); checkView.frame = frame; [UIView commitAnimations]; //动画结束 [superView addSubview:tmpb2.viewController.view]; //[superView presentModalViewController:tmpb2.viewController animated:NO]; } @end
