영삼이의 전문 정보 발행처

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.

http://www.iphonedevsdk.com/forum/iphone-sdk-development/3301-hide-tabbar.html

글보다는 그림(아이콘) 이 탭바에 들어가게 되면 보다 명확하게 어떤 기능을 하는

곳을 가리키는지 알려줄수 있어서 좋다. 하지만 단점이 있다. 일반 그림이 들어가게

되면 색깔정보(Opaque) 는 무시되고 이미지에 포함된 Alpha(투명색) 정보로만

표시가 된다. 그러니까 일반 그림을 넣게되면 형태만 나오게 된다.

테스트를 해보고 싶다면 투명색정보를 집어넣던지 아니면 투명색 정보가 있는

아이콘으로 해보면 될것이다. 색깔 쪽은 무지한 상태로 일단 넘어가기로 한다.

[원본그림]

[표현그림]

들어가는 이미지의 기본크기는 30x30 이다. 이에 맞지 않는다면 자동으로 확대/축소된다.

탭에 이미지를 넣고 싶다면 먼저 Resources 폴더에 쓸만한 아이콘을 집어넣는다.

그리고 MainWindow.xib 를 클릭해 인터페이스 빌더를 띄운다. 탭을 클릭하지 말고

? 표나 타이틀을 클릭하게 되면 그 부분만 선택되게 된다. 그 상태에서 Inspector 창의

Attributes 란을 보게 되면 아래쪽에 Image 라는 란이있다. 콤보를 클릭해서 보면

Resources 란에 집어넣었던 이미지가 다 나오게 되는데 이중 하나를 선택하면

3개의 탭에 모두 다른 그림을 집어넣고 실행한 화면이다. 어째 마음에 안들지만