iOS开发 : Navigation Bar的简单设置

前面的一篇文章《iOS开发16:使用Navigation Controller切换视图》中的小例子在运行时,屏幕上方出现的工具栏就是Navigation Bar,而所谓UINavigationItem就可以理解为Navigation Bar中的内容,通过编辑UINavigationItem,我们可以使得在Navigation Bar中显示想要的东西,比如设置标题、添加按钮等。

这篇博客将会以一个小例子来演示如何设置UINavigationItem。

现在我用的是Xcode 4.3,在使用上跟Xcode 4.2差不多。

1、首先运行Xcode 4.3,创建一个Single View Application,名称为UINavigationItem Tes

2、其次,我们要使得程序运行时能够显示Navigation Bar:

2.1 单击AppDelegate.h,向其中添加属性:

@property (strong, nonatomic) UINavigationController *navController;

2.2 打开AppDelegate.m,在@synthesize viewController = _viewController;之后添加代码:

@synthesize navController;

#pragma mark -
#pragma mark Application lifecycle

2.3 修改didFinishLaunchingWithOptions方法代码如下:

- (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;
}

此时运行程序,会发现出现了Navigation Bar:

下面讲一下关于NavigationItem的简单设置。

3、设置标题:

打开ViewController.m,在viewDidLoad方法中[super viewDidLoad];之后添加代码:

self.navigationItem.title = @"标题";

运行:

4、自定义标题,设置titleView:

如果我们想改变标题的颜色和字体,就需要自己定义一个UILabel,并且已经设置好这个Label的内容,可以设置自己想要的字体、大小和颜色等。然后执行self.navigationItem.titleView = myLabel;就可以看到想要的效果。

4.1 打开ViewController.h,向其中添加属性:

@property (strong, nonatomic) UILabel *titleLabel;

4.2 打开ViewController.m,在@implementation ViewController下面一行添加代码:

@synthesize titleLabel;

4.3 在viewDidLoad方法中,去掉self.navigationItem.title = @"标题";,并添加代码:

//自定义标题
titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0 , 100, 44)];
titleLabel.backgroundColor = [UIColor clearColor];  //设置Label背景透明
titleLabel.font = [UIFont boldSystemFontOfSize:20];  //设置文本字体与大小
titleLabel.textColor = [UIColor colorWithRed:(0.0/255.0) green:(255.0 / 255.0) blue:(0.0 / 255.0) alpha:1];  //设置文本颜色
titleLabel.textAlignment = UITextAlignmentCenter;
titleLabel.text = @"自定义标题";  //设置标题
self.navigationItem.titleView = self.titleLabel;

运行:

实际上,不仅仅可以将titleView设置成Label,只要是UIView的对象都可以设为titleView,例如,将4.3中的代码改成:

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

则运行起来效果如下:

5、为Navigation Bar添加左按钮

以下是进行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)

其实很简单,只要定义好一个UIBarButtonItem,然后执行上述某行代码就行了。

5.1 为了使得运行时不出错,我们在ViewController.m中添加一个空方法,由将要创建的左右按钮使用:

//空方法
-(void)myAction {

}

5.2 添加一个左按钮:

在ViewDidLoad方法最后添加代码:

//添加左按钮
UIBarButtonItem *leftButton = [[UIBarButtonItem alloc]
                                        initWithTitle:@"左按钮"
                                        style:UIBarButtonItemStylePlain
                                        target:self
                                        action:@selector(myAction)];
[self.navigationItem setLeftBarButtonItem:leftButton];

运行效果如下:

创建一个UIBarButtonItem用的方法主要有:

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

在第一个方法中,我们可以使用的按钮样式有:

UIBarButtonItemStyleBordered
UIBarButtonItemStyleDone
UIBarButtonItemStylePlain

效果分别如下:

看上去第一个和第三个样式效果是一样的。

6、添加一个右按钮

在ViewDidLoad方法最后添加代码:

//添加右按钮
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc]
                                initWithBarButtonSystemItem:UIBarButtonSystemItemUndo
                                target:self
                                action:@selector(myAction)];
self.navigationItem.rightBarButtonItem = rightButton;

运行如下:

这里创建UIBarButtonItem用的方法是

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

用了系统自带的按钮样式,这些样式的标签和效果如下:

注意,UIBarButtonSystemItemPageCurl只能在Tool Bar上显示。

7、添加多个右按钮

在ViewDidLoad方法中最后添加代码:

//添加多个右按钮
UIBarButtonItem *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:UIBarButtonSystemItemFlexibleSpace
                                 target:nil
                                 action:nil];
UIBarButtonItem *rightButton5 = [[UIBarButtonItem alloc]
                                 initWithBarButtonSystemItem:UIBarButtonSystemItemOrganize
                                 target:self
                                 action:@selector(myAction)];
NSArray *buttonArray = [[NSArray alloc]
                        initWithObjects:rightButton1,rightButton2,
                        rightButton3,rightButton4,rightButton5, nil];
