(转)IOS自定义UITabBar

最新推荐文章于 2024-07-18 13:49:49 发布

au_william

最新推荐文章于 2024-07-18 13:49:49 发布

阅读量675

点赞数

搞IOS开发的都知道，系统自带的UITabBar功能有限，默认的就是切换页面，那种弹出菜单啥的都不支持，而且可控制程度很低，样式修改也麻烦等等一堆问题。在经历了公司第一个项目那抹布一样的界面之后，决定将各组件全自定义一遍，不说多么花哨，但至少要看着顺眼。OK 开工

首先自定义一个控制器类 MyTabBarController，代码如下（包含了注释，将就看吧）：

// MyTabBarViewController.h

// newIosMobile

// Created by xoHome on 13-1-31.

#import <UIKit/UIKit.h>

#import "MyTabBar.h"

#import "MyTabBarItem.h"

#define MyTabBarStyle int

#define MyTabBarStyleViewController 1

#define MyTabBarStyleClick 2

@interface MyTabBarController : UIViewController {

// UITabBar View

MyTabBar *tabBar;

// MainView, 包含BodyView和其它追加View

UIView *mainView;

// Body View

UIView *bodyView;

// UIViewController集合

NSMutableArray *viewControllers;

// 当前显示UIViewController下标

int selectedIndex;

// 显示最大元素

int maxItems;

// 回调delegate

id delegate;

}

@property(nonatomic, readonly) MyTabBar *tabBar;

@property(nonatomic, readonly) UIView *mainView;

@property(nonatomic) int selectedIndex;

@property(nonatomic, retain) id delegate;

// 根据类型添加视图,viewControllers集合为存放容器

// tabBar数量最大值为maxItems

- (void) addViewController:(UIViewController *)controller resource:(MyTabBarItem *)resource;

// 添加非Controller视图

- (void) addEventTabItem:(MyTabBarItem *)resource;

// 添加完成,执行绘制

- (void) addDone;

// 返回指定下标TabBar样式

- (MyTabBarStyle) tabBarStyle:(int)index;

// 选择事件处理

- (void) didSelectItem:(id)sender;

@end

@protocol MyTabBarControllerDelegate <NSObject>

@optional

- (void) myTabBarController:(MyTabBarController *)tabBarController didSelectViewController:(id)viewController index:(int)index;

@end

对应m文件为：

001

002

// MyTabBarViewController.m

003

// newIosMobile

004

// 自定义UITabBar

005

// Created by xoHome on 13-1-31.

006

007

008

009

#import "MyTabBarController.h"

010

011

@interface MyTabBarController ()

012

013

@end

014

015

@implementation MyTabBarController

016

017

@synthesize tabBar;

018

@synthesize mainView;

019

@synthesize selectedIndex;

020

@synthesize delegate;

021

022

- (id) init {

023

self = [super init];

024

025

selectedIndex = -1;

026

maxItems = 5;

027

viewControllers = [[NSMutableArray alloc] initWithCapacity:maxItems];

028

029

self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];

030

031

tabBar = [[MyTabBar alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 49, self.view.frame.size.width, 49)];

032

tabBar.controller = self;

033

034

mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 49)];

035

[self.view addSubview:mainView];

036

037

bodyView = [[UIView alloc] initWithFrame:mainView.frame];

038

[mainView addSubview:bodyView];

039

040

[self.view addSubview:tabBar];

041

042

return self;

043

}

044

045

- (void) addDone {

046

// 生成UI

047

NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:viewControllers.count];

048

for(NSDictionary *item in viewControllers) {

049

[items addObject:[item objectForKey:@"resource"]];

050

}

051

[tabBar addTabItems:items];

052

[items release];

053

054

// 默认显示第一项

055

for(int i=0; i<viewControllers.count; i++) {

056

if([[[viewControllers objectAtIndex:i] objectForKey:@"style"] intValue] == MyTabBarStyleViewController) {

057

[self didSelectItemByIndex:i];

058

break;

059

}

060

}

061

}

062

063

- (void) addViewController:(UIViewController *)controller resource:(MyTabBarItem *)resource{

064

if(viewControllers.count >= maxItems) {

065

// 包含Controller数量达到规定maxItems则不操作

066

return;

067

}

068

[self addItem:controller resource:resource style:MyTabBarStyleViewController];

069

}

070

071

- (void) addEventTabItem:(MyTabBarItem *)resource {

072

[self addItem:nil resource:resource style:MyTabBarStyleClick];

073

}

074

075

// 添加视图公共方法

076

- (void) addItem:(id)item resource:(MyTabBarItem *)resource style:(MyTabBarStyle)style {

077

id temp = item == nil ? [NSNull null] : item;

078

NSDictionary *tabItem = [NSDictionary dictionaryWithObjectsAndKeys:temp, @"controller", [NSNumber numberWithInt:style], @"style", resource, @"resource", nil];

079

[viewControllers addObject:tabItem];

080

}

