iOS 7 tutorial: Customizing the navigation bar and status bar in iOS 7

Directory (?) [-]

1. The default navigation bar in IOS 7
2. Set the background color of the navigation bar
3. Use a background picture in the navigation bar
4. Customize the Back button of the Yan
5. Modify the font of a navigation bar title
6. Modify navigation bar title to picture
7. Add multiple buttons
8. Modify the style of the status bar
9. Hide the status bar
10. Summarize

Note: This article is translated fromCustomizing Navigation Bar and Status Bar in iOS 7

Recently, like most developers, I was busy upgrading my program to fit iOS 7. There are a number of changes in the appearance of the latest iOS 7. From the developer's point of view, the navigation bar and the status bar have changed significantly. The status bar is now translucent, which means that the navigation bar appears behind the status bar. In some cases, the background picture of the navigation bar can be extended to the back of the status bar.

I used to write an article about how to customize the navigation bar. But now it's time to update it. Here's what this article will cover:

• The default navigation bar in IOS 7
• Set the background color of the navigation bar
• Use a background picture in the navigation bar
• Customize the color of the return button
• Modify the font of a navigation bar title
• Modify navigation bar title to picture
• Add multiple buttons
• Modify the style of the status bar
• Hide the status bar
• Summarize

The code provided in this article needs to be executed with Xcode 5来. If you're still using an older version of Xcode, upgrade Xcode to Xcode 5 before running the sample.

The default navigation bar in IOS 7

Before you start customizing, let's look at the appearance of the default navigation bar in iOS 7. Single View Controllercreate a project with a template from Xcode. The view controller is then embedded in a navigation controller. If you don't want to start from scratch, you can also download this sample project here.

Xcode 5 includes iOS 6 and iOS 7 emulators, and we can run a sample program in these two different emulator versions, as shown in the following:

As shown, the navigation bar in iOS 7 is intertwined by default with the status bar, and its color is also modified to light gray.

Set the background color of the navigation bar

In iOS 7, you no longer use the Tintcolor property to set the color of the navigation bar, but instead use the Bartintcolor property to modify the background color. We can AppDelegate.m modify the color by adding the didFinishLaunchingWithOptions: following code to the method in the file:

1	[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]];

The effect is as follows:

In general, we will use our own color, the following macro to set the RGB color is very convenient:

1	#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

Put the above macro into AppDelegate.m a file, and then use this macro to create a Uicolor object (based on the specified RGB). The following example:

