iOS7 Some settings for the status bar and navigation bar

The latest version of IOS7 introduces a lot of visual changes. From a developer's point of view, the navigation bar and status bar are the 2 most obvious changes. The status bar is now transparent/translucent, which means that the view can pass through the status bar, and the background image of the navigation bar can be extended to the back of the status bar. Default navigation bar in iOS 7

Before we go into the customization, let's take a look at the default navigation bar generated by Xcode 5 and iOS 7. Simply use the single-view-controller template for the Xcode project. Embed the view controller in the navigation controller. If you don't want to start from scratch, you can download the Xcode project for this sample.

XCODE5 below are two emulators for iOS 6 and iOS7. You can try running a sample project with these two different versions of the emulator.

As you can see, the 7 navigation bar on iOS defaults to a status bar that is intertwined. The default color is also changed to light gray, as well.

Change the background color of the navigation bar

The Ios7,tintcolor property can no longer be used to set the color of the bar. Instead, use the Bartintcolor property to change the background color. You can put the following code under the DIDFINISHLAUNCHINGWITHOPTIONS:APPDELEGATE.M file.

1	[[Uinavigationbar appearance] Setbartintcolor: [Uicolor Yellowcolor]];

Simply put it somewhere in the beginning of the APPDELEGATE.M and use it to create any Uicolor object with any RGB color you want. Here is an example:

1	[[Uinavigationbar appearance] Setbartintcolor:uicolorfromrgb (0X067AB5)];

By default, the translucent property of the navigation bar is set to Yes. In addition, there is a system blur that applies to all navigation bars. In this setting, iOS 7 tends to saturation the color of the bar. The following is a sample navigation bar with different semitransparent settings.

To disable semitransparent properties, you can simply select the navigation bar in the xib. Inside the property check, remove the semitransparent check box, for example.

Use a background picture in the navigation bar

If your application uses a custom image as the background of the column, you need to provide a "larger" picture that extends behind the status bar. The height of the navigation bar is changed from 44 points (88 pixels) to 64 points (128 pixels).

You can still use the SetBackgroundImage: method to specify the navigation bar for the custom image. Here is the line of code to set the background picture:

[[Uinavigationbar appearance] Setbackgroundimage:[uiimage imagenamed:@ "Nav_bg.png"] forbarmetrics: Uibarmetricsdefault];

The routines bundle two different background images: Nav_bg.png and nav_bg_ios7.png.

vcc4sbo+sm28xqw= "class=" AlignCenter size-full wp-image-2553 "src=" http://www.2cto.com/uploadfile/Collfiles/ 20131208/navigation-bar-background-image.jpg "/>

Change the font of the navigation bar title

Just like iOS 6, you can customize the text style by using the "Titletextattributes" property of the navigation bar. You can specify font, text color, text shadow color, text shadow in the text Caption offset property Dictionary, use the following Text property key:

Uitextattributefont-Font

Uitextattributetextcolor-Text color

Uitextattributetextshadowcolor-Text Shadow color

Uitextattributetextshadowoffset-Offset for text shading

The following is the font style for the navigation bar headings that the sample snippet changes:

Nsshadow *shadow = [[Nsshadow alloc] init]; Shadow.shadowcolor = [Uicolor colorwithred:0.0 green:0.0 blue:0.0 alpha:0.8]; Shadow.shadowoffset = Cgsizemake (0, 1); [[Uinavigationbar appearance] Settitletextattributes: [Nsdictionary Dictionarywithobjectsandkeys: [Uicolor colorwithred:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], Nsforegroundcolorattributename, Shadow, Nsshadowattributename, [Uifont fontwithname:@ "Helveticaneue-condensedblack" size:21.0], Nsfontattributename, nil]];

If you change the sample application, the title in the navigation bar should look like this:

Customize the color of the back button

In IOS7, all the bar buttons are not edited. You can change the Tintcolor property, which provides a quick and easy way. Here is a sample code snippet:

1	[[Uinavigationbar appearance] Settintcolor:[uicolor Whitecolor]];

In addition to the back button, note that the Tintcolor property affects all button titles and button images.

If you want to replace the default font with a custom image, you can set Backindicatorimage and Backindicatortransitionmaskimage.

