iOS系统导航栏的自定义化

本文仅提供大家参考与交流,可能会有一些错误,欢迎大家指正。Xcode版本6.3.2。
大部分APP都应用了导航控制器(UINavigationController)标签控制器(UITableBarController)导航栏(UINavigationBar)的设定是非常重要的,系统的导航栏有很大的局限性,因此很多情况下都会使用自定义导航栏,或者修改系统导航栏。关于导航控制器以及导航的概念,再简单提一下,一个导航控制器只有一个导航栏。导航控制器可以有很多子视图控制器,子视图控制器上的导航栏的Item和标题可以不同,是因为每个子视图控制器都有一个导航项(UINavigationItem)。在任何子视图控制器上修改导航栏自身属性,会改变整个导航控制器的中的导航栏。在上一篇博文中有提到, 介绍导航控制器的概念
本文主要讲解的是基于系统导航栏的自定义使用方法,就是在不隐藏系统导航栏的情况下,修改导航栏的各个属性。

1.设置背景

创建导航控制器

    ViewController *viewCtrl = [[ViewController alloc] init];//预先创建导航控制器的根视图
    UINavigationController *navigationCtrl = [[UINavigationController alloc] initWithRootViewController:viewCtrl];//创建导航控制器
    self.window.rootViewController = navigationCtrl;

可以给导航控制器的根视图设置一个标题。
iOS系统导航栏的自定义化_第1张图片
系统导航栏默认是这种颜色(跟白色有区别)的,而且带透明效果,导航栏的字体是黑色的,没有任何按钮。
在导航控制器的子视图中设置

    self.navigationController.navigationBar.translucent = NO;//设置导航栏透明度 NO表示不透明
    self.navigationController.navigationBar.tintColor = [UIColor greenColor];//改变系统按钮的线条颜色
    self.navigationController.navigationBar.barTintColor = [UIColor yellowColor];//改变导航栏的背景颜色,注意使用.backgroundColor去设置背景颜色,只会有淡淡的一层,跟没效果一样
    UIBarButtonItem *leftItem1 = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:self action:@selector(clickAction)];//设置一个系统Item
    self.navigationItem.leftBarButtonItem = leftItem1;//添加到导航项的左按钮

iOS系统导航栏的自定义化_第2张图片
系统导航栏也是可以设置背景的图片的

    self.navigationController.navigationBar.barStyle = UIBarStyleBlack;//设置导航栏背景为黑色,标题变成白色 ,目的是让状态栏字体变成白色
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_bg_all-64@2x"] forBarMetrics:UIBarMetricsDefault];//设置导航栏的背景图片

iOS系统导航栏的自定义化_第3张图片
导航栏的背景图片设置完成后,就很像自定义导航栏了,设置状态栏字体颜色 iOS结合导航栏的状态栏字体颜色设置
导航的标题的颜色也变成了白色,是因为设置了UIBarStyleBlack,这个方法虽然用不到它的背景,但是真的很好用,如何设置自定义标题字体会在后面介绍。

2.NavigationItem上的按钮

@property(nonatomic,copy) NSArray *leftBarButtonItems NS_AVAILABLE_IOS(5_0);//从导航栏的左到右设置按钮,如果数量过多会把标题往右移
@property(nonatomic,copy) NSArray *rightBarButtonItems NS_AVAILABLE_IOS(5_0);//从导航栏的右到左设置按钮,如果数量过多会把标题往左移
@property(nonatomic,retain) UIBarButtonItem *leftBarButtonItem;//就是leftBarButtonItems第一个元素
@property(nonatomic,retain) UIBarButtonItem *rightBarButtonItem;//就是rightBarButtonItems第一个元素
@property(nonatomic,retain) UIBarButtonItem *backBarButtonItem;//这个是返回按钮,一般push操作后会自带的,可以进行pop操作。显示在最左边,其实就是leftBarButtonItem。

