该特性是在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界面融为一体。
三步设置
在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">trueitem>
<item name="android:windowTranslucentNavigation">trueitem>
style>
values-v21/style.xml
<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">falseitem>
<item name="android:windowTranslucentNavigation">trueitem>
--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
<item name="android:statusBarColor">@android:color/transparent
style>
上面需要注意的地方是,无论你在哪个SDK版本的values目录下,设置了主题,都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4 以下的设备。否则,肯定会报找不到Theme的错误。
<activity
android:name=".translucentbar.ImageTranslucentBarActivity"
android:label="@string/image_translucent_bar"
android:theme="@style/ImageTranslucentTheme" />
<activity
android:name=".translucentbar.ImageTranslucentBarActivity2"
android:label="@string/image_translucent_bar"
android:theme="@style/ImageTranslucentTheme" />
<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>
到此,第一种实现方式完成,系统栏会被背景图填充了。效果如下:
由于它的TAB栏是纯色的,所以只要把系统通知栏的颜色设置成和TAB栏一样的即可,实现方式上比第一种要简单的多。同样需要在不同SDK版本的values下,创建一个同名的Theme。
values/style.xml
<style name="ColorTranslucentTheme" parent="AppTheme">
--在Android 4.4之前的版本上运行,直接跟随系统主题-->
style>
values-v19/style.xml
<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">trueitem>
<item name="android:windowTranslucentNavigation">trueitem>
style>
values-v21/style.xml
<style name="ColorTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">falseitem>
<item name="android:windowTranslucentNavigation">trueitem>
<item name="android:statusBarColor">@color/color_31c27c
style>
values-v21/style.xml中的android:statusBarColor,设置成透明色也可以实现相同的效果
"android:statusBarColor">@android:color/transparent
<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 的根布局颜色设置与标题布局的颜色一致,并将内容布局设置为白色;
<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>
<activity
android:name=".translucentbar.ColorTranslucentBarActivity"
android:label="@string/color_translucent_bar"
android:theme="@style/ColorTranslucentTheme" />
至此,第二种的方式所有的操作步骤已经完成,效果如下:
设置布局调整时是否考虑系统窗口(如状态栏)
通过前面的两种方式,大家估计会留意到一个地方,就是所有实现 Translucent System Bar 效果的Activity,都需要在根布局里设置 android:fitsSystemWindows=”true” 。设置了该属性的作用在于,不会让系统导航栏和我们app的UI重叠,导致交互问题。
设置的效果:
不设置的效果:
想必区别就不用多说了吧。
上述写法,如果有多个Activity要实现这种效果,就要在每一个布局文件中设置fitSsytemWindows属性,非常繁琐切容易忘记。
尝试方案: 一 :在theme中加上如下的android:fitsSystemWindows设置:
<item name="android:fitsSystemWindows">trueitem>
虽然效果上可以实现。但是在布局文件中设置是对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 {
@Override
protected 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 抽象方法即可,就可以不用在布局文件中不断做重复操作了。
参考文章: http://www.jianshu.com/p/0acc12c29c1b# 感谢D_clock