iOS development: Simple setup for Navigation bar

A small example in the previous article "iOS Development 16: Switching views Using navigation Controller" at run time, the toolbar that appears above the screen is navigation bar, The so-called Uinavigationitem can be understood as navigation bar content, by editing the Uinavigationitem, we can make in navigation bar to display the things you want, such as setting the title, add buttons and so on.

This blog will show you how to set up a uinavigationitem with a small example.

Now I'm using Xcode 4.3, which is about the same as Xcode 4.2.

1. First run Xcode 4.3, create a single View application, named Uinavigationitem Tes

2. Second, we want to enable the program to display navigation Bar when running:

2.1 Click AppDelegate.h to add a property to it:

@property (Strong, nonatomic) Uinavigationcontroller *navcontroller;

2.2 Open APPDELEGATE.M, in @synthesize Viewcontroller = _viewcontroller; add code after:

@synthesize Navcontroller; #pragma #pragma Mark Application lifecycle

2.3 Modify the Didfinishlaunchingwithoptions method code 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 see that navigation Bar appears:

Let's talk about the simple settings for Navigationitem.

3. Set the title:

Open VIEWCONTROLLER.M, in the Viewdidload method [Super Viewdidload]; then add the code:

@" title ";

Run:

4, custom title, set Titleview:

If we want to change the color and font of the title, we need to define a uilabel, and we have set the label's content, you can set the font, size and color you want. Then execute Self.navigationItem.titleView = MyLabel; You can 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 the code below the @implementation Viewcontroller line:

@synthesize Titlelabel;

4.3 In the Viewdidload method, remove self.navigationItem.title = @ "title", and Add code:

//Custom TitleTitlelabel = [[UILabel alloc] Initwithframe:cgrectmake (0,0, -, -)];titlelabel.backgroundcolor= [Uicolor Clearcolor];//Set label background transparencyTitlelabel.font = [Uifont boldsystemfontofsize: -];//set text font and sizeTitlelabel.textcolor = [Uicolor colorwithred: (0.0/255.0) Green: (255.0/255.0) Blue: (0.0/255.0) Alpha:1];//Set Text colorTitlelabel.textalignment =Uitextalignmentcenter;titlelabel.text=@"Custom Title";//Set TitleSelf.navigationItem.titleView = Self.titlelabel;

Run:

In fact, not only can titleview be set to a label, as long as the UIView object can be set to Titleview, for example, the code in 4.3 is changed to:

UIButton *button =@ " button "= buttons;

It works as follows:

5. Add left button for navigation bar

The following is the code for the Leftbarbuttonitem setting:

