Three20研究院之完全自定义TabBar（八）

今天雨松MOMO给大家讲讲如何在Three20中自定义TabBar，如下图所示，IOS源生的TabBar中的图片必需是这种无彩图，如果添加有色图片时将无法显示。 如果要学习源生的TabBar的话大家可以参考我之前的文章：Three20研究院之TabBar与下拉列表访问数据与刷新（五）

下面我们学习如何在Three20中自定义TabBar。代码其实非常非常简单，就是在界面绘制几个自定义按钮，然后当点击按钮后切换TabBar的item。如下图所示，雨松MOMO写了一个简单的例子，“历史”与“主页”按钮，点击后将使用TabBar切换item进入各自的ViewController。

下面就直接上代码，大家仔细看看应该都能懂，核心的代码其实就几行。

AppDelegate.m 这个类没什么说的。

01	#import "AppDelegate.h"

02

03	@implementation AppDelegate

04

05	- (void)dealloc

06

{

07	[_window release];

08	[super dealloc];

09

}

10

11	- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

12

{

13

14	[application setStatusBarOrientation:UIInterfaceOrientationLandscapeRight animated:NO];

15

16

//创建导航条

17	TTNavigator* navigator = [TTNavigator navigator];

18	navigator.persistenceMode = TTNavigatorPersistenceModeAll;

19	navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease];

20

21	//TTURLMap 非常重要的一个属性

22	//界面的点击切换完全取决与它的设定

23	TTURLMap* map = navigator.URLMap;

24

25	//如果须要访问wab页面的话 就必需添加

26	[map from:@"*"toViewController:[TTWebControllerclass]];

27

28	[map from:@"tt://Tab"toModalViewController:[RootViewControllerclass]];//入口

29	[map from:@"tt://Menu"toModalViewController:[MenuViewControllerclass]];//

30	[map from:@"tt://Test"toModalViewController:[TestViewControllerclass]];//

31

32	if(![navigator restoreViewControllers])

33

{

34	//打开上面设置的url

35	[navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://Tab"]];

36

}

37

38	returnYES;

39

}

40

41

@end

RootViewController.h

1	#import <Foundation/Foundation.h>

2	#import <Three20/Three20.h>

3

4	//这个头文件一定要写 不然会有警告的错误

5	#import "Three20UI/Three20UI+Additions.h"

6

7	@interface RootViewController : UITabBarController

8

9

@end

RootViewController.m

01	#import "RootViewController.h"

02

03	@interface RootViewController ()

04

05

@end

06

07	@implementation RootViewController

08

09	- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

10

{

11	self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];

12

if(self)

13

{

14

15

}

16	returnself;

17

}

18

19	- (void)viewDidLoad

20

{

21	//在这里设置Tab中指向的所有ViewController的URL

22	//数量是任意的，这里我写了两个

23	[self setTabURLs:[NSArray arrayWithObjects:@"tt://Menu",

24	@"tt://Test",

25

nil]];

26

27	//在这里隐藏TabBar 不然会露出黑色的背景。

28	self.tabBar.hidden = YES;

29

30	//下面是我写的两个普通的自定义图片按钮

31	UIButton *test0 = [UIButton buttonWithType:UIButtonTypeCustom];

32	[test0 setFrame: CGRectMake(15, 200, 256, 49)];

33	[test0 setImage: TTIMAGE(@"bundle://tabbar_history_nomal_1.png")forState:UIControlStateNormal];

34	[test0 setImage:TTIMAGE(@"bundle://tabbar_history_selected_1.png") forState:UIControlStateHighlighted];

35	test0.tag = 0;

36	[test0 addTarget:self action:@selector(testPressed:) forControlEvents:UIControlEventTouchDown];

37	[self.view addSubview:test0];

38

39	UIButton *test1 = [UIButton buttonWithType:UIButtonTypeCustom];

40	[test1 setFrame: CGRectMake(15, 250, 256, 49)];

41	[test1 setImage: TTIMAGE(@"bundle://tabbar_home_nomal_1.png")forState:UIControlStateNormal];

42	[test1 setImage:TTIMAGE(@"bundle://tabbar_home_selected_1.png") forState:UIControlStateHighlighted];

43	test1.tag = 1;

44	[test1 addTarget:self action:@selector(testPressed:) forControlEvents:UIControlEventTouchDown];

45	[self.view addSubview:test1];

46

47

}

