http://www.iphonedevcentral.com/create-uitabbarcontroller/
Create a UITabBarController from scratch
Tab bar based apps are probably as common as table-based apps and it’s even more common to see them combined. That’s what we’re going to do in this tutorial.
There is a very easy way of creating a tab bar application. In fact, it’s so easy it requires no work whatsoever. When you choose to create a new iPhone application in Xcode, one of the options is
Tab Bar Application.
Just the bare-bones template provided by Apple gives you a fully-functioning app with two tabs. That is not what this tutorial will be about. We are going to create a tab bar controller programatically. It’s really a lot easier than most people think.
Prerequisites
This tutorial is a continuation of my
previous tutorials
so if you haven’t followed them, it’s a good time to catch up.
We’re going to be starting off from a slightly modified version of the previous source code. You can download the primer code for this tutorial here:MyDVDLibrary04Primer
. The only changes made were some name changes (DetailViewController
became
DvdInfoViewController
) and I organized all classes into groups.
Also, I’ve recently upgraded to OS X Snow Leopard + Xcode 3.2 with iPhone SDK 3.0 (not 3.1 yet) so the project was compiled on that platform.
1. Create DetailViewTabBarController class
We’re going to add a view controller that will create a tab bar controller with three tabs: Info, Stats and Borrowers. Each of the tabs will be a separate, self-contained view controller. We already created one of them,
DvdInfoViewController
, which was previously called
DetailViewController
. The reason I renamed it is that the real detail view controller will now be our tab bar controller.
In Xcode, right-click on the
View Controllers
folder from the the
Groups & Files
panel on the left and choose
Add -> New File
. Choose
UIViewController subclass
from the
Cocoa Touch Class section
and click
Next
. Name the file
DetailViewTabBarController
.
Note: You may be wondering why we didn’t choose a UITabBarController subclass instead. As you can see that option wasn’t even offered. This is because UITabBarController is not meant to be subclassed. Instead, we create a generic view controller to which a tab bar controller will be assigned.
2. Create DvdStatsViewController and DvdBorrowersViewController
These are the new view controllers I mentioned previously. We already have our
DvdInfoViewController
that will be in the first tab, so let’s create the remaining two.
In Xcode, right-click on the View Controllers
folder and choose Add -> New File
. Choose UIViewController subclass
and name the file DvdStatsViewController
.
To create
DvdBorrowersViewController
do the same thing, only name it
DvdBorrowersViewController
.
That’s it about those two controllers for now. I’m not going to cover actually filling them with any content since that’s not the point of this tutorial. We will leave them here as placeholders for future tutorials when we cover Core Data and RSS feed processing.
3. Set up DetailViewTabBarController
Since we’re going to be coming to the tab bar controller from the
RootViewController
, we need to pass it DVD info from the row that was tapped. We can do that in a custom init method in
DetailViewTabBarController
. You’ll see how it’s used later when we instantiate it in
didSelectRowAtIndexPath
method ofRootViewController
.
We’re also going to need a handle on the data about the DVD that was tapped on the front page.
Declare it all in
DetailViewTabBarController.h
@interface DetailViewTabBarController : UIViewController {
NSDictionary *dvdData;
}
-(id)initWithDvdData:(NSDictionary *)data;
@end
Next, let’s define
initWithDvdData
in
DetailViewTabBarController.m
-(id)initWithDvdData:(NSDictionary *)data {
if (self = [super init]) {
dvdData = data;
}
return self;
}
All we’re doing here is setting local instance variable
dvdData
to whatever is passed in. We now have a handle on the DVD data and can use it across all the view controllers.
4. Implement loadView method in DetailViewTabBarController
loadView
is a method on UIViewController that can be overridden in case you want to build your view from ground up. That’s exactly what we want to do so let’s override
loadView
now. Let’s discuss it piece by piece;
- (void)loadView {
UIView *contentView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
contentView.backgroundColor = [UIColor whiteColor];
self.view = contentView;
[contentView release];
Borrowing the biblical line; in the beginning there was nothing, we need a base view to build upon. So we created an empty view with a white background that takes up the whole screen. We will attach all the other views to it.
Now we need to instantiate all three of our controllers. Each one will become one tab in the tab view.
// Declare all three view controllers
DvdInfoViewController *dvdInfoController = [[DvdInfoViewController alloc]
initWithDvdData:dvdData
nibName:@"DetailViewController" bundle:[NSBundle mainBundle]];
DvdStatsViewController *dvdStatsViewController = [[DvdStatsViewController alloc] init];
DvdBorrowersViewController *dvdBorrowersViewController = [[DvdBorrowersViewController alloc] init];
// Set a title for each view controller. These will also be names of each tab
dvdInfoController.title = @"Info";
dvdStatsViewController.title = @"Stats";
dvdBorrowersViewController.title = @"Borrowers";
You see the
dvdInfoController
is initialized the same way we did it before in
RootViewController
. We pass it
dvdData
that we get from our custom initialization method.
Now the meat of this method, let’s create the actual tab bar controller and give it the three view controllers. You can note that we’re setting the bounding frame to be 320 pixels wide and 460 pixels high. We shave off 20 pixels because the title bar is already taking up, well, 20 pixels.
UITabBarController creates tabs when you call setViewControllers on it and pass it an array with your controllers in it. That’s what’s happening here.
// Create an empty tab controller and set it to fill the screen minus the top title bar
UITabBarController *tabBarController = [[UITabBarController alloc] init];
tabBarController.view.frame = CGRectMake(0, 0, 320, 460);
// Set each tab to show an appropriate view controller
[tabBarController setViewControllers:
[NSArray arrayWithObjects:dvdInfoController, dvdStatsViewController, dvdBorrowersViewController, nil]];
And finally, let’s clean up objects we no longer need from memory and add the tab controller view to our parent view so we can actually see it.
// Clean up objects we don't need anymore
[dvdInfoController release];
[dvdStatsViewController release];
[dvdBorrowersViewController release];
// Finally, add the tab controller view to the parent view
[self.view addSubview:tabBarController.view];
}
5. Modify RootViewController’s didSelectRowAtIndexPath method to display DetailViewTabBarController
The last step we need to take is to modify
didSelectRowAtIndexPath
in
RootViewController
to display our newly created tab bar controller instead of theDvdInfoViewController
we showed in the last tutorial.
Open up
RootViewController.m
and modify
didSelectRowAtIndexPath
to look like this:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
DetailViewTabBarController *controller = [[DetailViewTabBarController alloc]
initWithDvdData:[dao libraryItemAtIndex:indexPath.row]];
controller.title = [[dao libraryItemAtIndex:indexPath.row] valueForKey:@"title"];
[self.navigationController pushViewController:controller animated:YES];
[controller release];
}
At this point, you can run your project and tapping on a DVD title should take you to the tab bar controller which has three tabs. The first tab contains the movie info, the remaining two are empty. As I mentioned before, we’ll fill those in in the later tutorials or it can be left as an exercise for the reader.
6. Add icon to tabs
The tabs now only have a textual title. Let’s make it prettier by adding an icon to each of them. I only use one image (included in the project) for demonstration purposes but you can have a different image for each tab. The image should be 32×32 pixels PNG file. You don’t need to to create the pretty, shiny, gray and blue images. Just pass it a normal image and the SDK will do the rest.
Add this in the
loadView
method in
DetailViewTabBarViewController.m
implementation file right after we set the titles of the controllers:
// Set a title for each view controller. These will also be names of each tab
dvdInfoController.title = @"Info";
dvdStatsViewController.title = @"Stats";
dvdBorrowersViewController.title = @"Borrowers";
dvdInfoController.tabBarItem.image = [UIImage imageNamed:@"dvdicon.png"];
dvdStatsViewController.tabBarItem.image = [UIImage imageNamed:@"dvdicon.png"];
dvdBorrowersViewController.tabBarItem.image = [UIImage imageNamed:@"dvdicon.png"];
If everything went well, you should see your app looking like this
Conclusion
While it may seem easier to create everything in the Interface Builder, you can see that in this case creating a tab bar controller was a breeze. Adding new tabs/view controllers to it is as easy as adding an object to an array. I hope this tutorial connecting the dots how to go from a table view to a tab bar view in a navigation-based application.
You can download the complete source code to this tutorial here:
My DVD Library Tutorial 4
分享到:
相关推荐
很多时候我们创建一个基于UITabBarController的application以后还希望能够在每个tab view都可以实现导航控制,即添加一个UINavigationController来实现tabview内部的view之间的切换,这即是本文所要介绍的。
iOS-Swift-UITabBarController-Demo方便学习的UITabBarController应用使用了全局navigationController的应用加入了iconfonts的使用,用来制作图标有一个Transform的动画可供学习自定义了Tabbar样式Swift语言
最少仅需两行代码(可使用Storyboard)创建自定义UITabBar样式 多种可DIY参数(UITabBar高度, Badge颜色大小位置, 小圆点, 滑动滑块)等等 有详细的Demo, Objective-C项目的两个, Swift项目的一个 ...
在iOS开发中,`UITabBarController` 是一个非常常见的组件,用于实现底部标签栏导航。在实际项目中,为了满足个性化需求,我们往往需要对它进行定制,使其更符合应用的风格和交互设计。"ios-自定义...
在iOS应用开发中,`UITabBarController`是一个非常常见的组件,用于展示多个子视图控制器,通常以底部的标签栏形式呈现。然而,当需要显示的子控制器超过屏幕能容纳的数量时,`UITabBarController`会自动将超出的项...
自定义UITabBarController
在iOS应用开发中,`UITabBarController`是一个非常重要的组件,它是苹果提供的UI控制器,用于实现底部标签栏的切换效果,通常包含多个`UIViewController`的实例,每个实例代表一个标签页。Swift作为苹果官方推荐的...
iOS Object-C 自定义封装成 和 UITabBarView一样的功能。主要体现在 UITabBar样式上,可以随意修改 继承UITabBarController 写的 管理切换控制器 主要是写 UITabBar样式是 继承UIView
在iOS应用开发中,`UITabBarController` 是一个非常重要的组件,它允许用户在多个视图控制器之间切换,每个视图控制器通常代表应用的一个主要功能。`UITabBar` 是`UITabBarController`的一部分,显示在屏幕底部,...
在iOS应用开发中,Swift是一种常用的编程语言,用于构建用户界面和实现功能。在这个"ios-Swift ----- tabar,tableview,collection,页面间传值.zip"的压缩包中,我们可以看到开发者分享了如何使用Swift来实现四个...
总而言之,这个斯坦福大学的iOS iPhone开发教程全面覆盖了从编程基础到高级特性的各个环节,无论你是刚接触iOS开发的新手,还是希望深化技能的开发者,都能从中受益匪浅。通过深入学习并实践这些知识,你将有能力...
在iOS应用开发中,`UINavigationController`和`UITabBarController`是两个核心的控制器,用于构建常见的用户界面结构。它们分别是导航栈和标签页切换器,但有时开发者可能需要根据应用的需求进行定制,以实现独特的...
在iOS应用开发中,UITabBarController是苹果提供的一个标准组件,用于实现底部标签栏的切换效果,方便用户在多个视图控制器间进行导航。然而,系统默认的UITabBarController有时不能满足开发者对于个性化和功能扩展...