081

082

- (MyTabBarStyle) tabBarStyle:(int)index {

083

if(index >= viewControllers.count) {

084

return -1;

085

}

086

return [[[viewControllers objectAtIndex:index] objectForKey:@"style"] intValue];

087

}

088

089

- (void) didSelectItem:(id)sender {

090

int index = [sender tag];

091

[self didSelectItemByIndex:index];

092

}

093

094

- (void) didSelectItemByIndex:(int)index {

095

MyTabBarStyle style = [self tabBarStyle:index];

096

if(style == MyTabBarStyleViewController) {

097

[tabBar didSelectItem:index];

098

if(selectedIndex == index) {

099

return;

100

}

101

if(selectedIndex > -1) {

102

[[[[viewControllers objectAtIndex:selectedIndex] objectForKey:@"controller"] view] removeFromSuperview];

103

}

104

UIView *temp = [[[viewControllers objectAtIndex:index] objectForKey:@"controller"] view];

105

temp.frame = bodyView.frame;

106

[bodyView addSubview:temp];

107

selectedIndex = index;

108

}

109

// 回调delegate

110

if([delegate respondsToSelector:@selector(myTabBarController:didSelectViewController:index:)]) {

111

[delegate myTabBarController:self didSelectViewController:[[viewControllers objectAtIndex:selectedIndex]objectForKey:@"controller"] index:index];

112

}

113

}

114

115

- (void) dealloc {

116

[super dealloc];

117

[tabBar release];

118

[mainView release];

119

[bodyView release];

120

[viewControllers release];

121

[delegate release];

122

}

123

124

- (void)didReceiveMemoryWarning

125

{

126

[super didReceiveMemoryWarning];

127

}

128

129

@end

UI组件MyTabBar文件如下：

// MyTabBar.h

// newIosMobile

// Created by xoHome on 13-1-31.

#import <UIKit/UIKit.h>

@interface MyTabBar : UIView {

// Background View

UIImageView *backgroundView;

// TabItem控件集合

NSMutableArray *tabItems;

// resource集合

NSArray *resources;

// delegate

id controller;

}

@property(nonatomic, retain)id controller;

@property(nonatomic, readonly)UIImageView *backgroundView;

// 添加TabItems

- (void) addTabItems:(NSArray *)items;

- (void) didSelectItem:(int)index;

@end

// MyTabBar.m

// newIosMobile

// Created by xoHome on 13-1-31.

#import "MyTabBar.h"

#import "MyTabBarController.h"

#import "MyTabBarItemView.h"

@implementation MyTabBar

@synthesize controller;

@synthesize backgroundView;

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

backgroundView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];

[backgroundView setBackgroundColor:[UIColor blackColor]];

[self addSubview:backgroundView];

tabItems = [[NSMutableArray alloc] initWithCapacity:5];

return self;

}

- (void) addTabItems:(NSArray *)items {

resources = [items retain];

float width = self.frame.size.width / resources.count;

int index = 0;

for(MyTabBarItem *item in resources) {

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

btn.showsTouchWhenHighlighted = YES;

btn.tag = index;

btn.frame = CGRectMake(width * index, 0, width, self.frame.size.height);

[btn.titleLabel setFont:[UIFont systemFontOfSize:13]];

[btn setImage:item.iDefault forState:UIControlStateNormal];

[btn setImage:item.iHighlighted forState:UIControlStateHighlighted];

[btn setImage:item.iSeleted forState:UIControlStateSelected];

NSLog(@"%f", btn.imageView.frame.size.width);

[btn setTitle:item.text forState:UIControlStateNormal];

[btn addTarget:controller action:@selector(didSelectItem:) forControlEvents:UIControlEventTouchUpInside];

[tabItems addObject:btn];

[self addSubview:btn];*/

MyTabBarItemView *btn = [[MyTabBarItemView alloc] initWithImage:item.iDefault text:item.text frame:CGRectMake(width * index, 0, width, self.frame.size.height) deletage:controller];

btn.button.tag = index;

[tabItems addObject:btn];

[self addSubview:btn];

[btn release];

index ++;

}

- (void) dealloc {

[super dealloc];

[backgroundView release];

[tabItems release];

[controller release];

[resources release];

}

- (void) didSelectItem:(int)index {

for (int i = 0; i < tabItems.count; i++)

{

MyTabBarItemView *btn = [tabItems objectAtIndex:i];

MyTabBarItem *item = [resources objectAtIndex:i];

if(i != index) {

[btn.imageView setImage:item.iDefault];

btn.userInteractionEnabled = YES;

[btn setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"bg.png"]]];

} else {

[btn.imageView setImage:item.iHighlighted];

btn.userInteractionEnabled = NO;

[btn setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"selectedbg.png"]]];

}