这些按钮都是UIBarButtonItem,这个按钮的初始化方法有很多

    UIBarButtonItem *systemItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks target:self action:@selector(clickAction)];//设置一个系统Item
    UIBarButtonItem *imageItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"11.jpg"] style:UIBarButtonItemStylePlain target:self action:@selector(clickAction)];//带图片的按钮
    UIBarButtonItem *titleItem = [[UIBarButtonItem alloc] initWithTitle:@"文字" style:UIBarButtonItemStylePlain target:self action:@selector(clickAction)];//设置一个带文字的Item
//    设置自定义View,一般设置一个UIButton
    UIButton *customButton = [UIButton buttonWithType:UIButtonTypeCustom];
    customButton.frame = CGRectMake(0, 0, 25, 25);
    [customButton setBackgroundImage:[UIImage imageNamed:@"11.jpg"] forState:UIControlStateNormal];
    [customButton addTarget:self action:@selector(clickAction) forControlEvents:UIControlEventTouchUpInside];
    UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithCustomView:customButton];//把button的视图交给Item
    self.navigationItem.leftBarButtonItems = @[systemItem,imageItem];//添加到导航项的左按钮
    self.navigationItem.rightBarButtonItems = @[titleItem,customItem];//添加到导航项的右按钮

iOS系统导航栏的自定义化_第4张图片
那么来看一下效果:
从左到右
第一个按钮使用的是UIBarButtonSystemItem,这里面有很多很多的系统按钮类型(Xcode里自己command点进去看看),其实有些还是挺好看的,比如著名的“墨迹天气”的导航栏中用了两个系统按钮。
第二个,好吧,让我们看下为什么会变成这个样子-_-!个人英语水平捉急,并不能很好的理解这个方法。这个方法设置的图片会按照原图的大小来设置按钮,相当过分!过分也算了,图都没有!!!不是很推荐这个方法来设置自定义按钮。
第三个,使用了一个custom view一般都会设置一个按钮,推荐使用这种,而且大小也是可控的,非常方便。
第四种,直接使用文字作为按钮,也非常实用。

3.设置标题视图

第一种方法,设置导航栏标题的字体,大小,颜色,阴影。这个是建立在导航栏上的,而不是导航项,因此整个导航控制器都改变。不能用简单的navigationBar.title.color这样区设置,你会发现根本没有这个属性。

    //建立属性的可变字典
    NSMutableDictionary *attributeDict = [NSMutableDictionary dictionaryWithObject:[UIColor greenColor] forKey:NSForegroundColorAttributeName];//添加颜色属性
    //    向可变字典中添加字体属性
    [attributeDict setObject:[UIFont italicSystemFontOfSize:18] forKey:NSFontAttributeName];
    NSShadow *shadow = [NSShadow alloc];
    shadow.shadowColor = [UIColor orangeColor];//阴影的颜色
    shadow.shadowOffset = CGSizeMake(2, 2);//阴影的偏移量
    shadow.shadowBlurRadius = 2;//模糊半径
    //  添加阴影属性
    [attributeDict setObject:shadow forKey:NSShadowAttributeName];
    //        设置导航栏标题字体属性,是一个字典
    self.navigationController.navigationBar.titleTextAttributes = attributeDict;

iOS系统导航栏的自定义化_第5张图片
可能这个标题看起来有点浮夸- -,只是为了演示效果,大家各取所求。
第二种方法是通过导航项来设置,导航项UINavigationItem有个属性是titleView。

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 20)];
    titleLabel.text = @"自定义标题视图";
    self.navigationItem.titleView = titleLabel;//设置标题视图

该方法设置也很简单,而且是设置当前子视图的。比较灵活。

总结一下,一般的导航栏其实不需要隐藏系统导航栏,通过上面几种方法就可以改变很多属性,非常实用,希望能给大家带来帮助。

你可能感兴趣的:(ios学习笔记)