Detailed explanation of the impact of IOS navigation bar on controller view



When we set some properties of the navigation bar, the layout of the controller view will not start from the (0,0) point of the window, but from the bottom of the navigation bar. At this time, the view frame obtained in viewdidload does start from (0,0), and the final actual frame of the view can be obtained only in viewdidappear

Some properties

Before understanding the uinavigationbar, it is necessary to understand some properties of the uinavigationbar

///Default translucent black
open var barStyle: UIBarStyle
//Bottom shadow horizontal line, default nil 
//The official explanation also involves a method to set the background image - setbackgroundimage: forbarmetrics:
open var shadowImage: UIImage?
//It has been changed since 7.0. Please use - bartintcolor to modify the bar background color
open var tintColor: UIColor!
//Default is the background color of the nil bar
open var barTintColor: UIColor? 
///The attributes that have a great impact are shown below. Are they translucent
open var isTranslucent: Bool // Default is NO on iOS 6 and earlier. Always YES if barStyle is set to UIBarStyleBlackTranslucent

Some conditions

///The current controller is not a tableviewcontroller
self.view.backgroundColor = .cyan
self.tableView.backgroundColor = .red
Self.navigationitem.title = "rootvc title"
tableView.frame = view.bounds

1.1 the default navigation bar has a translucent effect

The view and tableview and navigation bar layouts are displayed

1 view full screen layout

2. By default, the tableview starts from the lower part of the navigation bar

3 navigation bar translucent

Details: in the navigation bar_ The uivisualeffectbackdropview property turns red, which is the background color of the tableview

1.2 at this time, if you want to make the tableview layout from the top, you can add code

if #available(iOS 11.0,*) {
   self.tableView.contentInsetAdjustmentBehavior = UIScrollView.ContentInsetAdjustmentBehavior.never;
  } else {
   self.automaticallyAdjustsScrollViewInsets = false;

The magic thing is that if the tableview is laid out from the top, it will appear in the navigation bar_ The uivisualeffectbackdropview property changes to default white again

2 set the istranslucent property of the navigation bar

Istranslucent defaults to true after 6.0

If set to false

self.navigationController?.navigationBar.isTranslucent = false

Layout now

1 view layout from the bottom of the navigation bar

2 tableview layout from view (0,0)

3 navigation bar opaque_ Uibarbackground defaults to white

3.1 setting bartintcolor

self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.barTintColor = UIColor.purple

The layout is the same as the default

1 view layout from (0,0)

2 tableview layout from the bottom of the navigation bar
3 navigation bar translucent

The difference is that uivisualeffectview adds one more_ Uivisualeffectsubview is used to display our custom background color

The other two_ Uivisualeffectsubview and_ UIVisualEffectBackdropView   View is used to achieve translucent effect

3.2 setting based on bartintcolor   Istranslucent = false attribute

The result is the same as that in 2. The difference is

_ Uibarbackground has become our custom color

4.1 setting setbackgroundimage

Set a solid color picture

self.navigationBar.setBackgroundImage(UIColor.mm_colorImgHex(color_vaule: hex,alpha: 1), for: UIBarPosition.any, barMetrics: .default)

Layout now

1 view layout view — from the bottom of the navigation bar (0.0, 88.0, 414.0, 808.0)

2 tableview layout from (0,0)

3 navigation bar opaque

At this time, the istranslucent property of the print navigation bar is false, that is, if setbackgroundimage is called, istranslucent will be set to false by default


4.2 we modify istranslucent in the case of 4.1

Modify in viewwillappear   Istranslucent is true

Layout now

1 view full screen layout

2 tableview layout starts from the bottom and top of the navigation bar

3 navigation bar transparent

Print our_ The backgroundimage transparency in uibarbackground has been modified

<UIImageView: 0x7fbef1f0ce10; frame = (0 0; 414 88); alpha = 0.909804; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x600000cabd00>>


Thus, all conditions have been tested

1. The size of the view is always affected by the istranslucent attribute of the navigation bar

2 modifying setbackgroundimage will affect the istranslucent property.

3. Modifying the bartintcolor property NavigationBar will_ Add a custom color to uivisualeffectview_ UIVisualEffectSubView

Demo is here

Welcome adviceDemo


By checking data and testing

About uibarmetrics parameter in setbackgroundimage

one   default   // Both horizontal and vertical screens are displayed

two   compact   // Indicates that it is displayed only under the horizontal screen, which is the same as uibar metrics landscape phone, but ios8 has been abandoned

3. Both defaultprompt and compactprompt have no effect. I don’t know how to work

Well, the above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. Thank you for your support for developpaer.