Android 透明状态栏 沉浸式状态栏的实现

  • Android 透明状态栏
  • 实现平台
  • 设置所需要的颜色
  • 填满屏幕
  • 状态栏透明化
  • Padding调整
  • 状态栏颜色文字颜色设置(可选)
  • 颜色填充
  • 任务完成!

最近在做毕业设计,想要实现沉浸式状态栏,在网上搜索了好多的文章后拼拼凑凑,才实现了这个功能。也算是第一次做Android开发,所以写个文章纪念一下,并且分享给大家。

Android 透明状态栏

实现平台

Android 10 ,Flyme8.0,MEIZU 17 pro。
理论上应该支持所有的Android 6.0 以上的系统。

设置所需要的颜色

在color.xml文件中首先设置一个透明的颜色以及你所需要的状态栏颜色。
这样的操作可以方便你以后对状态栏颜色进行修改,就像修改变量一样就可以改变所有的该颜色。

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="flesh">#F1E8D9</color>
    <color name="flesh_black">#F8E4C2</color>
    <color name="white">#FFFFFF</color>
    <color name="black">#000000</color>
    <color name="transparent">#00FFFFFF</color>
    <color name="tea_green">#7CB342</color>
    <color name="tea_green_black">#43A047</color>

    <color name="app_bg_color">@color/flesh</color>
    <color name="app_text_color">@color/black</color>

    <color name="topBar_color">@color/flesh_black</color>
    <color name="statusBar_color">@color/flesh_black</color>

    <color name="tab_bg_color">@color/tea_green</color>
    <color name="tab_bg_onclick_color">@color/tea_green_black</color>
    <color name="tab_text_color">@color/white</color>

</resources>

填满屏幕

首先先让Activity填满屏幕。
在style.xml中的要修改的Activity的主题中添加如下代码。
<item name="android:windowTranslucentStatus">false</item><!--可以页面拉伸到状态栏顶部-->
<item name="android:windowTranslucentNavigation">true</item><!--可以页面拉伸到虚拟按键底部-->

添加后的代码如下:
style.xml

<style name="TabTheme_NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:background">@color/app_bg_color</item>
	<item name="android:textColor">@color/app_text_color</item>tools:targetApi="m">true</item>-->
	<item name="android:windowTranslucentStatus">false</item>
	<item name="android:windowTranslucentNavigation">true</item>
</style>

效果如下图。我们还需要使状态栏变为透明。


androidstudio状态栏通知 安卓状态栏开发_java

状态栏透明化

再在style.xml中添加对状态栏透明化的代码,
#00FFFFFF是透明的颜色参数,如果你需要修改为其他的颜色,可以自行修改。
<item name="android:statusBarColor" tools:targetApi="lollipop">#00FFFFFF</item><!--设置状态栏的颜色-->

style.xml

<style name="TabTheme_NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:background">@color/app_bg_color</item>
	<item name="android:textColor">@color/app_text_color</item>
	<item name="android:statusBarColor" tools:targetApi="lollipop">#00FFFFFF</item>
	<item name="android:windowTranslucentStatus">false</item>
	<item name="android:windowTranslucentNavigation">true</item>
</style>

效果如下图
我们发现还需要调整界面的Padding,使它能将状态栏的位置空出来。


androidstudio状态栏通知 安卓状态栏开发_安卓_02

Padding调整

需要在Activity的class文件中。
使用setPadding(int left, int top, int right, int bottom)方法限制Activity的位置。
通过getStatusBarHeight方法获取状态栏的高度,然后对Activity进行限制。
//设置relativeLayout的padding
findViewById(R.id.relativeLayout)
		.setPadding(0, getStatusBarHeight(), 0, 0);
//将这段代码添加到class的onCreate方法中
//获取状态栏高度
public int getStatusBarHeight() {
	int result = 0;
    //获取状态栏高度的资源id
	int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

Activity.class

public class MainActivity extends TabActivity {
    //MainActivity初始化方法
    @RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //初始化页面
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //设置relativeLayout的padding
        findViewById(R.id.relativeLayout)
                .setPadding(0, getStatusBarHeight(), 0, 0);
    }
    //获取状态栏高度
    public int getStatusBarHeight() {
        int result = 0;
        //获取状态栏高度的资源id
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
}

效果如下图


androidstudio状态栏通知 安卓状态栏开发_app_03

状态栏颜色文字颜色设置(可选)

如果程序的背景颜色是浅色系,诸如我的程序一样。
你可以再对状态栏文字的颜色进行修改。

以下的代码相当于告诉系统:我的状态栏是浅色的,请把文字改为黑色。
<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
修改后的style.xml文件

style.xml

<style name="TabTheme_NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
	<item name="android:background">@color/app_bg_color</item>
    <item name="android:textColor">@color/app_text_color</item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">#00FFFFFF</item>
	<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

效果如下图


androidstudio状态栏通知 安卓状态栏开发_android_04

这样我们就实现了无填充的透明的状态栏。 
如果你的程序不像我一样顶部有其他颜色的部件,那么你的沉浸式状态栏就完成了。
但是这样的界面对我来说还不是满意的。 我还需要将状态状态栏下进行填充来改变上方的颜色。

颜色填充

这个需求我是填充TextView进行实现。

android 在LinearLayout中动态添加View BY YD-10-NG

addView(View child)   // child-被添加的View
addView(View child, int index)   // index-被添加的View的索引
addView(View child, int width, int height)   // width,height被添加的View指定的宽高
addView(View view, ViewGroup.LayoutParams params)   // params被添加的View指定的布局参数
addView(View child, int index, LayoutParams params)
首先对TextView类继承,然后将其修改为我们所需要的填充物。

TopBar_TextView.java

//TopBar_TextView.java

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.ViewGroup;

public class TopBar_TextView extends androidx.appcompat.widget.AppCompatTextView {
	//初始化方法
    @SuppressLint({"ResourceAsColor", "UseCompatLoadingForDrawables"})
    public TopBar_TextView(Context context, Drawable drawable) {
        super(context);

        this.setBackgroundDrawable(drawable);//设置填充物颜色
        this.setHeight(getStatusBarHeight());//设置填充物高度,等于状态栏高度
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);//设置填充物宽度为状态栏宽度
    }

    //获取状态栏高度
    public int getStatusBarHeight() {
        int result = 0;
        //获取状态栏高度的资源id
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
}

TeaControlActivity.class

import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.Nullable;

public class TeaControlActivity extends Activity {
    private LinearLayout linearLayout;
    private int top = 0;//置顶
    Drawable drawable;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tea_control);

        //状态栏遮挡物的颜色
        drawable = getResources().getDrawable(R.color.statusBar_color);

        //添加状态栏遮挡
        linearLayout = findViewById(R.id.LinearLayout_control);
        linearLayout.addView(new TopBar_TextView(TeaControlActivity.this,drawable), top);
    }
}

效果如下图


androidstudio状态栏通知 安卓状态栏开发_android_05

任务完成!