Simple settings of Navigation Bar

In the previous article "iOS development 16: using Navigation Controller to switch views", the toolbar at the top of the screen is the Navigation Bar at runtime, the so-called UINavigationItem can be understood as the content in the Navigation Bar. By editing UINavigationItem, We can display what we want in the Navigation Bar, such as setting the title and adding buttons.

This blog will use a small example to demonstrate how to set UINavigationItem.

Now I use Xcode 4.3, which is similar to Xcode 4.2.

1. First Run Xcode 4.3 and create a Single View Application named UINavigationItem Test:

2. We need to enable the Navigation Bar to be displayed when the program is running:

2.1 click AppDelegate. h to add properties to it:

@property (strong, nonatomic) UINavigationController *navController;

 

 

2.2 Open AppDelegate. m and add the code after @ synthesize viewController = _ viewController:

@synthesize navController;#pragma mark - #pragma mark Application lifecycle

 

 

 

2.3 The code for modifying didfinishlaunchingwitexceptions is as follows:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // Override point for customization after application launch.    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];        self.navController = [[UINavigationController alloc] initWithRootViewController:self.viewController];     [self.window addSubview:navController.view];        [self.window makeKeyAndVisible];    return YES;}

 

 

When you run the program, you will find the Navigation Bar:

The following describes the simple settings of NavigationItem.

3. Set the title:

Open ViewController. m and [super viewDidLoad] In the viewDidLoad method. Then add the Code:

Self. navigationItem. title = @ "title ";

 

 

Run:

4. Customize the title and set titleView:

If we want to change the title Color and font, we need to define a UILabel and set the content of this Label. We can set the font, size, and color we want. Then execute self. navigationItem. titleView = myLabel; to see the desired effect.

4.1 open ViewController. h and add properties to it:

@property (strong, nonatomic) UILabel *titleLabel;

 

 

4.2 open ViewController. m and add code under @ implementation ViewController:

@synthesize titleLabel;

 

 

4.3 In the viewDidLoad method, remove self. navigationItem. title = @ "title"; and add the Code:

// Custom title titleLabel = [[UILabel alloc] initWithFrame: CGRectMake (0, 0,100, 44)]; titleLabel. backgroundColor = [UIColor clearColor]; // set the Label background to transparent titleLabel. font = [UIFont boldSystemFontOfSize: 20]; // set the text font and size titleLabel. textColor = [UIColor colorWithRed :( 0.0/255.0) green :( 255.0/255.0) blue :( 0.0/255.0) alpha: 1]; // set the text color titleLabel. textAlignment = UITextAlignmentCenter; titleLabel. text = @ "Custom title"; // set the title self. navigationItem. titleView = self. titleLabel;

 

 

Run:

In fact, you can not only set titleView to Label, but also set any object in UIView as titleView. For example, you can change the code in 4.3:

UIButton * button = [UIButtonbuttonWithType: Custom]; [button setTitle: @ "button" forState: UIControlStateNormal]; [button sizeToFit]; self. navigationItem. titleView = button;

 

 

The running result is as follows:

5. Add the left button for the Navigation Bar

The following code sets leftBarButtonItem:

self.navigationItem.leftBarButtonItem = (UIBarButtonItem *)self.navigationItem.leftBarButtonItems = (UIBarButtonItem *)self.navigationItemsetLeftBarButtonItem:(UIBarButtonItem *)self.navigationItemsetLeftBarButtonItem:(UIBarButtonItem *) animated:(BOOL)self.navigationItemsetLeftBarButtonItems:(NSArray *)self.navigationItemsetLeftBarButtonItems:(NSArray *) animated:(BOOL)

 

 

In fact, it is very easy to define a UIBarButtonItem and then execute the above line of code.

5.1 In order to avoid errors during running, we add an empty method in ViewController. m, which is used by the left and right buttons to be created:

// Empty method-(void) myAction {}

 

 

5.2 Add a left button:

Add the code at the end of the ViewDidLoad method:

// Add the left button UIBarButtonItem * leftButton = [[UIBarButtonItem alloc] initWithTitle: @ "left button" style: UIBarButtonItemStylePlain target: self action: @ selector (myAction)]; [self. navigationItem setLeftBarButtonItem: leftButton];

 

 

The running effect is as follows:

The following methods are used to create a UIBarButtonItem:

