沉浸式状态栏

作者: just0119 | 来源:发表于2019-03-08 17:53 被阅读0次

Android 沉浸式状态栏
Android 沉浸式风格（为毛叫沉浸式这么唬人）
Android实现沉浸式状态栏及标题栏滑动变色
android沉浸式状态栏轻量简便
沉浸式状态栏
Android 补充 LayerDrawable 沉浸式状态栏
Flutter沉浸式状态栏
刨根问底-论Android“沉浸式”
AndroidView
沉浸式状态栏集成

android Api21之后的状态栏会默认覆盖半透明遮罩，我们需要新建values-19，values-21 2份styles文件进行适配

Api-19
 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
 </style>
Api-21
 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
 </style>

02dcb82d382be8e958a4245dee2465d.jpg

假如需要去除状态栏需要在Activity中添加

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

d8b9a347144e379b5c86f80fe716466.jpg

这种情况下，布局内容会延伸到状态栏，假如我们需要状态栏显示需要另外做处理

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:statusBarColor">#ff0000</item>
</style>
// 或者通过代码
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(Color.BLUE);

对于5.0以下的设备我们需要手动添加一个占位view来模拟状态栏显示

private void addStatusBarColor() {
    ViewGroup mViewGroup = findViewById(android.R.id.content);
    View mStatusView = new View(this);
    ViewGroup.LayoutParams mParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusBarHeight());
    mStatusView.setBackgroundColor(Color.BLUE);
    mViewGroup.addView(mStatusView,mParams);
}

/**
 * 通过反射拿到状态栏高度
 */
private int getStatusBarHeight() {
    int height = 0;
    int resId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if(resId > 0){
       height = getResources().getDimensionPixelSize(resId);
    }
    return height;
}

我们可以对版本做一个判断

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP){
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    getWindow().setStatusBarColor(Color.BLUE);
} else if(Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT){
    ViewGroup mViewGroup = findViewById(android.R.id.content);
    View mStatusView = new View(this);
    ViewGroup.LayoutParams mParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusBarHeight());
    mStatusView.setBackgroundColor(Color.BLUE);
    mViewGroup.addView(mStatusView,mParams);
}

以上都需要添加在布局中添加fitsSystemWindow = true ，或者在代码中进行设置

public void setRootViewFitsSystemWindows() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        ViewGroup winContent = findViewById(android.R.id.content);
        if (winContent.getChildCount() > 0) {
            ViewGroup rootView = (ViewGroup) winContent.getChildAt(0);
            if (rootView != null) {
                rootView.setFitsSystemWindows(true);
            }
        }
    }
}

9ba64c82d2450d873fccc6c2545b883.jpg

假如我们设置状态栏颜色较浅会看不清状态栏字体，除了小米和魅族对底层代码做了处理，其余需要使用到6.0 的一个新属性SYSTEM_UI_FLAG_LIGHT_STATUS_BAR该属性可以兼容亮色背景。该属性需要在设置了FLAG_DRAWS_SYSTEM_BAR_BACKGROUND和清除FLAG_TRANSLUCENT_STATUS属性才能使用

// 代码设置
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}
// 新建values-v23文件夹
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">#fff</item>
    <!-- Android 6.0以上 状态栏字色和图标为浅黑色-->
    <item name="android:windowLightStatusBar">true</item>
</style>