IOS7的状态栏和导航栏

2024-06-18 21:58
文章标签 ios7 状态栏 导航

本文主要是介绍IOS7的状态栏和导航栏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

iOS 7中默认的导航栏

在开始定制之前,我们先来看看iOS 7中默认导航栏的外观。通过Xcode用Single View Controller模板创建一个工程。然后将view controller嵌入到一个navigation controller中。如果你不想从头开始,那么也可以在这里下载到这个示例工程。

Xcode 5包含有iOS 6和iOS 7模拟器,我们可以在这两个不同的模拟器版本中运行示例程序,进行对比,如下图所示:

如上图所示,在iOS 7中的导航栏默认情况下跟状态栏是交织在一起的,并且它的颜色也被修改为亮灰色。

设置导航栏的背景颜色

在iOS 7中,不再使用tintColor属性来设置导航栏的颜色,而是使用barTintColor属性来修改背景色。我们可以在AppDelegate.m文件中的方法didFinishLaunchingWithOptions:里面添加如下代码来修改颜色:

1
[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]];

效果如下图所示:

一般情况,我们都会使用自己的颜色,下面这个宏用来设置RGB颜色非常方便:

1
#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

将上面这个宏放到AppDelegate.m文件中,然后通过这个宏来创建一个UIColor对象(根据指定的RGB)。如下示例:

1
[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

默认情况下,导航栏的translucent属性为YES。另外,系统还会对所有的导航栏做模糊处理,这样可以让iOS 7中导航栏的颜色更加饱和。如下图,是translucent值为NO和YES的对比效果:

要想禁用translucent属性,可以在Storyboard中选中导航栏,然后在Attribute Inspectors中,取消translucent的勾选。

在导航栏中使用背景图片

如果希望在导航栏中使用一个图片当做背景,那么你需要提供一个稍微高一点的图片(这样可以延伸到导航栏背后)。导航栏的高度从44 points(88 pixels)变为了64 points(128 pixels)。

我们依然可以使用setBackgroundImage:方法为导航栏设置自定义图片。如下代码所示:

1
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];

示例工程中提供了两个背景图片:nav_bg.png 和 nav_bg_ios7.png。运行一下试试看吧,如下效果:

定制返回按钮的颜

在iOS 7中,所有的按钮都是无边框的。其中返回按钮会有一个V型箭头,以及上一个屏幕中的标题(如果上一屏幕的标题是空,那么就显示”返回”)。要想给返回按钮着色,可以使用tintColor属性。如下代码所示:

1
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

除了返回按钮,tintColor属性会影响到所有按钮标题和图片。

如果想要用自己的图片替换V型,可以设置图片的backIndicatorImagebackIndicatorTransitionMaskImage。如下代码所示:

