Sagit.Framework For IOS auto layout tutorial: 6. Navigation bar



The interface of IOS is divided into status bar, navigation bar, main interface and bottom status bar.

This article describes the navigation bar related operations.

1. Height of navigation bar

The frame is auto layout and adaptive, so a macro definition is provided to represent the height of the navigation bar:


When the page layout needs to use the height of the navigation bar, use ststatushightpx.

2. The navigation bar controls display and hide.

- (void)initUI
    [self n eedNavBar:NO ]; // hide the navigation bar.

Parameter controls display or hide.

The default global definition is display, so as long as the hidden page is set, the displayed page does not need to be set.

3. Navigation bar text or icon display control

Method definition:

//! set the left navigation bar button as text or picture
-(UIViewController*)leftNav:(NSString*)title img:(id)imgOrName;

//! set the button on the right navigation bar as text or picture
-(UIViewController*)rightNav:(NSString*)title img:(id)imgOrName;

1. Set title parameters (text is displayed)



2. Set picture parameters (picture will be displayed)


4. Click events in navigation bar:

Method definition:

//! the default click event return yes in the left navigation bar will call stpop return method.

//! default click events on the right navigation bar

Example code:


5. Hide the dotted line at the bottom of the navigation bar

There is a dotted shadow line between the navigation bar and the main UI interface, which can be hidden.

 - (void)initUI
    [self hideNavShadow];

6. Global settings: generally set in OnInit.

    [[[[[[UINavigationBar globalSetting] barTintColor:MainColor] tintColor:ColorWhite] titleTextAttributes:@{NSForegroundColorAttributeName : ColorWhite}]
     translucent:NO] backgroundImage:@"circle_bg" stretch:YES];



If the framework doesn’t handle it and needs to be customized, it will be handled in a native way.


Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]