self.navigationItem.rightBarButtonItems = buttonArray;

为了更好的显示效果,把设置titleView以及设置leftBarButtonItem的代码注释掉,运行效果如下:

上面的UIBarButtonSystemItemFixedSpace和UIBarButtonSystemItemFlexibleSpace都是系统提供的用于占位的按钮样式。

8、设置Navigation Bar背景颜色

在viewDidLoad方法后面添加代码:

//设置Navigation Bar颜色
self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:(218.0/255.0) green:(228.0 / 255.0) blue:(250.0 / 255.0) alpha:1];

运行如下:

9、设置Navigation Bar背景图片

首先将准备好作为背景的图片拖到工程中,我用的图片名称是title_bg.png。

将上面的代码改成:

//设置Navigation Bar背景图片
UIImage *title_bg = [UIImage imageNamed:@"title_bg.png"];  //获取图片
CGSize titleSize = self.navigationController.navigationBar.bounds.size;  //获取Navigation Bar的位置和大小
title_bg = [self scaleToSize:title_bg size:titleSize];//设置图片的大小与Navigation Bar相同
[self.navigationController.navigationBar
     setBackgroundImage:title_bg
     forBarMetrics:UIBarMetricsDefault];  //设置背景

之后,在ViewController.m中添加一个方法用于调整图片大小:

//调整图片大小
- (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size{
    UIGraphicsBeginImageContext(size);
    [img drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return scaledImage;
}

运行:

//设置Navigation Bar背景图片,但是上面的状态栏和是自己原本自带的效果 ,不和导航栏一起,这个方便不适用,在iOS7之后,基本使用上面那个方法,也没有仔细看,直接复制过来的代码

主要是用下面这个方法:

    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"Nav_back_image.jpg"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];

时间: 2024-10-24 23:48:31

iOS开发 : Navigation Bar的简单设置的相关文章

文顶顶 iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发UI篇—iOS开发中三种简单的动画设置

iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所

iOS开发中三种简单的动画设置

iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageView.bounds = rect; // commitAnimations,将beginAnimation之后的所有动画提交并生成动

iOS开发UI篇—Quartz2D简单使用(三)

iOS开发UI篇-Quartz2D简单使用(三) 一.通过slider控制圆的缩放 1.实现过程 新建一个项目,新建一个继承自UIview的类,并和storyboard中自定义的view进行关联. 界面搭建,如图: 代码示例: YYViewController.m文件 1 // 2 // YYViewController.m 3 // 04-对圆进行缩放 4 // 5 // Created by apple on 14-6-11. 6 // Copyright (c) 2014年 itcase.

iOS开发UI篇-UIWindow简单介绍

iOS开发UI篇—UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控制器的view添加到UIWindow上,于是控制器的view就显示在屏幕上了 一个iOS程序之所以能显示到屏幕上,完全是因为它有UIWindow.也就说,没有UIWindow,就看不见任何UI界面 补充:UIWindow是创建的第一个视图控件(创建的第一个

iOS开发数据库篇—FMDB简单介绍

iOS开发数据库篇—FMDB简单介绍 一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了很多麻烦.冗余的C语言代码 对比苹果自带的Core Data框架,更加轻量级和灵活 提供了多线程安全的数据库操作方法,有效地防止数据混乱 3.FMDB的github地址 https://github.com/ccgus/fmdb 二.核心类 FMDB有三个主要的类 (1)FMDa

ios开发UI基础—Kvc简单介绍

一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observer 键值观察.监听某一个模型的属性,只要模型属性的值一变化就通知你. 二.使用KVC 1.KVC基本使用介绍 (1)代码示例: 新建一个命令行项目,用以演示KVC的用法 完成之后为项目添加一个Person类. 为Person类添加两个属性(name和age),注意这两个属性的类型. 1 #import <Foundation/Fo

文顶顶 iOS开发UI篇—Kvc简单介绍

ios开发UI篇—Kvc简单介绍 一.KVC简单介绍 KVC key valued coding 键值编码 KVC通过键值间接编码 补充: 与KVC相对的时KVO,即key valued observer 键值观察.监听某一个模型的属性,只要模型属性的值一变化就通知你. 二.使用KVC 1.KVC基本使用介绍 (1)代码示例: 新建一个命令行项目,用以演示KVC的用法 完成之后为项目添加一个Person类. 为Person类添加两个属性(name和age),注意这两个属性的类型. 1 #impo

iOS开发UI篇—UIWindow简单介绍

iOS开发UI篇—UIWindow简单介绍 - 文顶顶 - 博客园 文顶顶 iOS开发UI篇—UIWindow简单介绍 iOS开发UI篇—UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控制器的view添加到UIWindow上,于是控制器的view就显示在屏幕上了 一个iOS程序之所以能显示到屏幕上,完全是因为它有UIWi