@end

对于UIBarItem元素，我本来是打算用UIButton组件的，但UIButton对图片的控制不方便（比如大小位置等），所以自定义了一个 MyTabBarItemView

// MyTabBarItemView.h

// newIosMobile

// Created by xoHome on 13-2-1.

#import <UIKit/UIKit.h>

@interface MyTabBarItemView : UIView {

// 按钮

UIButton *button;

// 图片

UIImageView *imageView;

// 文字

UILabel *txt;

}

@property(nonatomic, readonly) UIImageView *imageView;

@property(nonatomic, readonly) UILabel *txt;

@property(nonatomic, readonly) UIButton *button;

- (id) initWithImage:(UIImage *)image text:(NSString *)text frame:(CGRect)frame deletage:(id)delegate;

@end

// MyTabBarItemView.m

// newIosMobile

// Created by xoHome on 13-2-1.

#import "MyTabBarItemView.h"

@implementation MyTabBarItemView

@synthesize imageView;

@synthesize txt;

@synthesize button;

- (id) initWithImage:(UIImage *)image text:(NSString *)text frame:(CGRect)frame deletage:(id)delegate {

self = [super initWithFrame:frame];

[self setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"bg.png"]]];

imageView = [[UIImageView alloc] initWithFrame:CGRectMake(frame.size.width/2-15, 7, 30, frame.size.height-25)];

[imageView setImage:image];

[self addSubview:imageView];

UIFont *font = [UIFont systemFontOfSize:12];

txt = [[UILabel alloc] initWithFrame:CGRectMake(frame.size.width/2-[text sizeWithFont:font].width/2, frame.size.height - 16, [text sizeWithFont:font].width, 15)];

[txt setFont:[UIFont systemFontOfSize:12]];

[txt setBackgroundColor:[UIColor clearColor]];

[txt setTextColor:[UIColor whiteColor]];

[txt setText:text];

[self addSubview:txt];

button = [UIButton buttonWithType:UIButtonTypeCustom];

button.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);

[button setBackgroundColor:[UIColor clearColor]];

button.showsTouchWhenHighlighted = YES;

[button addTarget:delegate action:@selector(didSelectItem:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:button];

return self;

}

- (void) dealloc {

[super dealloc];

[button release];

[imageView release];

[txt release];

}

@end

基本组件代码就是如上所述的，调用代码如下：

view sourceprint?

// ViewController.m

// newIosMobile

// Created by xoHome on 13-1-31.

#import "ViewController.h"

#import "IndexViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

tabbar = [[MyTabBarController alloc] init];

[tabbar.view setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

tabbar.delegate = self;

//tabbar.tabBar.backgroundView.image = [UIImage imageNamed:@"Table_Bar.png"];

IndexViewController *one = [[IndexViewController alloc] init];

[one.view setBackgroundColor:[UIColor redColor]];

IndexViewController *two = [[IndexViewController alloc] init];

[two.view setBackgroundColor:[UIColor blueColor]];

IndexViewController *three = [[IndexViewController alloc] init];

[three.view setBackgroundColor:[UIColor yellowColor]];

[tabbar addViewController:one resource:MyTabBarItemMake([UIImage imageNamed:@"xianhuo.png"], [UIImage imageNamed:@"xianhuo_click.png"], [UIImage imageNamed:@"xianhuo_click.png"], @"现货")];

[tabbar addViewController:two resource:MyTabBarItemMake([UIImage imageNamed:@"zixun.png"], [UIImage imageNamed:@"zixun_click.png"], [UIImage imageNamed:@"zixun_click.png"], @"资讯")];

[tabbar addViewController:three resource:MyTabBarItemMake([UIImage imageNamed:@"qihuo.png"], [UIImage imageNamed:@"qihuo_click.png"], [UIImage imageNamed:@"qihuo_click.png"], @"期货")];

[tabbar addEventTabItem:MyTabBarItemMake([UIImage imageNamed:@"more.png"], [UIImage imageNamed:@"more_click.png"], nil, @"更多")];

[tabbar addDone];

[self.view addSubview:tabbar.view];

}

// MyTabBarController的回调方法

- (void) myTabBarController:(MyTabBarController *)tabBarController didSelectViewController:(id)viewController index:(int)index {

if(index == 3) {

if(toolView == nil) {

toolView = [[UIView alloc] initWithFrame:CGRectMake(0, tabbar.mainView.frame.size.height, tabbar.mainView.frame.size.width, 100)];

[toolView setBackgroundColor:[UIColor scrollViewTexturedBackgroundColor]];

[tabbar.mainView addSubview:toolView];

[toolView setAlpha:0];