您的位置:首页 > 产品设计 > UI/UE

Snail—UI学习之系统标签栏UITabBarController

2015-07-29 20:20 405 查看
背景条件是

有一个根控制器 继承于UITabBarController

然后 建四个UIViewController

再然后创建一个UIViewController 我们让它作为上面四个其中之一的子界面



然后再RootViewController中写入下面代码

#import "WJJRootViewController.h"
#import "WJJFirstViewController.h"
#import "WJJSecondViewController.h"
#import "WJJThirdViewController.h"
#import "WJJForthViewController.h"

@interface WJJRootViewController ()

@end

@implementation WJJRootViewController

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

/*
标签栏是比导航栏更高级的viewController 有标签栏的app首先要看有几个标签 然后创建几个UIViewController 如果UIViewController中又导航栏 则创建导航栏,让UIViewController作为导航栏的rootViewController
*/

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
[self createViewControllers];

}

- (void)createViewControllers{

//实例化每个UIViewController
WJJFirstViewController * first = [[WJJFirstViewController alloc] init];
//为每个viewController添加导航栏
UINavigationController * firstNav = [[UINavigationController alloc] initWithRootViewController:first];
//实例化first的item 系统tabBar选中是蓝色 是固定颜色 不可变
first.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"微信" image: [UIImage imageNamed:@"tab_0.png"] selectedImage:[UIImage imageNamed:@"tab_c0.png"]];

//其他三个界面同理
WJJSecondViewController * second = [[WJJSecondViewController alloc] init];
second.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"通讯录" image: [UIImage imageNamed:@"tab_1.png"] selectedImage:[UIImage imageNamed:@"tab_c1.png"]];
WJJThirdViewController * third = [[WJJThirdViewController alloc] init];
third.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"发现" image: [UIImage imageNamed:@"tab_2.png"] selectedImage:[UIImage imageNamed:@"tab_c2.png"]];
WJJForthViewController * four = [[WJJForthViewController alloc] init];
four.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"设置" image: [UIImage imageNamed:@"tab_3.png"] selectedImage:[UIImage imageNamed:@"tab_c3.png"]];

//为每个viewController添加一个导航栏

UINavigationController * secondNav = [[UINavigationController alloc] initWithRootViewController:second];
UINavigationController * thirdNav = [[UINavigationController alloc] initWithRootViewController:third];
UINavigationController * fourNav = [[UINavigationController alloc] initWithRootViewController:four];

//把创建的四个Nav 放到标签栏的容器里
self.viewControllers = @[firstNav,secondNav,thirdNav,fourNav];

//让第一个界面作为初始页面
self.selectedIndex = 0;
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end


然后为每个UIViewController初始化一个背景颜色

接下来,让第一个界面可以调到子界面 其他三个类似的做法

进入FirstViewController.m中

#import "WJJFirstViewController.h"
#import "WJJFirstChildViewController.h"

@interface WJJFirstViewController ()

@end

@implementation WJJFirstViewController

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

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor redColor];
//导航栏和标签栏 如果同时存在 再调用下面的方法 会使得导航栏标题和标签的item标题都变成下面的字符串
//self.title = @"我是Snail";
//所以该使用下面的语句为导航栏添加标题
self.navigationController.title = @"Snail";
//模拟在微信两字的右上角 显示有几天未读信息
self.tabBarItem.badgeValue = @"5";
[self createButton];
}

//为第一个界面 添加一个子界面 WJJFirstChildViewController.m
- (void)createButton{

UIButton * rightButton = [UIButton buttonWithType:UIButtonTypeSystem];
rightButton.frame = CGRectMake(0, 0, 50, 20);
[rightButton setTitle:@"下一页" forState:UIControlStateNormal];
[rightButton addTarget:self action:@selector(nextPage) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem * rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rightButton];
self.navigationItem.rightBarButtonItem = rightBarButtonItem;
}

- (void)nextPage{

WJJFirstChildViewController * child = [[WJJFirstChildViewController alloc] init];
[self.navigationController pushViewController:child animated:YES];

}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end


然后进入到FirstViewController的子界面FirstChildViewController.m中

#import "WJJFirstChildViewController.h"

@interface WJJFirstChildViewController ()

@end

@implementation WJJFirstChildViewController

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

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor cyanColor];
}

//调用周期函数 在进入这个子界面的时候 标签栏隐藏
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
self.tabBarController.tabBar.hidden = YES;
}

//此页面消失时 标签栏显示
- (void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];
self.tabBarController.tabBar.hidden = NO;
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end


效果图如下:主界面跳转





跳转到子界面中

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: