IOS Navigation Bar

The recent project has a requirement and the navigation bar style customization, in-depth after the discovery of some of the concepts of understanding some vague, just take advantage of this opportunity to fully tidy up a bit.

From IOS7 onwards, Apple has a lot of flat and frosted glass style, just upgrade to IOS7 will find that the layout of the interface is somewhat biased (of course, the new project does not have this problem, do not need to go through 6 to 7 adaptation), the adaptation process will find the following properties,

- Edgesforextendedlayout

- Translucent

- Extendedlayoutincludesopaquebars

- Automaticallyadjustsscrollviewinsets

These properties seem to be well understood by the literal meaning, but they are found to be somewhat different after they are assembled, and some strange problems do not know what causes them. Do not worry, next I will be a comprehensive analysis of the meaning of these properties, to ensure that you are no longer afraid of all kinds of strange navigation bar problems.

Edgesforextendedlayout + Translucent

After iOS7, the default setting for Edgesforextendedlayout is Uirectedgeall,translucent, which is true. This combination causes the layout of the Rootview to begin (0,0), where the contents of the view are obscured by the navigation bar, and in most cases the edgesforextendedlayout is modified to Uirectedgenone to solve the problem of the layout being obscured. Setting translucent to False also causes Rootview to start at the bottom of the navigation bar, but translucent = false even if edgesforextendedlayout is changed to Uirectedgeall Rootvie W or start the layout from the bottom of the navigation bar. How can you let Rootview start the layout from (0,0) when the navigation bar is opaque? Apple also takes this requirement into account, providing the Extendedlayoutincludesopaquebars attribute.

Summary: Translucent for True,rootview from (0,0) Start layout, modify the Edgesforextendedlayout property can change the layout; translucent to false,rootview from the bottom of the navigation bar to start the layout, Modifying the Edgesforextendedlayout property cannot change the layout.

Extendedlayoutincludesopaquebars + transluce NT

Before we know that translucent is false, modifying edgesforextendedlayout cannot start the layout of Rootview from (0,0). Apple provides extendedlayoutincludesopaquebars, literally meaning that it is displayed in full screen under an opaque navigation bar.

A little more here, there are viewdidload,viewwillappear,viewdidappear,viewwilldisappear,viewdiddisappear in the life cycle of Viewcontroller, These attributes mentioned above need to be set before Viewdidappear, Viewdidappear can assume that the system has been arranged according to the configuration, and shown here to the user.

Automaticallyadjustsscrollviewinsets

The default value of Automaticallyadjustsscrollviewinsets is true, which means that the first ScrollView added to Rootview is automatically modified in full-screen mode to Contentinset (64,0,0,0), so ScrollView will not be obscured by the navigation bar.

There is a common problem with ScrollView, here is the explanation. We often use a tableView like this,

- (void)viewdidload {

[Super viewdidload];

additional setup after loading the view.

self. View. BackgroundColor = [uicolor greencolor];

self. Navigationitem. Title = @"Master";

self. TableView = [[uitableview alloc] initwithframe:self. View. Bounds];

_tableview. BackgroundColor = [uicolor whitecolor];

_tableview. Delegate = self;

_tableview. DataSource = self;

[self. View addsubview:_tableview];

}

This way, by default (Translucent = true, Edgesforextendedlayout = Uirectedgeall), there is no problem with the display of TableView. But when we set Edgesforextendedlayout to Uirectedgenone, when the content of TableView is relatively long, the content of the bottom is not displayed. This is very strange, according to the previous conclusion, this time TableView is from the bottom of the navigation bar layout, Contentinset is also (0,0,0,0), how the bottom of the content will be obscured part of it? The reason is Self.tableview = [[UITableView alloc] initWithFrame:self.view.bounds]; When initializing the Rootview frame or (0,0,screenwidth,screenheight), only need to re-modify the TableView frame in viewwilllayoutsubviews,

- (void)viewwilllayoutsubviews

{

[Super viewwilllayoutsubviews];

_tableview. Frame = self. View. Bounds;

}

Uinavigationbar Modifying the background color

Uinavigationbar is a subclass of UIView, the first thought is to modify the background color,

Self.navigationController.navigationBar.backgroundColor = [Uicolor Greencolor];

Found that this is not the effect we want, why is the green faded? With Xcode's viewdebugging we can see that there are also some sub-views inside the Uinavigationbar, and the background color of these sub-views obscures the color we set.

View Uinavigationbar interface We found SetBackgroundImage, set

[self. Navigationcontroller. Navigationbar setbackgroundimage:[UIImage imagewithcolor:[uicolor Greencolor] size:cgsizemake(1, 1)] forbarmetrics :uibarmetricsdefault];

The results are as follows

Summary: Set UINavigationBar backgroundimage to modify the background color of the navigation bar.

Translucent and SetBackgroundImage

Previously mentioned we can modify the background image to modify the background color of the navigation bar, set the background image in some pages we will encounter some strange problems, found that the original layout of the normal page is not displayed, there will be a part of the blank or blocked by the navigation bar.

By printing out the value of translucent we found that the original translucent navigation bar became opaque when the background image was set to a solid color, combined with the aforementioned translucent effect on the layout starting point, if the page is in the translucent case, that is, Rootview from (0, 0) Start the layout to set the frame of the sub-view, then translucent becomes false when the solid color background is set, that is, Rootview starts the layout from (0,64). Why does setting up a background image affect translucent, by looking at the document and discovering the following instructions,

/*

New behavior on IOS 7.

Default is YES.

Opaque background by setting the property to NO.

If the navigation bar has a custom background image, the default is inferred

From the alpha values of the Image-yes if it have any pixel with alpha

That is, if the background image contains alpha color values, the system defaults to translucent set to true, and no alpha color value will set translucent to false. This is the truth, originally we set a pure green background image, is not contain alpha color value, that is, the system defaults to translucent set to false. However, for cases where the translucent value is not manually set, if we manually set the translucent, the system will not modify the translucent based on the alpha of the background image.

At this point, we understand how Apple uses these properties, for iOS7 above, here to do a summary:

1. IOS7 after translucent default for True,rootview from (0,0) Start layout, modify the Edgesforextendedlayout property can change the layout;

2. Translucent for False,rootview from the bottom of the navigation bar to start the layout, modify the Edgesforextendedlayout property cannot change the layout, you can set the Extendedlayoutincludesopaquebars Starting from (0,0) layout;

3. The default value of Automaticallyadjustsscrollviewinsets is true, which means that the first ScrollView added to Rootview is automatically modified in full-screen mode to Contentinset (64,0,0,0), Used to correct the display of ScrollView in full screen mode;

4. Setting the background image of the Uinavigationbar can change the background color of the navigation bar, if the background picture contains alpha color values, the system defaults to set translucent to true, and no alpha color value will set translucent to false. However, for cases where the translucent value is not manually set, if we manually set the translucent, the system will not modify the translucent based on the alpha of the background image.

IOS Navigation Bar