IOS Custom navigation Bar notes

First, the structure of Uinavigationbar

Navigation bar is almost every page will encounter problems, the general two processing methods: 1. Hide out does not show 2. Custom

1. Add a navigation bar

TestViewController * mainVC = [[TestViewController alloc] init];UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController:mainVC];    self.window.rootViewController = nav;

2. Hide the navigation bar

In the testviewcontroller.m file, use the following code:

- (void)viewDidLoad {    [super viewDidLoad];    [self.navigationController setNavigationBarHidden:YES]; //self.navigationController.navigationBar.hidden = YES;}

Description: The direct setting through properties is successful because although Navigationbar is ReadOnly, Hidden is the default (ReadWrite). It is recommended to use the first one, set by sending a message.

3. Modify the navigation bar background color

Because the system comes with the navigation bar has not been able to meet the user's aesthetic needs, so the development of the navigation bar is more or less customized, even if only to modify the background color or font color.

• Mode one: set by proxy

  [[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];

  
  

Description: Why can I modify the background color of all navigation bars?

1. View the message sent by Uinavigationbar appearance, which is a protocol named Uiappearance. According to the official website explanation: Uiappearance is an appearance protocol (decorative mode). This protocol must be implemented in order to change the appearance, so the Uinavigationbar is sure to implement this protocol internally.
2. View header files There are 4 methods in the Uiappearance protocol, but according to the official documents, two iOS9 methods are discarded. So only the following two are available, all of which return the object of the class, so you can send a modified appearance message to this class. For example: Setbartintcolor. In fact, this can be arbitrarily modified after the object.

+ (instancetype)appearance;+ (instancetype)appearanceForTraitCollection:(UITraitCollection *)trait

• Mode two, directly through the property settings, or send a message to set

In the testviewcontroller.m file, use the following code:

- (void)viewDidLoad {    [super viewDidLoad];    // 无效果    self.navigationController.navigationBar.backgroundColor = [UIColor redColor]; // 可行 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav.png"] forBarMetrics:UIBarMetricsDefault];}

Description

1. The following code why no effect, in fact, look at the structure of the diagram to understand.

self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

Uinavgationbar structure diagram

Yes: This modifies the background color of the Navigationbar, while Navigationbar adds controls such as UIView and Uiimageview,uilabel, covering Navigationbar.

1. So how to modify?

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"yao_1"] forBarMetrics:UIBarMetricsDefault];

Use the default mode by adding a background map.
Note: There is also a problem with the status bar background color change, which is due to the automatic extension of the controls added to the Navigationbar to the boundary. If you just modify the background color of the navigation bar, there is absolutely no need to add control to Navigationbar, to Navigationbar heap too many useless controls, can not endure.

// 设置透明[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"yao_1"] forBarMetrics:UIBarMetricsCompact];// 修改navigationBar的背景色self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

This modifies the Navigationbar background color, only then has the kind very comfortable feeling, has the wood to have. Because I just want to change the background color of Navigationbar. ：

Uinavgationbar

Why are you doing this?

[[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];

Or why it should be.

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"yao_1"] forBarMetrics:UIBarMetricsDefault];

Uinavigationbar and Uinavigationcontroller, Uiviewcontroller relations

1. Navigation bar class Name: Uinavigationbar, is a navigation controller (Uinavgationcontroller) under a property, generally to a view controller (testviewcontroller) Add navigation bar, that is, add it as a navigation controller ( Uinavgationcontroller) of the root view controller.

2. Why the navigation controller can be manipulated directly in this view controller, because the Testviewcontroller class is custom inherited from the Uiviewcontroller class. There is a category in the Uiviewcontroller class that declares a property of the Uinavgationcontroller class. At the first step, set this property to the object of the navigation controller above.

Uicontroller classification

The 3.UINavigationBar contrast chart is as follows:

Uinavigationbar Contrast Chart

Uinavgationbar Structure Diagram Description:

• The control relationship can be seen, Uinavigationbar contains a: Uinavigationbarbackground control (has been extended to the boundary, covering the navigation bar), the other Uinavigationbarbackindicatorview (Actually the Blue return button, when push comes in a viewcontroller will not show)
• The Uinavigationbarbackground control contains: Uibackdropview (Uibackdropeffectview logo yin view), Uiimageview

Summarize:

As you can see, the Uinavigationbarbackindicatorview (the Back button only occupies the left portion of the area and is displayed when the new view controller is push.) Therefore, the top of the display is Uiimageview). So, this is the code

self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

* Modify the background color, the root cause of always being obscured. Workaround, so drop the Uiimageview control, or simply set a picture of the background color you want to Uiimageview . *

Second, the Uinavigationbar custom 1. Custom

General customizations in three cases: left, right, and middle view

• Customize left button

- (void) Viewdidload {[Super Viewdidload];Customize navigation bar Left buttonUIButton * LEFTBTN = [UIButton Buttonwithtype:Uibuttontyperoundedrect]; Leftbtn. frame =cgrectmake (0, 7, 83, 30); Leftbtn.backgroundcolor = [uicolor OrangeColor]; [Leftbtn addtarget:self action: @selector (ONTAP) Forcontrolevents:uicontroleventtouchupinside]; uibarbuttonitem * leftitem = [[uibarbuttonitem alloc] INITWITHCUSTOMVIEW:LEFTBTN]; self.navigationitem//Click event Handling-(void) onTap {NSLog ( Span class= "hljs-string" >@ "clicked on the left button of the navigation Bar");             

• Customize the right button

  Similar to the custom left button method, the difference is as follows:

  self.navigationItem.rightBarButtonItem = rightItem;

• Customizing the Middle View

  UIView * centerView = [[UIView alloc] initWithFrame:CGRectMake(0, 7, 110, 30)];centerView.backgroundColor = [UIColor greenColor];self.navigationItem.titleView = centerView;

  2. Structural Analysis

As you can see from your custom code, customizations are all about modifying the contents of Navigationitem. Look at the header file it is known that Testviewcontroller can operate the Navigationitem, the same way as above Uinavigationcontroller implementation.

There is an items collection in the Uinavigationbar class that stores Navigationitem and other related content. The Uinavigationitem class stores Leftbarbuttonitems, Rightbarbuttonitems, and other collections. There are also Leftbarbuttonitem, Rightbarbuttonitem controls that decide whether to create and display these controls, depending on whether the collection is empty.

Therefore, when the content is not set, the default collection is empty and all controls are not displayed.

3. Handwriting Code Tips

For the navigation bar customization, most apps are "back" to the left, "map" on the right, "sweep code" and other buttons, in addition to display the title, may customize the Paragraph button, select menu and so on. For these custom buttons and views, the dimensions are set according to the picture size and the width and height of the navigation bar (in short, I used to >.<).
Today in the test iOS7 the layout uses SB, the discovery control is dragged up and it adapts to the size given by the system. Then I bound the controls to get the dimensions of the controls. Tested Iphone4s and IPhone6, get the left and right button dimensions: frame = {0,7,83,30}, middle view size: frame = {0,7,110,30}.
This way, there are no special requirements for the navigation bar buttons, which can be set by this size.

Original link: http://www.jianshu.com/p/b7818eba288c

IOS Custom navigation Bar notes