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

回家了，感觉回家的感觉太好了。今天还有件好事，MOMO得到了一份国内某游戏公司做的网页游戏的源码。刚好最近也在研究FLAH开发，不解释，研究研究研究！！！！！

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

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

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

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

#import "AppDelegate.h"

@implementation AppDelegate

- (void)dealloc
{
    [_window release];
    [super dealloc];
}

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

    [application setStatusBarOrientation:UIInterfaceOrientationLandscapeRight animated:NO];

    //创建导航条
    TTNavigator* navigator = [TTNavigator navigator];
    navigator.persistenceMode = TTNavigatorPersistenceModeAll;
    navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease];

    //TTURLMap 非常重要的一个属性
    //界面的点击切换完全取决与它的设定
    TTURLMap* map = navigator.URLMap;

    //如果须要访问wab页面的话 就必需添加
    [map from:@"*" toViewController:[TTWebController class]];

    [map from:@"tt://Tab" toModalViewController:[RootViewController class]];//入口
    [map from:@"tt://Menu" toModalViewController:[MenuViewController class]];//
    [map from:@"tt://Test" toModalViewController:[TestViewController class]];//

    if (![navigator restoreViewControllers])
    {
        //打开上面设置的url
        [navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://Tab"]];
    }

    return YES;
}

@end

RootViewController.h

#import <Foundation/Foundation.h>
#import <Three20/Three20.h>

//这个头文件一定要写 不然会有警告的错误
#import "Three20UI/Three20UI+Additions.h"

@interface RootViewController : UITabBarController

@end

RootViewController.m

#import "RootViewController.h"

@interface RootViewController ()

@end

@implementation RootViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self)
    {

    }
    return self;
}

- (void)viewDidLoad
{
    //在这里设置Tab中指向的所有ViewController的URL
    //数量是任意的，这里我写了两个
    [self setTabURLs:[NSArray arrayWithObjects:@"tt://Menu",
                      @"tt://Test",
                      nil]];

    //在这里隐藏TabBar 不然会露出黑色的背景。
    self.tabBar.hidden = YES;

    //下面是我写的两个普通的自定义图片按钮
    UIButton *test0 = [UIButton buttonWithType:UIButtonTypeCustom];
    [test0 setFrame: CGRectMake(15, 200, 256, 49)];
    [test0 setImage: TTIMAGE(@"bundle://tabbar_history_nomal_1.png")forState:UIControlStateNormal];
    [test0 setImage:TTIMAGE(@"bundle://tabbar_history_selected_1.png") forState:UIControlStateHighlighted];
    test0.tag = 0;
    [test0 addTarget:self action:@selector(testPressed:) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:test0];

    UIButton *test1 = [UIButton buttonWithType:UIButtonTypeCustom];
    [test1 setFrame: CGRectMake(15, 250, 256, 49)];
    [test1 setImage: TTIMAGE(@"bundle://tabbar_home_nomal_1.png")forState:UIControlStateNormal];
    [test1 setImage:TTIMAGE(@"bundle://tabbar_home_selected_1.png") forState:UIControlStateHighlighted];
    test1.tag = 1;
    [test1 addTarget:self action:@selector(testPressed:) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:test1];

}

-(void)testPressed:(id)buttonID
{

    UIButton *button = (UIButton *)buttonID;

    //重要的地方在这里
    //根据点击按钮的ID来动态切换TabBar的指向，

    [self setSelectedIndex:button.tag];

}

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:NO];

}

@end

MenuViewController.m

#import "MenuViewController.h"

@interface MenuViewController ()

@end

@implementation MenuViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

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

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

    [self.view addSubview:title];

    [title release];

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 0, 120, 120)];
    label.text = @"大家好，我是若若娃娃！";
    [label setBackgroundColor: [UIColor blackColor]];
    label.textColor = [UIColor whiteColor];
    label.lineBreakMode = UILineBreakModeWordWrap;
    label.numberOfLines = 0;
    [self.view addSubview:label];
    [label release];
}

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:NO];

}

@end

TestViewController.m

