Android开发:Translucent System Bar 的最佳实践
Translucent System Bar 的最佳实践
近几天准备抽空总结Android一些系统UI的实践使用,于是开始动手建了一个库AndroidSystemUiTraining ,边撸代码边写总结
今天开写第一篇,对 Translucent System Bar 的实践做一些总结。说起 Translucent System Bar 的特性,可能有些朋友还比较陌生,这里做一下简单的介绍。

看上图,Android 4.4之前,即使我们打开手机app,我们还总是能看到系统顶部那条黑乎乎的通知栏,这样会使得app稍显突兀。于是Android 4.4开始,便引入了Translucent System Bar的系特性,用于弥补系统通知栏突兀之处。(估计也是向ios学习,因为ios一大早就有这个特性)。我们先来看看 Translucent System Bar 新特性引入后,发生了什么样的变化。下面截取了 中华万年历的天气预报界面 和 QQ音乐主界面的效果(两个界面的效果实现 Translucent System Bar 的方式有些区别,下文会细讲)


可以看到,系统的通知栏和app界面融为一体,妈妈再也不用面对黑乎乎的通知栏了。有关 Translucent System Bar 的特性就暂且介绍到此。
工程简介
先简单介绍一下工程的结构,核心部分已经圈出,待我逐一讲解

主要的操作都在style.xml 和 AndroidManifest.xml 中,Activity里面没有任何涉及到Translucent System Bar设置的代码,所以可以忽略不看。
ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分别用于展示两种不同实现方式的效果
要在Activity中使用 Translucent System Bar 特性,首先需要到AndroidManifest中为指定的Activity设置Theme。但是需要注意的是,我们不能直接在values/style.xml直接去自定义 Translucet System Bar 的Theme,因为改特性仅兼容 Android 4.4 开始的平台,所以直接在values/style.xml声明引入,工程会报错。有些开发者朋友会在代码中去判断SDK的版本,然后再用代码设置Theme。虽然同样可以实现效果,但个人并不推崇这种做法。我所采取的方法则是建立多个SDK版本的values文件夹,系统会根据SDK的版本选择合适的Theme进行设置。大家可以看到上面我的工程里面有values、values-v19、values-v21。
第一种方式
第一种方式,需要做下面三步设置
1、在values、values-v19、values-v21的style.xml都设置一个 Translucent System Bar 风格的Theme
values/style.xml
<style name="ImageTranslucentTheme" parent="AppTheme">
<!--在Android 4.4之前的版本上运行,直接跟随系统主题-->
</style>
values-v19/style.xml
<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
values-v21/style.xml
<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
上面需要注意的地方是,无论你在哪个SDK版本的values目录下,设置了主题,都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4 以下的设备。否则,肯定会报找不到Theme的错误。
2、在AndroidManifest.xml中对指定Activity的theme进行设置
<activity
android:name=".ui.ImageTranslucentBarActivity"
android:label="@string/image_translucent_bar"
android:theme="@style/ImageTranslucentTheme" />
3、在Activity的布局文件中设置背景图片,同时,需要把android:fitsSystemWindows设置为true
activity_image_translucent_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/env_bg"
android:fitsSystemWindows="true">
</RelativeLayout>
到此,第一种实现方式完成,大家可以看看下面的效果

就跟中华万年历的天气预报效果界面一样,系统的整个导航栏都融入了app的界面中,背景图片填满了整个屏幕,看起来舒服很多。这里还有一个android:fitsSystemWindows设置需要注意的地方,后面会在细讲。接下来看第二种实现。
方式二
相比中华万年历,QQ音乐采用的是另外一种实现的方式,它将app的Tab栏和系统导航栏分开来设置。

由于它的Tab栏是纯色的,所以只要把系统通知栏的颜色设置和Tab栏的颜色一致即可,实现上相比方法一要简单很多。同样要到不同SDK版本的values下,创建一个同名的theme,在values-v21下,需要设置系统导航栏的颜色:
values-v21/style.xml
<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">@color/color_31c27c</item>
</style>
再到ColorTranslucentBarActivity的布局文件activity_color_translucent_bar.xml中设置Tab栏的颜色
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@color/color_31c27c">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="QQ Music"
android:textColor="@android:color/white"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
到此,我们就可以得到和QQ音乐主界面一样的效果了。

到此,就大体介绍完了 Translucent System Bar 的两种实现方式了。
android:fitsSystemWindows的“踩坑”
通过前面的两种方式,大家估计会留意到一个地方,就是所有实现 Translucent System Bar 效果的Activity,都需要在根布局里设置 android:fitsSystemWindows="true" 。设置了该属性的作用在于,不会让系统导航栏和我们app的UI重叠,导致交互问题。这样说可能比较抽象,看看下面两个效果图的对比就知道了。


注:上面的演示效果,是借助了我的另一个开源项目,详情请戳:AndroidAlbum
这样的话,如果我有10个Activity要实现这种效果,就要在10个布局文件中做设置,非常麻烦。所以,想到一种方法,在theme中加上如下的android:fitsSystemWindows设置:
<item name="android:fitsSystemWindows">true</item>
发现果真可以了。所有要实现 Translucent System Bar 的Activity,只需要设置了这个theme即可,改起来也很方便。可惜,后来出现了一个BUG,让我还是得老老实实的回去布局文件中设置。

