Translucent System Bar 的最佳实践

近几天准备抽空总结Android一些系统UI的实践使用,于是开始动手建了一个库AndroidSystemUiTraining ,边撸代码边写总结

今天开写第一篇,对 Translucent System Bar 的实践做一些总结。说起 Translucent System Bar 的特性,可能有些朋友还比较陌生,这里做一下简单的介绍。

Android 4.3豌豆荚

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

中华万年历

QQ音乐

可以看到,系统的通知栏和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进行设置。大家可以看到上面我的工程里面有valuesvalues-v19values-v21

第一种方式

第一种方式,需要做下面三步设置

1、在valuesvalues-v19values-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>

到此,第一种实现方式完成,大家可以看看下面的效果

ImageTranslucentTheme效果

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

方式二

相比中华万年历,QQ音乐采用的是另外一种实现的方式,它将app的Tab栏和系统导航栏分开来设置。

QQ音乐效果风格

由于它的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音乐主界面一样的效果了。

QQ音乐界面实现效果

到此,就大体介绍完了 Translucent System Bar 的两种实现方式了。

android:fitsSystemWindows的“踩坑”

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

有fitsSystemWindows设置

没有fitsSystemWindows设置

注:上面的演示效果,是借助了我的另一个开源项目,详情请戳:AndroidAlbum

这样的话,如果我有10个Activity要实现这种效果,就要在10个布局文件中做设置,非常麻烦。所以,想到一种方法,在theme中加上如下的android:fitsSystemWindows设置:

<item name="android:fitsSystemWindows">true</item>

发现果真可以了。所有要实现 Translucent System Bar 的Activity,只需要设置了这个theme即可,改起来也很方便。可惜,后来出现了一个BUG,让我还是得老老实实的回去布局文件中设置。

Toast文字错位

Toast打印出来的文字都往上偏移了。这里也是我疏忽的地方,因为在布局文件中设置是对View生效,而到了theme进行设置则是对Window生效了,两者在实现上就不一样了。所以,最终只能改回原来的方式去实现。

实践总结

最后做一下小小的总结:

  • 方式一适用于app中没有导航栏,且整体的背景是一张图片的界面;
  • 方式二适用于app中导航栏颜色为纯色的界面;
  • android:fitsSystemWindows设置要在布局文件中,不要到theme中设置;

怎样,介绍到这里,你会使用 Translucent System Bar 了吗?赶快到你的app中引入吧!

Android开发:Translucent System Bar 的最佳实践的更多相关文章

  1. Translucent System Bar 的最佳实践

    转自:http://www.jianshu.com/p/0acc12c29c1b 近几天准备抽空总结Android一些系统UI的实践使用,于是开始动手建了一个库 AndroidSystemUiTrai ...

  2. 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 ...

  3. Java Servlet开发的轻量级MVC框架最佳实践

    在Servlet开发的工程实践中,为了减少过多的业务Servlet编写,会采用构建公共Servlet的方式,通过反射来搭建轻量级的MVC框架,从而加快应用开发. 关于Servlet开发的基础知识,请看 ...

  4. 《深入理解Android:Telephon原理剖析与最佳实践》学习笔记(系统框架)

        Android智能手机的系统结构: 智能手机的硬件基本结构大多采用双处理器架构:主处理器和从处理器,主处理器主要运行开放式操作系统以及操作系统之上的应用,负责整个系统的控制,称之为AP,从处理 ...

  5. Android 列表(ListView、RecyclerView)不断刷新最佳实践

    本文微信公众号「AndroidTraveler」首发. 背景 在 Android 列表开发过程中,有时候我们的 Item 会有一些组件,比如倒计时.这类组件要求不断刷新,这个时候由于列表复用的机制,因 ...

  6. [libgdx游戏开发教程]使用Libgdx进行游戏开发(7)-屏幕布局的最佳实践

    管理多个屏幕 我们的菜单屏有2个按钮,一个play一个option.option里就是一些开关的设置,比如音乐音效等.这些设置将会保存到Preferences中. 多屏幕切换是游戏的基本机制,Libg ...

  7. Android开发之启动Activity的最佳写法

    从MainActivity跳转到SecondActivity 在SecondActivity中,写一个静态方法actionStart() public static void actionStart( ...

  8. Android开发:最详细的 NavigationDrawer 开发实践总结

    最详细的 NavigationDrawer 开发实践总结 继前面写的两篇文章之后(有问题欢迎反馈哦): Android开发:Translucent System Bar 的最佳实践 Android开发 ...

  9. Android开发:最详细的 Toolbar 开发实践总结

    最详细的 Toolbar 开发实践总结 过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent System Bar 的最佳实践,收到很多开发者的关注和反 ...

随机推荐

  1. 利用wireshark抓取Telnet的用户名和密码

    使用wireshark抓取Telnet   目标ip地址(telnet  192.168.88.1 ) 1,首先打开wireshark,然后选择网卡,点击开始. 2,为了在filter中输入telne ...

  2. POJ 1080 Human Gene Functions -- 动态规划(最长公共子序列)

    题目地址:http://poj.org/problem?id=1080 Description It is well known that a human gene can be considered ...

  3. python 自动化之路 day 04

    内容目录: 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 4.嵌套函数 5.递归 6.匿名函数 7.函数式编程介绍 8.高阶函数 9.内置函数 1.函数基本语法及特性 背景提要 现在老 ...

  4. RX学习笔记:Bootstrap

    Bootstrap https://getbootstrap.com 2016-07-01 在学习FreeCodeCamp课程中了解到Bootstrap,并于课程第一个实战题卡在响应式部分,于是先对B ...

  5. asp.net 获取当前项目路径

    方法一://获取当前项目的路径System.AppDomain.CurrentDomain.BaseDirectory.ToString();   // 得到的是当前项目的根目录取的值:F://Pro ...

  6. 【转】循环递归遍历XML文档或按某要求遍历XML文档

    <?xml version="1.0" encoding="UTF-8"?> <catalog> <cd> <titl ...

  7. DOM五大对象

    1.Window 对象:Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个 ...

  8. 九度OJ1184二叉树

    题目描述: 编一个程序,读入用户输入的一串先序遍历字符串,根据此字符串建立一个二叉树(以指针方式存储).例如如下的先序遍历字符串:ABC##DE#G##F###其中“#”表示的是空格,空格字符代表空树 ...

  9. PHP 透明水印生成代码

    PHP 透明水印生成代码,需要的朋友可以参考下. 复制代码代码如下: <?php  /*  * Created on 2010-10-27  * BY QQ542900563  * Copyri ...

  10. CODEVS 3943 数学奇才琪露诺

    [题目描述 Description] 作为上白泽慧音老师的出色弟子,数学奇才琪露诺在算术方面有很深的造诣.今天,codevs有幸请到了这位数学界的奇葩作为本场考试的第一题主考官. 琪露诺喜欢0-9之间 ...