48

49	-(void)testPressed:(id)buttonID

50

{

51

52	UIButton *button = (UIButton *)buttonID;

53

54	//重要的地方在这里

55	//根据点击按钮的ID来动态切换TabBar的指向，

56

57	[self setSelectedIndex:button.tag];

58

59

}

60

61	-(void)viewWillAppear:(BOOL)animated

62

{

63	[super viewWillAppear:animated];

64	[self.navigationController setNavigationBarHidden:YES animated:NO];

65

66

}

67

68

@end

MenuViewController.m

01	#import "MenuViewController.h"

02

03	@interface MenuViewController ()

04

05

@end

06

07	@implementation MenuViewController

08

09	- (void)viewDidLoad

10

{

11	[super viewDidLoad];

12

13	UIImageView *title = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 120, 120)];

14

15	title.image = TTIMAGE(@"bundle://1.JPG");

16

17	[self.view addSubview:title];

18

19	[title release];

20

21	UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 0, 120, 120)];

22	label.text = @"大家好，我是若若娃娃！";

23	[label setBackgroundColor: [UIColor blackColor]];

24	label.textColor = [UIColor whiteColor];

25	label.lineBreakMode = UILineBreakModeWordWrap;

26	label.numberOfLines = 0;

27	[self.view addSubview:label];

28	[label release];

29

}

30

31	-(void)viewWillAppear:(BOOL)animated

32

{

33	[super viewWillAppear:animated];

34	[self.navigationController setNavigationBarHidden:YES animated:NO];

35

36

}

37

38

@end

TestViewController.m

01	#import "TestViewController.h"

02

03	@interface TestViewController ()

04

05

@end

06

07	@implementation TestViewController

08

09	- (void)viewDidLoad

10

{

11	[super viewDidLoad];

12

13	UIImageView *title = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 120, 120)];

14

15	title.image = TTIMAGE(@"bundle://0.JPG");

16

17	[self.view addSubview:title];

18

19	[title release];

20

21	UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 0, 120, 120)];

22	label.text = @"大家好，我是雨松MOMO！";

23	[label setBackgroundColor: [UIColor blackColor]];

24	label.textColor = [UIColor whiteColor];

25	label.lineBreakMode = UILineBreakModeWordWrap;

26	label.numberOfLines = 0;

27	[self.view addSubview:label];

28	[label release];

29

30

}

31

32	-(void)viewWillAppear:(BOOL)animated

33

{

34	[super viewWillAppear:animated];

35	[self.navigationController setNavigationBarHidden:YES animated:NO];

36

37

}

38

39

@end

怎么样？挺较简单的吧，嘿嘿！因为比较简单，源码工程我就不放出了，大家仔细看看博文就应该能理解。写完博客趁着家里人睡着了MOMO得开始玩暗黑3啦，嘿嘿。在家里比较受限制，干什么家人都会问一句为什么，很不爽啊。。

上述的方法如果在子viewcontroller中是会被挡住的。如果彻底的想把tabBar隐藏可以使用如下的方法。

01	- (void)makeTabBarHidden:(BOOL)hide

02

{

03	if( [self.view.subviews count] < 2 )

04

return;

05

06	UIView *contentView;

07

08	if( [[self.view.subviews objectAtIndex:0] isKindOfClass:[UITabBarclass]] )

09	contentView = [self.view.subviews objectAtIndex:1];

10

else

11	contentView = [self.view.subviews objectAtIndex:0];

12

13	if( hide )

14

{

15	contentView.frame = self.view.bounds;

16

}

17

else

18

{

19	contentView.frame = CGRectMake(self.view.bounds.origin.x,

20	self.view.bounds.origin.y,

21	self.view.bounds.size.width,

22	self.view.bounds.size.height - self.tabBar.frame.size.height);

23

}

24

25	self.tabBar.hidden = hide;

26

}