[UIBarButtonItemalloc]initWithTitle:(NSString *) style:(UIBarButtonItemStyle) target:(id) action:(SEL)[UIBarButtonItemalloc]initWithBarButtonSystemItem:(UIBarButtonSystemItem) target:(id) action:(SEL)

 

 

In the first method, we can use the following button styles:

UIBarButtonItemStyleBorderedUIBarButtonItemStyleDoneUIBarButtonItemStylePlain

 

 

The results are as follows:

It seems that the first and third style have the same effect.

6. Add a right button

Add the code at the end of the ViewDidLoad method:

// Add the right button UIBarButtonItem * rightButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: target: self action: @ selector (myAction)]; self. navigationItem. rightBarButtonItem = rightButton;

 

 

Run the following command:

Here, the method used to create UIBarButtonItem is

 

[UIBarButtonItemalloc]initWithBarButtonSystemItem:(UIBarButtonSystemItem) target:(id) action:(SEL)

 

The button style that comes with the system is used. The labels and effects of these styles are as follows:

Tag	Effect	Tag	Effect
UIBarButtonSystemItemAction		UIBarButtonSystemItemPause
UIBarButtonSystemItemAdd		UIBarButtonSystemItemPlay
UIBarButtonSystemItemBookmarks		UIBarButtonSystemItemRedo
UIBarButtonSystemItemCamera		UIBarButtonSystemItemRefresh
UIBarButtonSystemItemCancel		UIBarButtonSystemItemReply
UIBarButtonSystemItemCompose		UIBarButtonSystemItemRewind
UIBarButtonSystemItemDone		UIBarButtonSystemItemSave
UIBarButtonSystemItemEdit		UIBarButtonSystemItemSearch
UIBarButtonSystemItemFastForward		UIBarButtonSystemItemStop
UIBarButtonSystemItemOrganize		UIBarButtonSystemItemTrash
UIBarButtonSystemItemPageCurl		UIBarButtonSystemItemUndo

 

 

Note that UIBarButtonSystemItemPageCurl can only be displayed on the Tool Bar.

7. add multiple right buttons

Add the code in the ViewDidLoad method:

// Add multiple right buttons UIBarButtonItem * rightButton1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemDone target: self action: @ selector (myAction)]; UIBarButtonItem * rightButton2 = [[UIBarButtonItem alloc] failed: Invalid target: nil action: nil]; UIBarButtonItem * rightButton3 = [[UIBarButtonItem alloc] failed: Invalid target: self action: @ selector (myAction)]; UIBarButtonItem * rightButton4 = [[UIBarButtonItem alloc] Priority: Destination target: nil action: nil]; optional * rightButton5 = [[UIBarButtonItem alloc] Priority: export target: self action: @ selector (myAction)]; NSArray * buttonArray = [[NSArray alloc] values: rightButton1, rightButton2, rightButton3, rightButton4, rightButton5, nil]; self. navigationItem. rightBarButtonItems = buttonArray;

 

 

For better display effect, comment out the code for setting titleView and leftBarButtonItem. The running effect is as follows:

The above UIBarButtonSystemItemFixedSpace and UIBarButtonSystemItemFlexibleSpace are the button styles provided by the system for placeholder.

8. Set the background color of the Navigation Bar.

Add the code after the viewDidLoad method:

// Set the Navigation Bar color self. navigationController. navigationBar. tintColor = [UIColor colorWithRed :( 218.0/255.0) green :( 228.0/255.0) blue :( 250.0/255.0) alpha: 1];

 

 

 

Run the following command:

9. Set the Navigation Bar background image

First, drag the image with the background image to the project. The image name I use is title_bg.png.

Change the above Code:

// Set the Navigation Bar background image UIImage * title_bg = [UIImage imageNamed: @ "title_bg.png"]; // obtain the image CGSize titleSize = self. navigationController. navigationBar. bounds. size; // obtain the location and size of the Navigation Bar. title_bg = [self scaleToSize: title_bg size: titleSize]; // set the image size to the same as that of the Navigation Bar [self. navigationController. navigationBar setBackgroundImage: title_bg forBarMetrics: UIBarMetricsDefault]; // set the background

 

 

Then, add a method in ViewController. m to adjust the image size:

// Adjust the image size-(UIImage *) scaleToSize :( UIImage *) img size :( CGSize) size {UIGraphicsBeginImageContext (size); [img drawInRect: CGRectMake (0, 0, size. width, size. height)]; UIImage * scaledImage = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); return scaledImage ;}

 

 

Run: