영삼이의 전문 정보 발행처

This is the approach I use for iOS 4 and 5 compatibility:

if ([toolbar respondsToSelector:@selector(setBackgroundImage:forToolbarPosition:barMetrics:)]) {
    [toolbar setBackgroundImage:[UIImage imageNamed:@"toolbar-background"] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
} else {
    [toolbar insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"toolbar-background"]] autorelease] atIndex:0];
}

For Gigster’s navigation concept it was necessary to implement a custom styled tab bar. Basically the screen is divided into three parts:

• Navigation Bar
• Tab Bar
• Content

The navigation bar has a custom background image and a fixed title with custom font. The tab bar should be directly under the navigation bar and has complete custom styling.

Basic Setup

To start off I created a new Xcode project and added a UITabBarController with three static views. Although I have XIBs for each content view, I added everything else in code. Each view has a UINavigationController so it can easily contain its own navigation stack.

Navigation Bar

An easy technique to get a custom background in a UINavigationBar is to make a cateogory. Add this code (e.g. in YourAppDelegate.m):

To get the fixed title with custom font I added a method that creates a UILabel:

Tab Bar

A little bit of frame hackery was necessary to get the tab bar right beneath the navigation bar:

To have a custom layout for the tab bar, it is necessary to subclass UITabBarController. We don’t need UIKit’s tab bar at all, so we just hide it and create our own custom tabs:

First I added a UIImageView containing a background image:

Next we want to display a tab image to indicate which tab is active:

Finally I added three buttons to trigger tab selection:

Button creation method:

Note that the buttons’ action is _buttonClicked. There we need to set the currently selected tab index in the UITabBarController.

We also want to update the tab image’s position after a tab was selected. This is what _updateTabImage is for:

Now we have a fully functioning tab bar with custom layout. You can download the full Xcode project here:MyCustomTabBar_final.zip.

Gigster in the App Store: Jump

iOS 5 Tutorial: Creating a Custom Tab Bar Controller

I'm currently revamping an iPhone app that I made for the New Student Orientation Program at Columbia University. The app has this beautiful custom tab bar that my friend designed and so I am re-implementing it for iOS 5.

I literally just spent the last three hours figuring out how to do this so hopefully I can save you all time.

Finished Product:

1. Create a New Tabbed Application.

2. Go to the MainStoryboard file and drag and drop three view controllers and connect them to the tab bar controller.

When You're Finished You Should Have Five Views Connected Like This:

Note: Go to the right sidebar and delete the title for each of the toolbar buttons as well. Like this:

3. Because this is a tutorial about creating a custom tab bar, it's not necessary to create custom view controllers so I'm just going to use the auto generated FirstViewController.m file to do all of the work.

Download These Images: here.

My friend made these and so you can just download them and add them to your project. All of the images are 64px x 49px since 320px width / 5 = 64 px, and 49 px high because we thought that looked good.

The dark blue is for when the view is selected and the light blue is for when the view is unselected.

Note: The images were hard to format in Blogger hence the mess.

4. Drag and drop the downloaded images into your project.

 5. Go to the FirstViewController.m file and add the following code below in the viewDidLoad method. The code essentially says that for each tab bar item at the index, when selected set the image to the dark blue image and when the tab bar item is unselected set it to the light blue image.

Data provided by Pastebin.com - Download Raw - See Original

1. - (void)viewDidLoad
2. {
3.     UIImage *selectedImage0 = [UIImage imageNamed:@"HomeDB.png"];
4.     UIImage *unselectedImage0 = [UIImage imageNamed:@"HomeLB.png"];
5.    
6.     UIImage *selectedImage1 = [UIImage imageNamed:@"ScheduleDB.png"];
7.     UIImage *unselectedImage1 = [UIImage imageNamed:@"ScheduleLB.png"];
8.    
9.     UIImage *selectedImage2 = [UIImage imageNamed:@"BuildingsDB.png"];
10.     UIImage *unselectedImage2 = [UIImage imageNamed:@"BuildingsLB.png"];
11.    
12.     UIImage *selectedImage3 = [UIImage imageNamed:@"InformationDB.png"];
13.     UIImage *unselectedImage3 = [UIImage imageNamed:@"InformationLB.png"];
14.    
15.     UIImage *selectedImage4 = [UIImage imageNamed:@"MoreDB.png"];
16.     UIImage *unselectedImage4 = [UIImage imageNamed:@"MoreLB.png"];
17.    
18.     UITabBar *tabBar = self.tabBarController.tabBar;
19.     UITabBarItem *item0 = [tabBar.items objectAtIndex:0];
20.     UITabBarItem *item1 = [tabBar.items objectAtIndex:1];
21.     UITabBarItem *item2 = [tabBar.items objectAtIndex:2];
22.     UITabBarItem *item3 = [tabBar.items objectAtIndex:3];
23.     UITabBarItem *item4 = [tabBar.items objectAtIndex:4];
24.    
25.     [item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:unselectedImage0];
26.     [item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:unselectedImage1];
27.     [item2 setFinishedSelectedImage:selectedImage2 withFinishedUnselectedImage:unselectedImage2];
28.     [item3 setFinishedSelectedImage:selectedImage3 withFinishedUnselectedImage:unselectedImage3];
29.     [item4 setFinishedSelectedImage:selectedImage4 withFinishedUnselectedImage:unselectedImage4];
30.     [super viewDidLoad];
31.         // Do any additional setup after loading the view, typically from a nib.
32. }
33.  

 6. Build and run and you should be good to go.

Download Project Here: here.

일반적인 경우라면 iOS에서 기본적으로 제공하는 Cell Type을 통해 구현이 가능하지만, 특별히 사용자가 디자인한데로 cell을 만들어 사용하는 방법도 있다. Interface Builder를 통해 cell xib를 만들어 customize 한 cell을 만들어 보자.

1. 프로젝트를 생성하고 "UITableViewCell" 을 상속받은 Objective-C 클래스를 생성한다.