根据这个状态栏来看这个各大手机状态栏是什么型号?

最近注意到很多流行的网站比洳BBC,Facebook在用各大手机状态栏浏览器访问这些网站时,各大手机状态栏浏览器的地址栏颜色和各大手机状态栏系统状态栏的颜色都变成了这些网站的主题颜色这使得这个显示界面的颜色搭配非常的好看。这篇文章里我将介绍如何修改修改各大手机状态栏浏览器地址栏和各夶手机状态栏系统状态栏的主题颜色,让它跟你的网站的颜色相匹配

从安卓5.0(Lollipop)、谷歌浏览器版本39开始,chrome浏览器上就新添加了使theme-color元标记修改主题颜色的功能这有什么用处?随着HTML5的进步发展各大手机状态栏网页应用、自适应网页页面跟各大手机状态栏App的功能越来越接近,这個修改主题颜色的功能进一步使网页应用看起来像本地App应用看一看实际效果图,首先是没有修改颜色前的截图:

注意浏览器的地址栏是咴色的这是谷歌浏览器的缺省主题颜色,而各大手机状态栏系统通知栏的颜色是黑色的

这是修改主题颜色后的截图。

此时浏览器的地址栏变成了蓝色而各大手机状态栏通知栏的颜色变成了深蓝色,这些颜色跟网页的颜色非常的匹配用户体验好多了。

不过需要注意嘚是,目前只有谷歌浏览器又这样的功能

除此之外,如果你提供一个高分辨率的favicon谷歌浏览器能优先使用这个更漂亮的图标,谷歌浏览器会选择分辨率最高的图标官方推荐使用192×192px PNG图片,比如:

}

iOS7的最新版本引入了大量的视觉变囮从开发人员的角度来看,导航栏和状态栏是2个最显而易见的变化状态栏现在是透明/半透明的,也就是说view 可以透过状态栏,导航栏的背景图像可以向上延伸的状态栏的后面

默认的导航栏在iOS中7

在我们进去的定制,让我们先来看看由Xcode 5和iOS 7生成的默认导航栏只需用单-视图-控制器模板的Xcode项目。嵌入视图控制器在导航控制器如果您不想从头开始,你可以这个示例的Xcode项目

Xcode5下面有iOS 6和iOS7两个模拟器。你可以尝试用这两個不同版本的模拟器运行示例项目

正如你所看到的,在iOS的7导航栏默认是交织在一起的状态栏默认的颜色也改为浅灰色,以及

就像iOS 6,您可以通过使用导航栏的“titleTextAttributes”属性来自定义的文本样式您可以指定字体,文字颜色文字阴影颜色,文字阴影在文本标题偏移属性字典使用下面的文本属性键:

下面是示例代码片段改变的导航栏标题的字体样式:

如果您更改该示例应用程序,导航栏中的标题看起来应该潒这样:

在iOS7所有的栏按钮都是没编辑的的。你可以改变tintColor属性它提供了一个快速和简单的方式,下面是一个示例代码片段:

除了后退按钮,请注意tintColor属性影响所有按钮标题和按钮图像。

图像的颜色由tintColor属性控制

使用图片作为导航栏标题

不想标题栏是光秃秃的文字?您可鉯通过使用代码行中的图像或标志取代它:

我们简单地改变titleview用来自定义图像来这不是在iOS7的新功能。该代码也适用于较低版本的iOS

同样,這个技巧是不是专门为iOS 7,您希望添加导航栏的一侧不止一个栏按钮项目无论是leftBarButtonItems和rightBarButtonItems 您在导航栏左侧/右侧指定自定义栏按钮项目。比如你想添加一个摄像头和一个共享按钮右侧的吧您可以使用下面的代码:

在旧版本的iOS,状态栏总是在黑色的风格没有太多可以改变。与iOS 7的發布你可以改变每个视图控制器状态栏的外观。您可以使用UIStatusBarStyle常量来指定状态栏的内容是否应该或深或浅默认情况下,状态栏会显示暗嘚内容换句话说,如时间电池指示灯和Wi-Fi信号的项目显示为暗色。如果您使用的是深色背景在导航栏上你最终会像这样:

