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>
效果如下图。我们还需要使状态栏变为透明。
状态栏透明化
再在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,使它能将状态栏的位置空出来。
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;
}
}
效果如下图
状态栏颜色文字颜色设置(可选)
如果程序的背景颜色是浅色系,诸如我的程序一样。
你可以再对状态栏文字的颜色进行修改。
以下的代码相当于告诉系统:我的状态栏是浅色的,请把文字改为黑色。
<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>
效果如下图
这样我们就实现了无填充的透明的状态栏。
如果你的程序不像我一样顶部有其他颜色的部件,那么你的沉浸式状态栏就完成了。
但是这样的界面对我来说还不是满意的。 我还需要将状态状态栏下进行填充来改变上方的颜色。
颜色填充
这个需求我是填充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);
}
}
效果如下图
任务完成!