1
2
[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn.png"]];

图片的颜色是由tintColor属性控制的。

修改导航栏标题的字体

跟iOS 6一样,我们可以使用导航栏的titleTextAttributes属性来定制导航栏的文字风格。在text attributes字典中使用如下一些key,可以指定字体、文字颜色、文字阴影色以及文字阴影偏移量:

  • UITextAttributeFont – 字体key
  • UITextAttributeTextColor – 文字颜色key
  • UITextAttributeTextShadowColor – 文字阴影色key
  • UITextAttributeTextShadowOffset – 文字阴影偏移量key

如下代码所示,对导航栏的标题风格做了修改:

1
2
3
4
5
6
7
NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
    shadow.shadowOffset = CGSizeMake(0, 1);
    [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                                                           [UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,
                                                           shadow, NSShadowAttributeName,
                                                           [UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];

运行效果如下图所示:

修改导航栏标题为图片

如果要想将导航栏标题修改为一个图片或者logo,那么只需要使用下面这行代码即可:

1
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

上面的代码简单的修改了titleView属性,将一个图片赋值给它。注意:这不是iOS 7中的新功能,之前的iOS版本就可以已经有了。

具体效果如下图所示:

添加多个按钮

同样,这个技巧也不是iOS 7的,开发者经常会在导航栏中添加多个按钮,所以我决定在这里进行介绍。我们可以在导航栏左边或者右边添加多个按钮。例如,我们希望在导航栏右边添加一个照相机和分享按钮,那只需要使用下面的代码即可:

1
2
3
4
5
UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil];
UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:nil];

NSArray *actionButtonItems = @[shareItem, cameraItem];
self.navigationItem.rightBarButtonItems = actionButtonItems;

如下效果:

修改状态栏的风格

在老版本的iOS中,状态栏永远都是白色风格。而在iOS 7中,我们可以修改每个view controller中状态栏的外观。通过UIStatusBarStyle常量可以指定状态栏的内容是暗色或亮色。默认情况下,状态栏的显示是暗色。也就是说,状态栏上的时间、电池指示器和Wi-Fi信号显示为暗色。如果导航栏中使用暗色为背景,那么看起来的效果如下图所示:

如上图这种情况下,我们可能希望将导航栏的风格修改为亮色。这里有两个方法可以实现。在iOS 7中,我们可以在每个view controller中overridingpreferredStatusBarStyle:方法,如下所示:

1
2
3
4
-(UIStatusBarStyle)preferredStatusBarStyle
{
    return UIStatusBarStyleLightContent;
}

上面代码的效果如下图所示:

在iOS 7中,通过上面的方法来修改状态栏风格非常的棒。另外,我们也可以使用UIApplication的statusBarStyle方法来设置状态栏,不过,首先需要停止使用View controller-based status bar appearance。在project target的Info tab中,插入一个新的key,名字为View controller-based status bar appearance,并将其值设置为NO。

然后就可以使用下面的代码来设置状态栏风格了:

1
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

隐藏状态栏

有时候我们需要隐藏状态栏,那么此时我们在view controller中override方法prefersStatusBarHidden:即可,如下代码所示:

1
2
3
4
- (BOOL)prefersStatusBarHidden
{
    return YES;
}

这篇关于IOS7的状态栏和导航栏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073164

相关文章

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con

ArkTS开发系列之导航 (2.7动画)

上篇回顾: ArkTS开发系列之导航 (2.6 图形) 本篇内容:动画的学习使用 一、 知识储备 1. 布局更新动画 包含显式动画(animateTo)和属性动画(animation) 动画类型名称特点显式动画闭包内的变化都会触发动画执行, 可以做较复杂的动画属性动画属性变化时触发动画执行, 设置简单 说白了,显示动画就是靠闭包事件触发,属性动画是挂在组件身上的属性变化触发 显式动画

react实现导航守卫

React本身并没有像Vue那样的直接名为“导航守卫”的概念,但在React Router中,我们可以通过特定的方法和技术来模拟和实现类似的功能。以下是对React Router中模拟导航守卫的详解: 1. 导航守卫的概念 导航守卫:在路由切换之前执行的钩子函数,用于控制路由的跳转。在Vue Router中,这通常用于路由鉴权,即在路由跳转之前判断用户是否有权访问目标页面。React中的模拟:

为导航栏的li加上.selected样式

为导航栏的li加上.selected样式 HTML <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>myNav</title><link rel="stylesheet" type="text/css" href="main.css"></head><body><div class="nav-wr

升级iOS7后利用rvictl和wireshark抓包失效?

最近把一台设备升级到iOS7后,利用rvictl和wireshark抓包发现抓不了,无意中发现在装有xcode5的机器上可以抓包,看来rvictl与xcode是绑定的,升级到最新的iOS7后,必须要装上最新的xcode5版本才能抓包。 使用rvictl有一个前提是要获取设备的UDID,看网上不少教程都是从xcode中获取UDID,步骤相当繁琐,快速获取UDID用命令行才是王道,果然不出所料,很快

iOS7和iOS6适配,和保留之前的坐标编码习惯,不用刻意加减

//目的:用于iOS7和iOS6适配,和保留之前的坐标编码习惯,不用刻意加减/*方法1:*1。在vc中重写viewDidLayoutSubviews方法*2。是用下面2个方法之一;*3。frame为ios6风格,状态栏和导航栏为平铺*4。bounds为ios7风格,状态栏和导航栏为覆盖*5。优点,所有subview的坐标都一ios6的标准进行编写,支持push和present*6。缺点,在push

ios设置导航栏背景图片、返回按钮背景、标题颜色等等

在ios程序的编写过程中,很多时候我们都要自定义自己的UI,而不是使用cocoatouch中原有的。说起对UI的更改,很多时候我们只是修改一下原有UI的背景啊,颜色之类的,以达到新的要求。     在此之前呢,设置UINavigationController的背景颜色,我会使用如下的代码: 首先看.h文件 #import <UIKit/UIKit.h>@interface UI

4、MFC:菜单栏、工具栏与状态栏

菜单栏、工具栏与状态栏 1、菜单栏1.1 简介1.2 创建属性设置菜单消息成员函数 1.3 实例 2、工具栏2.1 简介工具栏属性2.2 创建消息CToolBar类的主要成员函数 2.3 实例 3、状态栏3.1 简介3.2 创建CStatusBar类状态栏创建 3.3 实例 1、菜单栏 1.1 简介 菜单在界面设计中是经常使用的一种元素,包括Windows系统中的窗口、智能终

html侧导航栏客服栏

ico 替换 ICO <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>返回顶部</title><script src="js/jquery-2.0.3.min.js" type="text/jav

CSS动画(动态导航栏)

1.项目简介 一个具有创意的导航菜单不仅能为你的大作业增色,还能展示你的技术实力。本文将分享一系列常用于期末大作业的CSS动画导航效果,这些效果不仅外观酷炫,而且易于实现。我们提供了一键复制的代码,让你能够快速集成到自己的项目中,节省时间,提高效率,让你的期末大作业脱颖而出。 2.完整代码 HTML <!DOCTYPE html> <html lang="en"> <head