iOS开发 : Navigation Bar的简单设置
2016-05-26 12:31
706 查看
前面的一篇文章《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
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/82c40986bd0b71f604f5fd35ee64e942.png)
2、其次,我们要使得程序运行时能够显示Navigation Bar:
2.1 单击AppDelegate.h,向其中添加属性:
2.2 打开AppDelegate.m,在@synthesize viewController = _viewController;之后添加代码:
2.3 修改didFinishLaunchingWithOptions方法代码如下:
此时运行程序,会发现出现了Navigation Bar:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/169c9b86a34337d9e55651109a56c335.png)
下面讲一下关于NavigationItem的简单设置。
3、设置标题:
打开ViewController.m,在viewDidLoad方法中[super viewDidLoad];之后添加代码:
运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/a720693e595abb44a7a76d64dfe183a4.png)
4、自定义标题,设置titleView:
如果我们想改变标题的颜色和字体,就需要自己定义一个UILabel,并且已经设置好这个Label的内容,可以设置自己想要的字体、大小和颜色等。然后执行self.navigationItem.titleView = myLabel;就可以看到想要的效果。
4.1 打开ViewController.h,向其中添加属性:
4.2 打开ViewController.m,在@implementation ViewController下面一行添加代码:
4.3 在viewDidLoad方法中,去掉self.navigationItem.title = @"标题";,并添加代码:
运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/709f9bae8082d920d91cf23d36455724.png)
实际上,不仅仅可以将titleView设置成Label,只要是UIView的对象都可以设为titleView,例如,将4.3中的代码改成:
则运行起来效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/ab1aa461d6eba917f0598f1c040b19fa.png)
5、为Navigation Bar添加左按钮
以下是进行leftBarButtonItem设置的代码:
其实很简单,只要定义好一个UIBarButtonItem,然后执行上述某行代码就行了。
5.1 为了使得运行时不出错,我们在ViewController.m中添加一个空方法,由将要创建的左右按钮使用:
5.2 添加一个左按钮:
在ViewDidLoad方法最后添加代码:
运行效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/d0beac66564d89ede6086b3bfb4fbd78.png)
创建一个UIBarButtonItem用的方法主要有:
在第一个方法中,我们可以使用的按钮样式有:
效果分别如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/7fe5633fef87981b579077e00ac1dfdd.png)
看上去第一个和第三个样式效果是一样的。
6、添加一个右按钮
在ViewDidLoad方法最后添加代码:
运行如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/0215f4c319ceac8d477571cf57e05e9d.png)
这里创建UIBarButtonItem用的方法是
用了系统自带的按钮样式,这些样式的标签和效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/535bdbe3abb877f0b2e9bcabe358a444.png)
注意,UIBarButtonSystemItemPageCurl只能在Tool Bar上显示。
7、添加多个右按钮
在ViewDidLoad方法中最后添加代码:
为了更好的显示效果,把设置titleView以及设置leftBarButtonItem的代码注释掉,运行效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/b5cd89abef7490e2fe879972de2ed090.png)
上面的UIBarButtonSystemItemFixedSpace和UIBarButtonSystemItemFlexibleSpace都是系统提供的用于占位的按钮样式。
8、设置Navigation Bar背景颜色
在viewDidLoad方法后面添加代码:
运行如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/a3b1436dfe466597734020fa2164779c.png)
9、设置Navigation Bar背景图片
首先将准备好作为背景的图片拖到工程中,我用的图片名称是title_bg.png。
将上面的代码改成:
之后,在ViewController.m中添加一个方法用于调整图片大小:
运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/d15132c700936b8031ed16d9aabcd742.png)
//设置Navigation Bar背景图片,但是上面的状态栏和是自己原本自带的效果 ,不和导航栏一起,这个方便不适用,在iOS7之后,基本使用上面那个方法,也没有仔细看,直接复制过来的代码
主要是用下面这个方法:
这篇博客将会以一个小例子来演示如何设置UINavigationItem。
现在我用的是Xcode 4.3,在使用上跟Xcode 4.2差不多。
1、首先运行Xcode 4.3,创建一个Single View Application,名称为UINavigationItem Tes
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/82c40986bd0b71f604f5fd35ee64e942.png)
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:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/169c9b86a34337d9e55651109a56c335.png)
下面讲一下关于NavigationItem的简单设置。
3、设置标题:
打开ViewController.m,在viewDidLoad方法中[super viewDidLoad];之后添加代码:
self.navigationItem.title = @"标题";
运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/a720693e595abb44a7a76d64dfe183a4.png)
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;
运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/709f9bae8082d920d91cf23d36455724.png)
实际上,不仅仅可以将titleView设置成Label,只要是UIView的对象都可以设为titleView,例如,将4.3中的代码改成:
UIButton *button = [UIButtonbuttonWithType: UIButtonTypeRoundedRect]; [button setTitle: @"按钮" forState: UIControlStateNormal]; [button sizeToFit]; self.navigationItem.titleView = button;
则运行起来效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/ab1aa461d6eba917f0598f1c040b19fa.png)
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];
运行效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/d0beac66564d89ede6086b3bfb4fbd78.png)
创建一个UIBarButtonItem用的方法主要有:
[UIBarButtonItemalloc]initWithTitle:(NSString *) style:(UIBarButtonItemStyle) target:(id) action:(SEL) [UIBarButtonItemalloc]initWithBarButtonSystemItem:(UIBarButtonSystemItem) target:(id) action:(SEL)
在第一个方法中,我们可以使用的按钮样式有:
UIBarButtonItemStyleBordered UIBarButtonItemStyleDone UIBarButtonItemStylePlain
效果分别如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/7fe5633fef87981b579077e00ac1dfdd.png)
看上去第一个和第三个样式效果是一样的。
6、添加一个右按钮
在ViewDidLoad方法最后添加代码:
//添加右按钮 UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemUndo target:self action:@selector(myAction)]; self.navigationItem.rightBarButtonItem = rightButton;
运行如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/0215f4c319ceac8d477571cf57e05e9d.png)
这里创建UIBarButtonItem用的方法是
[UIBarButtonItemalloc]initWithBarButtonSystemItem:(UIBarButtonSystemItem) target:(id) action:(SEL)
用了系统自带的按钮样式,这些样式的标签和效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/535bdbe3abb877f0b2e9bcabe358a444.png)
注意,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的代码注释掉,运行效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/b5cd89abef7490e2fe879972de2ed090.png)
上面的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];
运行如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/a3b1436dfe466597734020fa2164779c.png)
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; }
运行:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/d15132c700936b8031ed16d9aabcd742.png)
//设置Navigation Bar背景图片,但是上面的状态栏和是自己原本自带的效果 ,不和导航栏一起,这个方便不适用,在iOS7之后,基本使用上面那个方法,也没有仔细看,直接复制过来的代码
主要是用下面这个方法:
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"Nav_back_image.jpg"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/06/fc216a081e737bda7b55c9caa54e0af6.png)
相关文章推荐
- iOS 最新版 CocoaPods 的安装/使用流程
- iOS开发~设置label上文字显示不同大小、颜色、字体类型
- IOS照片颠倒分析及移动/页面端的处理策略和思路
- iOS开发之手势解锁详解
- iOS CoreAnimation 关键帧动画 CAKeyframeAnimation
- iOS开发之深复制浅复制
- iOS推送的众多坑
- iOS-本地通知
- iOS系统自带分享功能
- iOS推送的众多坑
- iOS开发——keychain的使用
- iOS开发之计时器
- iOS 极光推送
- 利用anchorPoint和position实现缩放
- IOS 使用容联视频时隐藏本地视频,不让对方看到自己
- iOS 静态库,动态库与 Framework 浅析
- iOS开发之获取运营商和WIFI
- iOS制作演示gif
- iOS配置SSO授权
- 关于10.11不能安装CocoaPods的问题