Self.navigationItem.leftBarButtonItem = (Uibarbuttonitem *= (uibarbuttonitem * * * **) Animated: (BOOL)

It is very simple, just define good one uibarbuttonitem, and then execute one of the above lines of code.

5.1 To make the runtime error-free, we add an empty method to the VIEWCONTROLLER.M, which is used by the left and right buttons that will be created:

// Empty Method -(void) myaction {}

5.2 Add a Left button:

Add code at the end of the Viewdidload method:

// Add left button Uibarbuttonitem *leftbutton = [[Uibarbuttonitem alloc]                                          initwithtitle:@ " left button "                                            style:uibarbuttonitemstyleplain                                          target:self                                           Action: @selector (myaction)];[ Self.navigationitem Setleftbarbuttonitem:leftbutton];

The results are as follows:

The main ways to create a uibarbuttonitem are:

[Uibarbuttonitemalloc]initwithtitle: (NSString *) Style: (Uibarbuttonitemstyle) Target: (ID) Action: (SEL) [ Uibarbuttonitemalloc]initwithbarbuttonsystemitem: (Uibarbuttonsystemitem) Target: (ID) Action: (SEL)

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

Uibarbuttonitemstylebordereduibarbuttonitemstyledoneuibarbuttonitemstyleplain

The results were as follows:

It looks like the first and third style effects are the same.

6. Add a right button

Add code at the end of the Viewdidload method:

// Add right button Uibarbuttonitem *rightbutton = [[Uibarbuttonitem alloc]                                initwithbarbuttonsystemitem: Uibarbuttonsystemitemundo                                target:self                                = Rightbutton;

Run as follows:

The way to create Uibarbuttonitem here is

[Uibarbuttonitemalloc]initwithbarbuttonsystemitem: (Uibarbuttonsystemitem) Target: (ID) Action: (SEL)

Using the system's own button style, the labels and effects of these styles are as follows:

Note that the Uibarbuttonsystemitempagecurl can only be displayed on the tool bar.

7. Add Multiple Right buttons

Add the code last in the Viewdidload method:

//Add multiple right buttonsUibarbuttonitem *rightbutton1 =[[Uibarbuttonitem alloc] Initwithbarbuttonsystemitem:uibarbuttonsystemitemdone Target:self Action: @selector (myaction)]; Uibarbuttonitem*rightbutton2 =[[Uibarbuttonitem alloc] Initwithbarbuttonsystemitem:uibarbuttonsystemitemfixedspace Target:nil Action:nil]; Uibarbuttonitem*rightbutton3 =[[Uibarbuttonitem alloc] Initwithbarbuttonsystemitem:uibarbuttonsystemitemedit Target:self Action: @selector (myaction)]; Uibarbuttonitem*rightbutton4 =[[Uibarbuttonitem alloc] Initwithbarbuttonsystemitem:uibarbuttonsystemitemflexiblespa Ce target:nil Action:nil]; Uibarbuttonitem*rightbutton5 =[[Uibarbuttonitem alloc] Initwithbarbuttonsystemitem:uibarbuttonsystemitemorganize Target:self Action: @selector (myaction)]; Nsarray*buttonarray =[[Nsarray alloc] Initwithobjects:rightbutton1,rightbutton2, Rightbutton 3,rightbutton4,rightbutton5, Nil];self.navigationitem.rightbarbuttonitems= Buttonarray;

In order to better display the effect, the settings Titleview and set Leftbarbuttonitem code comments Off, the operation effect is as follows:

The above Uibarbuttonsystemitemfixedspace and uibarbuttonsystemitemflexiblespace are all system-provided button styles for placeholder.

8. Set navigation bar background color

Add code after the Viewdidload method:

// Set navigation bar color self.navigationController.navigationBar.tintColor = [Uicolor colorwithred: (218.0 /255.0) Green: (228.0255.0) Blue: (250.0255.0) Alpha:1];

Run as follows:

9. Set navigation bar background image

First drag the picture that was prepared as a background into the project, and the name of the image I used is title_bg.png.

Change the above code to:

// set navigation bar background picture UIImage *TITLE_BG = [UIImage imagenamed:@ "title_bg.png"];  // Get Pictures Cgsize titlesize = self.navigationController.navigationBar.bounds.size;  // get the position and size of navigation bar TITLE_BG = [self scaletosize:title_bg size:titlesize]; // set the picture to the same size as navigation bar [Self.navigationController.navigationBar      setbackgroundimage:title_bg     forbarmetrics: Uibarmetricsdefault];   // Set Background

After that, add a method in viewcontroller.m to resize the picture:

// Resize Picture -(UIImage *) Scaletosize: (UIImage *) img Size: (cgsize) size{    uigraphicsbeginimagecontext (size );    [img Drawinrect:cgrectmake (00, Size.width, Size.Height)];    UIImage* scaledimage = uigraphicsgetimagefromcurrentimagecontext ();    Uigraphicsendimagecontext ();     return scaledimage;}

Run:

Set the navigation bar background picture, but the above status bar and is their own original effect, not with the navigation bar, this convenience does not apply, after iOS7, the basic use of the above method, also did not look carefully, directly copied over the code

The main use of the following method:

    [Self.navigationController.navigationBar setbackgroundimage:[uiimage imagenamed:@ "nav_back_ Image.jpg"] forbarposition:uibarpositiontopattached Barmetrics:uibarmetricsdefault];

iOS development: Simple setup for Navigation bar