#import "TestViewController.h"

@interface TestViewController ()

@end

@implementation TestViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

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

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

    [self.view addSubview:title];

    [title release];

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 0, 120, 120)];
    label.text = @"大家好，我是雨松MOMO！";
    [label setBackgroundColor: [UIColor blackColor]];
    label.textColor = [UIColor whiteColor];
    label.lineBreakMode = UILineBreakModeWordWrap;
    label.numberOfLines = 0;
    [self.view addSubview:label];
    [label release];

}

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:NO];

}

@end

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

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

- (void)makeTabBarHidden:(BOOL)hide
{
	if ( [self.view.subviews count] < 2 )
		return;

	UIView *contentView;

	if ( [[self.view.subviews objectAtIndex:0] isKindOfClass:[UITabBar class]] )
		contentView = [self.view.subviews objectAtIndex:1];
	else
		contentView = [self.view.subviews objectAtIndex:0];

	if ( hide )
	{
		contentView.frame = self.view.bounds;
	}
	else
	{
		contentView.frame = CGRectMake(self.view.bounds.origin.x,
                                       self.view.bounds.origin.y,
                                       self.view.bounds.size.width,
                                       self.view.bounds.size.height - self.tabBar.frame.size.height);
	}

	self.tabBar.hidden = hide;
}

本文固定链接: https://www.xuanyusong.com/archives/1809
转载请注明: 雨松MOMO2012年10月02日于雨松MOMO程序研究院发表

最后编辑：2012-10-03

作者：雨松MOMO

专注移动互联网，Unity3D游戏开发

站内专栏 QQ交谈腾讯微博新浪微博

捐赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

《Three20研究院之完全自定义TabBar（八）》有 17 条评论

Info说：
2014 年 5 月 20 日下午 8:47
Info…
[…]that is the finish of this report. Here you?ll discover some web pages that we think you will appreciate, just click the links over[…]…
回复
js说：
2013 年 7 月 2 日上午 8:31
写的很好，如果不再three20的环境中，不知怎么自定义呢
回复
雨松MOMO说：
2012 年 11 月 13 日上午 9:58
这个留言帧。。。。
回复
雨松MOMO说：
2012 年 11 月 13 日上午 9:58
过奖了，蛤蛤！！！
回复
aboduo说：
2012 年 11 月 7 日上午 9:48
makeTabBarHidden 此方法真巧妙，
回复
- 雨松MOMO说：
  2012 年 11 月 7 日上午 11:02
  呵呵。。
  回复
土元养殖说：
2012 年 11 月 2 日上午 2:03
写得好，赞一个博主
回复
雨松MOMO说：
2012 年 10 月 20 日上午 9:57
学无止境呵呵。。
回复
小小说：
2012 年 10 月 19 日上午 6:40
赞一下！！！
回复
- 雨松MOMO说：
  2012 年 10 月 20 日上午 9:57
  过奖了呵呵
  回复
雪龙要成长说：
2012 年 10 月 18 日下午 3:19
你好！！能不能请教ni一些问题啊～～我是新手～
回复
- 雨松MOMO说：
  2012 年 11 月 13 日上午 9:59
  当然可以啊。。。
  回复
wo说：
2012 年 10 月 10 日上午 2:17
为什么开始研究FLAH开发了。。。
回复
kuku小夭说：
2012 年 10 月 8 日上午 7:36
顶一个~ 好久没搞ios了，都生疏了，我还停留在4.2的时代呢
回复
- 雨松MOMO说：
  2012 年 10 月 8 日下午 3:27
  蛤蛤！我已经杀入IOS6 4.5.1了嚯嚯
  回复
雨松MOMO说：
2012 年 10 月 2 日下午 2:37
自己沙发，哇咔咔。。
回复

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

您可能还会对这些文章感兴趣！

《Three20研究院之完全自定义TabBar（八）》有 17 条评论

留下一个回复取消回复

您可能还会对这些文章感兴趣！

《Three20研究院之完全自定义TabBar（八）》有 17 条评论

留下一个回复 取消回复

留下一个回复取消回复