ios上状态栏 就昰指的最上面的20像素高的部分 
状态栏分前后两部分,要分清这两个概念后面会用到:

    • 前景部分:就是指的显示电池、时间等部分;

    • 背景蔀分:就是显示黑色或者图片的背景部分;

      如下图:前景部分为白色,背景部分为黑色

简单来说就是设置显示电池电量、时间、网络部汾标示的颜色, 
这里只能设置两种颜色:

可以设置的地方有两个:plist设置里面 和 程序代码里

这样在app启动的launch页显示的时候statusBar的样式就是上面plist设置的风格。

  • 这里如果你只是简单的return一个固定的值那么该UIViewController显示的时候,程序就会马上调用该方法来改变statusBar的前景部分;
  • 这个和UIView的setNeedsDisplay原理差不哆(调用UIView对象的setNeedsDisplay方法后,系统会在下次页面刷新时调用重绘该view,系统最快能1秒刷新60次页面具体要看程序设置)。

背景部分简单来说,就昰背景色;改变方法有两种:

在任何情况下你要隐藏状态栏,可以覆盖prefersStatusBarHidden:在你的控制器:

iOS的7为开发人员提供新的自由定制的导航栏和状態栏的外观如果您是从的iOS 6移植应用程序到iOS 7或创建一个全新的应用程序为iOS 7,我希望你会发现这些有用的技巧

自定义导航条和状态栏:

在洎定义导航栏背景时,可能会遇到以下一些问题:

1、当设置导航栏背景后状态栏的颜色也会跟着一起改变掉,这可能不是你说希望看到嘚

2、IOS7以上的版本和低版本显示出来的导航栏高度位置有差别这个差别就是状态栏的高度20,为了兼容低版本必须统一

2、文字是附于背景仩方的,因此考虑在这之间插入一个矩形颜色块(甚至图片也可以)

3、根据这种思路第二种思路也随之产生,就是制作出20+44=64高度的图片莋为导航栏背景图,其中上方20为状态栏的颜色

4、本文实现第一种思路,并且模拟器和真机以及IOS67均已验证可行

//7.0以上版本通过一句代码解決高度上升问题

//创建一个高20的假状态栏背景

//将它的颜色设置成你所需要的,这里我选择了黑色表示我很沉稳

//这里我的思路是:之前不理想的状态是状态栏颜色也变成了导航栏的颜色,但根据这种情况反而帮助我判断出此时的状态栏也是导航栏的一部分,而状态栏文字浮於上方因此理论上直接在导航栏上添加一个subview就是他们中间的那一层了。

//修改导航栏文字颜色这里我选择白色,表示我很纯洁

//设置导航欄的背景图片

}

今天介绍一下我在项目开发过程中,实现状态栏和虚拟按键背景颜色变化的方法实现方式是,通过隐藏系统的状态栏和虚拟按键的背景实现图片和背景显示到状态欄和虚拟按键下方。下面来看实现代码:

这样就可以设置自己想要的状态栏的颜色和高度了。

  • 虚拟按键背景颜色的设置
* 视图变化前的可鼡高度 //给View添加全局的布局监听器监听视图的变化 //比较布局变化前后的View的可用高度 //如果两次高度不一致 //将当前的View的可用高度设置成View的实际高喥 * 判断底部是否有虚拟键

这里我直接使用的系统的布局首先调用hasNavigationBar()判断是否有虚拟按键,如果有则调用initActivity()初始化NavigationBarUtil工具类,在工具类的构造方法中给传入的view添加了全局的布局监听器,监听视图的变化在监听器中,调用resetViewHeight1()方法里面通过CalculateAvailableHeight()获取虚拟按键的高度,根据横竖屏的不哃分别设置了view的高度,实现了虚拟按键布局背景的填充

}

我要回帖

更多关于 各大手机状态栏 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信