1	[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

By default, the translucent property of the navigation bar is yes. In addition, all navigation bars are obfuscated to make the navigation bar color more saturated in iOS 7. For example, the translucent value is the contrast between no and yes:

To disable the Translucent property, you can select the navigation bar in storyboard and then, in attribute inspectors, uncheck the translucent.

Use a background picture in the navigation bar

If you want to use a picture as the background in the navigation bar, you need to provide a slightly higher picture (which can be extended to the back of the navigation bar). The height of the navigation bar has changed from points (pixels) to points (pixels).

We can still use setBackgroundImage: the method to set a custom picture for the navigation bar. As shown in the following code:

1	[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];

Two background images are available in the sample project: Nav_bg.png and Nav_bg_ios7.png. Run for a try, the following effect:

Customize the Back button of the Yan

In iOS 7, all the buttons are borderless. The return button will have a V-shaped arrow and a caption from the previous screen ("Back" if the title of the previous screen is empty). To color the return button, you can use the Tintcolor property. As shown in the following code:

1	[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

In addition to the return button, the Tintcolor property affects all button titles and pictures.

If you want to replace the V-shape with your own picture, you can set the picture's backIndicatorImage and backIndicatorTransitionMaskImage . As shown in the following code:

12	< Span class= "p" >[[uinavigationbar appearance] Setbackindicatorimage:[uiimage imagenamed:@ " Back_btn.png "]; [[uinavigationbar appearance ] setbackindicatortransitionmaskimage:[uiimage imagenamed:@ "Back_btn.png" ];

The color of the picture is controlled by the Tintcolor property.

Modify the font of a navigation bar title

As with iOS 6, we can use the properties of the navigation bar titleTextAttributes to customize the text style of the navigation bar. Use the following keys in the text attributes dictionary to specify the font, text color, text shadow color, and Text shadow offset:

• uitextattributefont– Font Key
• uitextattributetextcolor– Text color key
• uitextattributetextshadowcolor– Text Shadow color key
• uitextattributetextshadowoffset– Text Shadow offset key

The title style of the navigation bar is modified as shown in the following code:

1234567

Nsshadow*Shadow=[[NsshadowAlloc]Init]; Shadow.Shadowcolor=[UicolorColorwithred:0.0Green0.0Blue0.0Alpha0.8]; Shadow.Shadowoffset=Cgsizemake(0,1); [[UinavigationbarAppearance]Settitletextattributes:[NsdictionaryDictionarywithobjectsandkeys: [UicolorColorwithred:245.0/255.0 green:245.0< Span class= "o" >/255.0 blue:245.0/ 255.0 alpha:1.0 " Nsforegroundcolorattributename, shadow nsshadowattributename, [UIFont Span class= "NL" >fontwithname:@ "Helveticaneue-condensedblack" size: 21.0nsfontattributename Nil];

The effect is as follows:

Modify navigation bar title to picture

If you want to change the title of the navigation bar to a picture or logo, you only need to use the following line of code:

1	self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

The above code simply modifies the Titleview property and assigns a picture to it. Note: This is not a new feature in iOS 7 and the previous version of iOS can already be available.

The exact effect is as shown:

Add multiple buttons

Again, this technique is not iOS 7, and developers often add multiple buttons to the navigation bar, so I decided to introduce them here. We can add multiple buttons to the left or right of the navigation bar. For example, we want to add a camera and a share button to the right of the navigation bar, just use the following code:

123)45

Uibarbuttonitem*Shareitem=[[UibarbuttonitemAlloc]Initwithbarbuttonsystemitem:UibarbuttonsystemitemactionTargetSelfActionNil];Uibarbuttonitem*Cameraitem= [[uibarbuttonitem alloc initwithbarbuttonsystemitem:uibarbuttonsystemitemcamera target:< span class= "n" >self action:nil]; nsarray *actionbuttonitems = Span class= "Err" >@[shareitemcameraitem ; self. Navigationitem. Rightbarbuttonitems = actionbuttonitems

The following effects:

Modify the style of the status bar

In older versions of iOS, the status bar is always in white style. In iOS 7, we can modify the appearance of the status bar in each view controller. The Uistatusbarstyle constant allows you to specify that the contents of the status bar are dark or bright colors. By default, the status bar displays a dark color. That is, the time on the status bar, the battery indicator, and the Wi-Fi signal are displayed as dark colors. If a dark color is used as the background in the navigation bar, the effect looks as follows:

In this case, we might want to change the style of the navigation bar to bright colors. There are two ways to do this. In iOS 7, we can overriding methods in each view controller preferredStatusBarStyle: , as follows:

1234	-(UIStatusBarStyle)preferredStatusBarStyle{ return UIStatusBarStyleLightContent;}

The effect of the above code is as follows:

In iOS 7, using the method above to modify the status bar style is very good. In addition, we can use UIApplication's Statusbarstyle method to set the status bar, but first you need to stop using it View controller-based status bar appearance . In the Info tab of Project target, insert a new key with the name View controller-based status bar appearance , and set its value to No.

You can then use the following code to set the status bar style:

1	[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

Hide the status bar

Sometimes we need to hide the status bar, so at this point we override the method Prefersstatusbarhidden in the View controller: You can, as shown in the following code:

1234	- (BOOL)prefersStatusBarHidden{ return YES;}

Summarize

IOS 7 gives developers some new degrees of freedom to customize the look of the navigation bar and status bar. I hope the above tips will be useful to you.

Here you can download to sample project source code. You only need to cancel the relevant code comment to test it.

iOS 7 tutorial: Customizing the navigation bar and status bar in iOS 7