- 1
- 0
- 约5.03千字
- 约 10页
- 2017-05-12 发布于天津
- 举报
定制iOS 7中的导航栏和状态栏.doc
定制iOS 7中的导航栏和状态栏近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7。最新的iOS 7外观上有大量的改动。从开发者的角度来看,导航栏和状态栏就发生了明显的变化。状态栏现在是半透明的了,这也就意味着导航栏会显示在状态栏后面。有些情 况下,导航栏的背景图片可以延伸显示到状态栏后面。
?
之前我曾经写过一篇关于如何定制导航栏的文章。不过现在是时候对其进行更新了。下面就是本文将要介绍的内容:
iOS 7中默认的导航栏
设置导航栏的背景颜色
在导航栏中使用背景图片
定制返回按钮的颜色
修改导航栏标题的字体
修改导航栏标题为图片
添加多个按钮
修改状态栏的风格
隐藏状态栏
总结
本文提供的代码需要用Xcode 5来执行。如果你还在使用老版本的Xcode,那么在运行示例之前请将Xcode升级到Xcode 5。
?
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:里面添加如下代码来修改颜色:
[[UINavigationBar?appearance]?setBarTintColor:[UIColor?yellowColor]];?
效果如下图所示:
一般情况,我们都会使用自己的颜色,下面这个宏用来设置RGB颜色非常方便:
#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)。如下示例:
[[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:方法为导航栏设置自定义图片。如下代码所示:
[[UINavigationBar?appearance]?setBackgroundImage:[UIImage?imageNamed:@nav_bg.png]?forBarMetrics:UIBarMetricsDefault];?
示例工程中提供了两个背景图片:nav_bg.png 和 nav_bg_ios7.png。运行一下试试看吧,如下效果:
定制返回按钮的颜
在iOS 7中,所有的按钮都是无边框的。其中返回按钮会有一个V型箭头,以及上一个屏幕中的标题(如果上一屏幕的标题是空,那么就显示”返回”)。要想给返回按钮着色,可以使用tintColor属性。如下代码所示:
[[UINavigationBar?appearance]?setTintColor:[UIColor?whiteColor]];?
除了返回按钮,tintColor属性会影响到所有按钮标题和图片。
如果想要用自己的图片替换V型,可以设置图片的backI
您可能关注的文档
- 安全技术交底(一级11.4).doc
- 安全检查风险评价.docx
- 安全生产月宣传车稿件.doc
- 安居客使用技巧.pptx
- 安徽省“江南十校”2017届高三3月联考理综生物试题及答案.doc
- 安徽省建设工程施工图设计文件审查项目概况表(3版).doc
- 安装安装office2007,2010提示“WindowsInstaller服务不能更新一个或多个受保护的Windows文件”解决方法.doc
- 宏经 第13章作业.docx
- 宏观经济学IS—LM曲线分析.doc
- 官方与半官方机构 习题.doc
- 广东省广州省实验中学教育集团2025-2026学年八年级上学期期中考试物理试题(解析版).docx
- 广东省广州大学附属中学2025-2026学年八年级上学期奥班期中物理试题(解析版).docx
- 广东省广州市第八十六中学2025-2026学年八年级上学期期中物理试题(含答案).docx
- 广东省广州市第八十九中学2025-2026学年八年级上学期期中考试物理试题(解析版).docx
- 广东省广州市第二中学2025-2026学年八年级上学期期中考试物理试题(含答案).docx
- 广东省广州市第八十六中学2025-2026学年八年级上学期期中物理试题(解析版).docx
- 广东省广州市第八十九中学2025-2026学年八年级上学期期中考试物理试题(含答案).docx
- 广东省广州市第二中学2025-2026学年八年级上学期期中考试物理试题(解析版).docx
- 2026《中国人寿上海分公司营销员培训体系优化研究》18000字.docx
- 《生物探究性实验教学》中小学教师资格模拟试题.docx
原创力文档

文档评论(0)