1	[[Uinavigationbar appearance] Setbackindicatorimage:[uiimage imagenamed:@ "Back_btn.png"]; [[Uinavigationbar appearance] Setbackindicatortransitionmaskimage:[uiimage imagenamed:@ "Back_btn.png"];

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

Use a picture as a navigation bar title

Don't want the title bar to be bare text? You can replace it by using an image or a flag in a line of code:

1	Self.navigationItem.titleView = [[Uiimageview alloc] initwithimage:[uiimage imagenamed:@ "Appcoda-logo.png"];

We simply change the Titleview to use from the definition image. This is not a new feature in IOS7. This code also applies to older versions of iOS.

Add multiple column button items

Again, this trick is not specifically for iOS 7. , you want to add more than one Column button item to the side of the navigation bar. Either Leftbarbuttonitems and rightbarbuttonitems you specify a custom Bar button item on the left/right side of the navigation bar. For example you want to add a webcam and a share button to the right of it. You can use the following code:

Uibarbuttonitem *shareitem = [[Uibarbuttonitem alloc] initwithbarbuttonsystemitem:uibarbuttonsystemitemaction target : Self Action:nil];
Uibarbuttonitem *cameraitem = [[Uibarbuttonitem alloc] Initwithbarbuttonsystemitem:uibarbuttonsystemitemcamera Target:self Action:nil];
Nsarray *actionbuttonitems = @[shareitem, Cameraitem];
Self.navigationItem.rightBarButtonItems = Actionbuttonitems;

The following is an example result:

Change the style of the status bar

In the old version of iOS, the status bar is always in black style, and not too much can be changed. With the release of iOS 7, you can change the appearance of each view controller status bar. You can use the Uistatusbarstyle constant to specify whether the contents of the status bar should be either deep or shallow. By default, the status bar displays dark content. In other words, items such as time, battery indicators, and Wi-Fi signals are displayed as dark colors. If you are using a dark background on the navigation bar, you will end up like this:

Knowledge Popularization:

The status bar on iOS means the top 20-pixel high section.
The status bar is divided into two parts, to distinguish between the two concepts, the following will be used:

• foreground part : Refers to the display of battery, time and other parts;

• background : The background part of the display is black or picture;

  such as: The foreground part is white, the background part is black

Set the foreground portion of the StatusBar

Simply put, the color that displays the battery level, the time, the network part,
Only two colors can be set here:

• Default Black (uistatusbarstyledefault)
• White (uistatusbarstylelightcontent)

There are two places that can be set: plist settings inside and in the program code

1.plist Setup StatusBar

Add a line of Uistatusbarstyle(or "Status bar style") to the plist, where you can set two values, which is the above mentioned two
uistatusbarstyledefault and uistatusbarstylelightcontent

This way, when the app launches the launch page, the StatusBar style is the plist set above.

2. Set StatusBar in the program code

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];  

Or

//相对于上面的接口，这个接口可以动画的改变statusBar的前景色  [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];

Not only that, iOS is also very intimate in the Uiviewcontroller also added several interfaces,
The goal is to have the status bar customize the foreground portion of the StatusBar based on the currently displayed Uiviewcontroller.

• -(Uistatusbarstyle) Preferredstatusbarstyle;

• -(Uiviewcontroller *) Childviewcontrollerforstatusbarstyle;

• -(void) setneedsstatusbarappearanceupdate

-(Uistatusbarstyle) Preferredstatusbarstyle:

Rewrite this method in your own Uiviewcontroller and return the value you need (Uistatusbarstyledefault or uistatusbarstylelightcontent);

Attention:

• Here if you simply return a fixed value, then the Uiviewcontroller display, the program will call the method immediately, to change the foreground part of StatusBar;
• If the Uiviewcontroller is already in the display at the moment, you may also want to change the foreground color of the statusbar in the current page, then you first need to call the following setneedsstatusbarappearanceupdate method (This method notifies the system to invoke the current Uiviewcontroller Preferredstatusbarstyle method), this and UIView setneedsdisplay Principle (after calling the UIView object's setneedsdisplay method, the system will be called to redraw the view the next time the page refreshes, the system can refresh 60 times the page 1 seconds, depending on the program settings).

-(Uiviewcontroller *) Childviewcontrollerforstatusbarstyle:

This interface is also important, and the default return value is nil. When we call setneedsstatusbarappearanceupdate , the system calls Application.window's Rootviewcontroller Preferredstatusbarstyle method, our program is generally used Uinavigationcontroller to do root, if this is the case, then our own uiviewcontroller in the Preferredstatusbarstyle will not be called at all;
In this case, the Childviewcontrollerforstatusbarstyle comes in handy,
We're going to subclass a uinavigationcontroller and rewrite the childviewcontrollerforstatusbarstyle method in this subclass, as follows:

- (UIViewController *)childViewControllerForStatusBarStyle{    return self.topViewController;}

The above code means, do not call my own (that is Uinavigationcontroller) the Preferredstatusbarstyle method, but to call Navigationcontroller.topviewcontroller 's preferredstatusbarstyle method, so to write, The Preferredstatusbarstyle method of the currently displayed Uiviewcontroller can be guaranteed to affect the foreground portion of the statusbar.

In addition, sometimes our currently displayed Uiviewcontroller may have multiple childviewcontroller, overriding the current Uiviewcontroller Childviewcontrollerforstatusbarstyle method, let Childviewcontroller's Preferredstatusbarstyle take effect ( The current Uiviewcontroller Preferredstatusbarstyle will not be called).

Simply put, as long as Uiviewcontroller overrides the Childviewcontrollerforstatusbarstyle method return value is not nil, then Uiviewcontroller's The Preferredstatusbarstyle method will not be called by the system and the system will call Childviewcontrollerforstatusbarstyle The Uiviewcontroller method returns the Preferredstatusbarstyle method of the.

-(void) Setneedsstatusbarappearanceupdate:

Let the system call Application.window's Rootviewcontroller preferredstatusbarstyle method, if Rootviewcontroller's Childviewcontrollerforstatusbarstyle return value is not nil, refer to the above explanation.

Set the "Background section" of the StatusBar

The background part, simply speaking, is the background color; there are two ways to change it:

System-Provided methods

navigationbar setbartintcolor interface, this interface can change the background color of StatusBar

Note: Once you have set the Navigationbar -(void) SetBackgroundImage: (UIImage *) backgroundimage forbarmetrics: ( uibarmetrics) Barmetrics interface, then the above Setbartintcolor interface can not change the background color StatusBar, statusbar the background color will become pure black.

Another way

Create a UIView,
Set the frame.size and StatusBar size of the UIView,
Set the Frame.origin for the UIView to {0,-20},
Set the background color of the UIView to the color of the statusbar you want,
Addsubview the UIView on the Navigationbar.

Hide the status bar

In any case, you want to hide the status bar and can overwrite Prefersstatusbarhidden: in your controller:

-(BOOL) Prefersstatusbarhidden { return YES; }

Summarize

iOS 7 provides developers with a new, customizable navigation bar and status bar look and feel. If you are migrating apps from iOS 6 to iOS 7 or creating a brand new app for iOS 7, I hope you will find these useful tips.

Customize the navigation bar and status bar:

When customizing the navigation bar background, you may experience some of the following issues:

1. When the navigation bar background is set, the color of the status bar will change along with it, which may not be what you said you wanted to see.

2, IOS7 more than the version and the lower version of the navigation bar displayed the height of the difference, this difference is the status bar height 20, in order to be compatible with the lower version, must be unified

Solution Ideas:

1, abnormal is the status bar background has also changed, and the status bar text can be set through other APIs: such as [[uiapplicationsharedapplication] Setstatusbarstyle: Uistatusbarstylelightcontent];

2, the text is attached to the background above, so consider inserting a rectangular color between this block (even the picture can)

3, according to this idea, the second way of thinking is also produced, is to produce a 20+44=64 height of the picture, as the navigation bar background, where the top 20 is the color of the status bar.

4, this article realizes the first kind of thought, and the simulator and the real machine as well as the ios6,7 have verified the feasible

More than 7.0 versions solve high-rise problems with a single line of code

if ([[[Uidevicecurrentdevice] systemversion] doublevalue]>=7.0) {

self. Edgesforextendedlayout=uirectedgenone;

}

Create a false status bar background with a height of 20

UIView *statusbarview = [[UIView alloc] initwithframe:cgrectmake (0,---- )];

Set it to the color you need, here I choose black, I am very calm

Statusbarview. backgroundcolor=[uicolor blackcolor];

Here my idea is: before the ideal state is the status bar color has become the color of the navigation bar, but according to this situation, but instead help me to determine that the status bar at this time is also part of the navigation bar, and the status bar text floating above, So, in theory, adding a subview directly to the navigation bar is the middle layer of them.

Push the code like this:

[self. Navigationcontroller. Navigationbar addsubview: Statusbarview];

Modify the navigation bar text color, here I choose White, that I am very pure

[[uiapplicationsharedapplication] setstatusbarstyle: uistatusbarstylelightcontent];

Set the background picture of the navigation bar

[self. Navigationcontroller. Navigationbarsetbackgroundimage: [uiimageimagenamed:@ "bg.jpg"] forbarmetrics: Uibarmetricsdefault];

iOS7 Some settings for the status bar and navigation bar