Translucent System Bars-4.4新特性
概念
Google官方文档4.4APIs_KITKAT
该特性是在Android 4.4 KITKAT版本(API_19)中引入的新特性。
也就是我们说的 透明栏 ,国内一般称之为 沉浸式顶栏。在 Android 4.4 还是在 Android 5.0 +上, Translucent 「透明」 的特质都能体现得非常清楚.
介绍
Android 4.4之前,我们打开手机app,总是能看到系统顶部那条黑乎乎的通知栏,显得非常不和谐。于是Android 4.4开始,便引入了Translucent System Bar的系特性,用于弥补系统通知栏突兀之处。
我们先来看看 Translucent System Bar 新特性引入后,发生了什么样的变化。
可以看到系统的通知栏和app界面融为一体。
两种实现方式
大致说明
工程目录:
注意事项
- 主要的操作都在style.xml 和 AndroidManifest.xml 中,Activity里面没有任何涉及到Translucent System Bar设置的代码,所以可以忽略不看。
- ColorTranslucentBarActivity 和 ImageTranslucentBarActivity 分别用于展示两种不同实现方式的效果。 其中*2是继承TranslucentBarActitity2,在父类中设置了setFitsSystemWindows(true)属性,布局文件中可以省略了。
- 要在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。
背景图片延伸至系统栏
三步设置
第一步:设置不同版本下style.xml
在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
<!--Android 4.4 --><!--ImageTranslucentTheme--><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
<!--Android 5.0以上版本--><!--ImageTranslucentTheme--><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的错误。
第二步:在AndroidManifest.xml中对指定Activity的theme进行设置
<!-- ImageTranslucentBarActivity --><activity
android:name=".translucentbar.ImageTranslucentBarActivity"android:label="@string/image_translucent_bar"android:theme="@style/ImageTranslucentTheme" /><!-- 第二种方式,在抽象类中通过代码的方式fitsSystemWindows=true --><activity
android:name=".translucentbar.ImageTranslucentBarActivity2"android:label="@string/image_translucent_bar"android:theme="@style/ImageTranslucentTheme" />
第三步:在Activity的布局文件中设置背景图片,同时,需要把android:fitsSystemWindows设置为true
<?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/img"android:fitsSystemWindows="true"><TextView
android:layout_width="match_parent"android:layout_height="wrap_content"android:text="第一种方式继承父类BaseActivity的实现方式,布局文件根目录下需要设置fitsSystemWindows=true "android:textColor="@color/color_red"android:layout_margin="10dp"android:textSize="20sp" /></RelativeLayout>
到此,第一种实现方式完成,系统栏会被背景图填充了。效果如下:
APP的Tab栏和系统导航栏分开来设置。
由于它的TAB栏是纯色的,所以只要把系统通知栏的颜色设置成和TAB栏一样的即可,实现方式上比第一种要简单的多。同样需要在不同SDK版本的values下,创建一个同名的Theme。
第一步 在不同SDK版本中的style.xml创建主题
values/style.xml
<style name="ColorTranslucentTheme" parent="AppTheme"><!--在Android 4.4之前的版本上运行,直接跟随系统主题--></style>
values-v19/style.xml
<!--Android 4.4 --><!--ColorTranslucentTheme--><style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"><item name="android:windowTranslucentStatus">true</item><item name="android:windowTranslucentNavigation">true</item></style>
values-v21/style.xml
<!--Android 5.0以上版本--><!--ColorTranslucentTheme--><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>
values-v21/style.xml中的android:statusBarColor,设置成透明色也可以实现相同的效果
<item name="android:statusBarColor">@android:color/transparent</item>
第二步: 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>
说明: 上述设置话,会在真机上出现顶部变成黑白渐变的bug,建议采用下面的方式:
第一步:去到 ColorTranslucentBarActivity 的布局文件中,将布局划分成为标题布局和内容布局两部分;
第二步:将 ColorTranslucentBarActivity 的根布局颜色设置与标题布局的颜色一致,并将内容布局设置为白色;
<?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:background="@color/color_31c27c"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
android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/white"android:orientation="vertical"><Button
android:id="@+id/btn_show_toast"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Show a toast" /></LinearLayout></LinearLayout>
第三步:Manifest.xml中为Activity设置主题
<!-- ColorTranslucentBarActivity --><activity
android:name=".translucentbar.ColorTranslucentBarActivity"android:label="@string/color_translucent_bar"android:theme="@style/ColorTranslucentTheme" />
至此,第二种的方式所有的操作步骤已经完成,效果如下:
注意事项
android:fitsSystemWindows说明
设置布局调整时是否考虑系统窗口(如状态栏)
通过前面的两种方式,大家估计会留意到一个地方,就是所有实现 Translucent System Bar 效果的Activity,都需要在根布局里设置 android:fitsSystemWindows=”true” 。设置了该属性的作用在于,不会让系统导航栏和我们app的UI重叠,导致交互问题。
设置的效果:
不设置的效果:
想必区别就不用多说了吧。
避免重复设置android:fitsSystemWindows
上述写法,如果有多个Activity要实现这种效果,就要在每一个布局文件中设置fitSsytemWindows属性,非常繁琐切容易忘记。
尝试方案:
一 :在theme中加上如下的android:fitsSystemWindows设置:
<item name="android:fitsSystemWindows">true</item>
虽然效果上可以实现。但是在布局文件中设置是对View生效,而到了theme进行设置则是对Window生效,会影响到其他组件的位置,比如Toast中的文字会上移等等,所以这种方法不可取。
第二种尝试: 在代码中设置。
避免在每个布局文件中都要写上 android:fitsSystemWindows=”true”,可以在抽象父类中设置即可。
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;/*** MyApp** @author Mr.Yang on 2016-02-26 09:32.* @version 1.0* @desc TranslucentBarBaseActivity 抽象类 ,* 继承此类,可以避免在每个布局文件中写 android:fitsSystemWindows="true"*/
public abstract class TranslucentBarBaseActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 取消标题supportRequestWindowFeature(Window.FEATURE_NO_TITLE);// 将设置布局文件的操作交给继承的子类setContentView(getLayoutResId());// 设置android:fitsSystemWindows="true"属性ViewGroup contentFrameLayout = (ViewGroup) findViewById(Window.ID_ANDROID_CONTENT);View parentView = contentFrameLayout.getChildAt(0);if (parentView != null && Build.VERSION.SDK_INT >= 19) {Log.d("TBBActivity", "SDK_INT:" + Build.VERSION.SDK_INT);parentView.setFitsSystemWindows(true);}}/*** 定义成抽象方法,子类继承此父类抽象类,必须重写** @return*/protected abstract int getLayoutResId();}
所有需要实现效果的界面继承TranslucentBarBaseActivity 父类,并实现 getLayoutResId 抽象方法即可,就可以不用在布局文件中不断做重复操作了。
总结
- 方式一适用于app中没有导航栏,且整体的背景是一张图片的界面;
- 方式二适用于app中导航栏颜色为纯色的界面;
- android:fitsSystemWindows设置要在布局文件中,不要到theme中设置,或者在抽象类中设置,子类继承抽象类即可。
参考文章:
http://www.jianshu.com/p/0acc12c29c1b#
感谢D_clock
Translucent System Bars-4.4新特性相关推荐
- iOS -- iOS11新特性,如何适配iOS11
前言 这几天抽空把WWDC的Session看了一些,总结了一些iOS11新的特性,可能对我们的App有影响,需要我们进行适配.本文作为一个总结. 本文内容包括:集成了搜索的大标题栏.横向选项卡栏.Ma ...
- Toolbar-5.0新特性
概念 Android5.0以后谷歌大力推崇Material Design设计,有意统一之前Android style风格乱象的情况. Toolbar,这是用来取代过去 actionbar 的控件,而现 ...
- java9特性_96.java基础10(java9/10/11新特性)
126.java 9 新特性1(模块化功能): 1.java模块化 2.java 交互式环境jshell 3.泛型 package com.atguigu.java; import org.junit ...
- JDK1.8 的 8 个新特性
一.概述 jdk1.8 的一些新特性简化了代码的写法,减少了部分开发量.主要如下: Lambda 表达式 接口中的默认方法和静态方法 函数式接口 方法引用和构造器调用 局部变量限制 Stream AP ...
- Java通俗易懂30天 第30天:Java9- 14 新特性
文章目录 Java 9 的新特性 JDK 9 的发布 jdk目录结构的改变 java9新特性:模块化系统 java9新特性:Java的REPL工具:jshell JShell相关命令 java9新特性 ...
- .NET 6 新特性 System.Text.Json 中的 Writeable DOM
.NET 6 新特性 System.Text.Json 中的 Writeable DOM 特性 Intro 在 .NET 6 Preview 4 中,微软加入了 JSON Node 的支持,我们可以动 ...
- java system datetime_Java8新特性时间日期库DateTime API及示例
Java8新特性的功能已经更新了不少篇幅了,今天重点讲解时间日期库中DateTime相关处理.同样的,如果你现在依旧在项目中使用传统Date.Calendar和SimpleDateFormat等API ...
- oracle oats 工具讲解,Oracle 21c 新特性:Object Activity Tracking System 对象活动跟踪系统...
Oracle 21c 新特性:Object Activity Tracking System 对象活动跟踪系统 在 Oracle Database 21c 中,OATS 新特性引入进来,OATS 是 ...
- jdk1.7 1.8新特性
本文是我学习了解了jdk7和jdk8的一些新特性的一些资料,有兴趣的大家可以浏览下下面的内容. 官方文档:http://www.oracle.com/technetwork/java/javase/j ...
最新文章
- CSP 202006-1 线性分类器 python实现+详解
- linux dig 命令使用方法
- 报表-对于多数据进行 分sheet以及 分workbook处理
- 华为ws851虚拟服务器,荣耀路由Pro无线中继设置 华为WS851桥接设置教程-192路由网...
- 计算python执行时间
- Struts2中将表单数据封装到List和Map集合中
- 0002-Add Two Numbers(两数相加)
- 蓝桥杯2016初赛-有奖猜谜-模拟
- 对ContentProvider中getType方法的一点理解
- UIProgressView的详细使用
- 深度学习入门:一文详解BP神经网络
- 站立会议07(第二次冲刺)
- JVM调优-Jva中基本垃圾回收算法
- win10运行C语言的程序,win10运行游戏时出现程序无法正常启动0xc0000142解决方法介绍...
- 关于单点登录的一点想法
- Apache Kafka的流式SQL引擎——KSQL
- 前端小技巧(2)-performance.timing属性介绍
- 签到java小程序代码_微信小程序全栈项目:签到打卡小程序 + 后端实现
- php 微信怎么清除缓存,前端清除缓存方法(微信缓存引起的bug)
- Android 音频技术开发总结
热门文章
- python 、example
- java 协程线程的区别_为什么 Java 坚持多线程不选择协程?
- Leetcode 876. 链表的中间结点 (每日一题 20210918)
- Leetcode 226. 翻转二叉树 (每日一题 20210819)
- 深度学习数学基础(一)~卷积
- 论文笔记:Spatial-Temporal Map Vehicle Trajectory Detection Using Dynamic Mode Decomposition and Res-UNe
- 深度学习核心技术精讲100篇(十)-机器学习模型融合之Kaggle如何通过Stacking提升模型性能
- ORACLE 新建数据库及权限赋予
- 主成分分析 PCA算法
- 一点MATLAB程序加速技巧