Toast打印出来的文字都往上偏移了。这里也是我疏忽的地方,因为在布局文件中设置是对View生效,而到了theme进行设置则是对Window生效了,两者在实现上就不一样了。所以,最终只能改回原来的方式去实现。
实践总结
最后做一下小小的总结:
- 方式一适用于app中没有导航栏,且整体的背景是一张图片的界面;
- 方式二适用于app中导航栏颜色为纯色的界面;
- android:fitsSystemWindows设置要在布局文件中,不要到theme中设置;
怎样,介绍到这里,你会使用 Translucent System Bar 了吗?赶快到你的app中引入吧!
Android开发:Translucent System Bar 的最佳实践的更多相关文章
- Translucent System Bar 的最佳实践
转自:http://www.jianshu.com/p/0acc12c29c1b 近几天准备抽空总结Android一些系统UI的实践使用,于是开始动手建了一个库 AndroidSystemUiTrai ...
- Android 4.4 上实现透明导航栏和状态栏 Translucent system bar
Translucent system UI styling To get the most impact out of your content, you can now use new window ...
- Java Servlet开发的轻量级MVC框架最佳实践
在Servlet开发的工程实践中,为了减少过多的业务Servlet编写,会采用构建公共Servlet的方式,通过反射来搭建轻量级的MVC框架,从而加快应用开发. 关于Servlet开发的基础知识,请看 ...
- 《深入理解Android:Telephon原理剖析与最佳实践》学习笔记(系统框架)
Android智能手机的系统结构: 智能手机的硬件基本结构大多采用双处理器架构:主处理器和从处理器,主处理器主要运行开放式操作系统以及操作系统之上的应用,负责整个系统的控制,称之为AP,从处理 ...
- Android 列表(ListView、RecyclerView)不断刷新最佳实践
本文微信公众号「AndroidTraveler」首发. 背景 在 Android 列表开发过程中,有时候我们的 Item 会有一些组件,比如倒计时.这类组件要求不断刷新,这个时候由于列表复用的机制,因 ...
- [libgdx游戏开发教程]使用Libgdx进行游戏开发(7)-屏幕布局的最佳实践
管理多个屏幕 我们的菜单屏有2个按钮,一个play一个option.option里就是一些开关的设置,比如音乐音效等.这些设置将会保存到Preferences中. 多屏幕切换是游戏的基本机制,Libg ...
- Android开发之启动Activity的最佳写法
从MainActivity跳转到SecondActivity 在SecondActivity中,写一个静态方法actionStart() public static void actionStart( ...
- Android开发:最详细的 NavigationDrawer 开发实践总结
最详细的 NavigationDrawer 开发实践总结 继前面写的两篇文章之后(有问题欢迎反馈哦): Android开发:Translucent System Bar 的最佳实践 Android开发 ...
- Android开发:最详细的 Toolbar 开发实践总结
最详细的 Toolbar 开发实践总结 过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent System Bar 的最佳实践,收到很多开发者的关注和反 ...
随机推荐
- UDP通信 Java
public class UdpServerTest { /** * @param args * @throws SocketException */ public static void main( ...
- Oracle学习第一天---安装和基础入门
国庆七天假,决定静下心来入门Oracle数据库. 环境:Ocacle 11g 软件安装包和安装图解,大家可以在我的百度网盘上下载:链接:http://pan.baidu.com/s/1ntjDEnZ ...
- getScript 按需加载javascript
$('input:button:first').click(function(aaa) { $.getScript('new.js', function() { alert('Script loade ...
- ###STL学习--标准模板库
下面进行STL的学习.希望能了解标准模板库中的常用容器,迭代器,可以自由运用STL以提高编写代码的效率.下面的内容我想以知识点为总结,不再像<Effective C++>那样以章节进行总结 ...
- IOS开发之NSObject协议类方法说明
oc中NSObject类是所有类的基类,所有类都要继承自它,那么它的方法就显得特别重要,因为所有类都会有这些基本的方法. 看看oc的源码中NSObject是这样定义的: @interface NSOb ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
- 【制作镜像Win*】系统安装
图形化安装系统,在询问“进行何种类型的安装?”时,选择“自定义(高级)” 下一步看不到硬盘,如图: 选择“加载驱动程序”,安装驱动. 将相应版本的netkvm.inf和viostor.inf装上. 继 ...
- iOS 多态的简单思想
/** * 多态:多种形态,是对于对象而言的,如果没有继承就没有多态 * * 在代码中体现:就是通过定义父类指针指向子类的对象 * * 好处:在函数或者方法的参数中如果传入的是父类指针,那么实现的时候 ...
- mysql 数据库还原出错ERROR:Unknown command '\' mysql中断
其实造成这个问题的原因还是由于编码的问题,网站数据库设置的是gbk 的,mysql默认是gbk:但是在导出数据的时候导出了utf8的sql文件,不管我如何重新导入,在连接数据库后使用set names ...
- Node安装与环境配置
1.nodejs(npm)安装 下载nodejs(http://nodejs.cn/)安装后,cmd下如输入 node -v 与 npm -v 出现下图版本提示就是完成了NodeJS的安装 2.n ...