Custom IOS7 navigation bar background, title and Back button text color

Transferred from: http://blog.csdn.net/mad1989/article/details/41516743

Under IOS7, the default navigation bar background, color is like this, then we have to customize, if you just change the background and color, the code is very simple, do not need a very complex custom view to replace Leftbaritem

change the background and text color of the navigation bar

Method One:

[OBJC]View Plaincopy

2. Set Navigationbar background color &title color
3. [Self. Navigationcontroller. Navigationbar setbartintcolor:[uicolor colorwithred: 20/25< Span class= "Xcodenumber" >5.0 green: 155/2< Span class= "Xcodenumber" >55.0  Blue:213/ 255 .0 alpha:1.0]];  
5. [self. Navigationcontroller. Navigationbar settitletextattributes:[nsdictionary   Dictionarywithobjectsandkeys:[uicolor Whitecolor],uitextattributetextcolor,Nil]];

The effect is as follows:

We changed the background to blue, title text changed to white, is it very simple? Navigationbar extremely push past sub-pages will also be your modified background color

Method Two:

[OBJC]View Plaincopy

1. Set Navigationbar background color
2. [[Uinavigationbar appearance] setbartintcolor:[uicolor Redcolor]];
3. @{} stands for dictionary
4. [[Uinavigationbar appearance] settitletextattributes:@{nsforegroundcolorattributename:[uicolor   Whitecolor]}];

The effect is as follows:

to 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 now 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:

[OBJC]View Plaincopy

1. [[Uinavigationbar appearance] setbackgroundimage:[uiimage imagenamed:@ "Nav_bg.png"]   Forbarmetrics:uibarmetricsdefault];

As in the above, I will not post it.

Change the font of the navigation bar title

Just like iOS 6, we 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

[OBJC]View Plaincopy

2. Nsshadow *shadow = [[Nsshadow alloc] init];
4. Shadow. Shadowcolor = [Uicolor colorwithred:0. 0 Green:0. 0 Blue:0. 0 Alpha  :0. 8];
6. Shadow. Shadowoffset = Cgsizemake (0, 1);
8. [[Uinavigationbar appearance] settitletextattributes: [Nsdictionary Dictionarywithobjectsandkeys:
9. [UicolorColorwithred:245.0/25 5.0 green: 245 .0/255 .0 blue:2 45.0/ 255 .0 alpha:1.0],  nsforegroundcolorattributename,  
11. Shadow, Nsshadowattributename,
13. [Uifont Fontwithname:@ "Helveticaneue-condensedblack" size:21. 0], Nsfontattributename,   Nil Nil]];

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 the line of code: simply change the titleview with a custom, (for the lower version)

[OBJC]View Plaincopy

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

The effect is as follows, I use a random picture, do not mind:

add multiple column button items

You want to add more than one Column button item to 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:

[OBJC]View Plaincopy

2. Uibarbuttonitem *shareitem = [[Uibarbuttonitem alloc] initwithbarbuttonsystemitem:  Uibarbuttonsystemitemaction target:self action: nil Nil];
4. Uibarbuttonitem *cameraitem = [[Uibarbuttonitem alloc] initwithbarbuttonsystemitem:  Uibarbuttonsystemitemcamera target:self action: nil Nil];
6. Nsarray *itemsarr = @[shareitem,cameraitem];
8. Self. Navigationitem. rightbarbuttonitems = Itemsarr;

Customize the text and color of the back button

Normally, when we use Uinavigationcontroller, push to the sub-page, the upper left corner will be the system automatically take the value of the parent page of the title name, the default is this, then how can we modify it?

The left side shows the title of the parent page: User login, but we want to change to return, there are many ways, to give some examples

Method One:

You can change the text directly by setting the Backbarbuttonitem of the Navigationitem, "Note that you want to set in the controller of the parent view" as follows:

[OBJC]View Plaincopy

1. Uibarbuttonitem *item = [[Uibarbuttonitem alloc] initwithtitle:@ "Back" Style:uibarbuttonitemstyleplain  target: nil action: nil];
2. Self. Navigationitem. Backbarbuttonitem = Item;

The effect is as follows:

All of the sub-interfaces are returned to the text we define, and if you do not want to display the text, the direct "" will display a system's return arrow icon, which is also a very clear feeling.

Do you find that the text color and background are duplicated, so how do you customize its color? In IOS7, you can change the Tintcolor property, which provides a quick and easy way, here is a sample snippet:

[OBJC]View Plaincopy

1. [[Uinavigationbar appearance] settintcolor:[uicolor Whitecolor]];

The effect is as follows:

All is the system of icons and text, this time looked comfortable, there are wood? In addition to the back button, note that the Tintcolor property affects all button titles and button images "

Finally, for example, another way to implement a custom navigation controller is to return a button with the following code:

[OBJC]View Plaincopy

2. [self. Navigationcontroller. Navigationbar settitletextattributes:@{ Nsforegroundcolorattributename: [Uicolor redcolor],nsfontattributename:[uifont systemfontofsize:1   9. 0]};
6. Self. title=[nsstring stringWithFormat:@ "Page%lu", (unsigned long) self.  Navigationcontroller. Viewcontrollers. Count];
10. Custom Back button
12. UIImage *backbuttonimage = [[UIImage imagenamed:@ ' fanhui.png '] resizableimagewithcapinsets:  Uiedgeinsetsmake (0, 30, 0, 0)];
14. [[Uibarbuttonitem appearance] setbackbuttonbackgroundimage:backbuttonimage forstate:  UIControlStateNormal Barmetrics:uibarmetricsdefault];
16. will return the text of the button position settings are not displayed on the screen
18. [[Uibarbuttonitem appearance] setbackbuttontitlepositionadjustment:uioffsetmake (nsintegermin,  nsintegermin) Forbarmetrics:uibarmetricsdefault];

The effect is as follows:

Finally, when you switch to the next view using Pushviewcontroller, the navigation controller changes the left button of the navigation bar in the following 3 order (this paragraph is from the network):

1. If b view has a custom left button (Leftbarbuttonitem), the custom button will be displayed;
2. If B does not have a custom button, but the Backbarbuttonitem property of a view has a customization, the customization is displayed;
3, if none of the first 2, then the default display a Back button, the title of the Back button is a view of the title;

Custom IOS7 navigation bar background, title and Back button text color