Android开发UI

Android沉浸状态栏(StatusBar)兼容方案

2017-09-22  本文已影响2057人  Jessewo

所谓"沉浸状态栏"的实现需要两点:

  1. 设置状态栏为透明或者半透明状态;
  2. 整体布局可以置于状态栏下方.

1. 状态栏的配置

对于状态栏的配置有两种方式:

  1. 在manifest中配置Activity的theme属性
    在theme文件中添加android:windowTranslucentStatus属性(当然仅支持api19, 即Android4.4及以上, 且根据这个属性名称可知只是半透明);
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        <item name="android:windowTranslucentStatus">true</item>
    </style>

效果:

键盘隐藏 键盘显示
Android5.0键盘未弹出 Android5.0键盘弹出
  1. 通过代码动态设置
    相对于通过theme的属性配置, 这种方案可以实现状态栏全透明.
    /**
     * 设置状态栏为全透明
     * 通过设置theme的方式无法达到全透明效果
     *
     * @param activity
     */
    @TargetApi(19)
    private static void transparencyStatusBar(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //5.0及其以上
            Window window = activity.getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //4.4及其以上
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

以上两种方案都没能达到想要的效果. 如上图所示,现在有两个问题:

问题1. 整体布局上移, statusBar遮挡contentView显示的内容;
问题2. 键盘遮挡了输入框, 我们在manifest里给activity声明的android:windowSoftInputMode="adjustResize"失效了;

针对以上两个问题, 现在有两种着手方案:

  1. 设置Activity的根布局 android:fitsSystemWindows="true"
  2. 顶部view添加paddingTop属性, 高度取当前手机的statusbar高度

方案一, 可以使得整体contentView下移至statusBar下方, 同时问题2解决, 但是此时的statusBar颜色是整体background的颜色, 未能解决问题. 此方案放弃

下面着重介绍方案二:

2. 以上两个问题的解决

2.1解决问题1: contentView上移, statusBar遮挡内容显示

解决方案很简单, 就是给顶部的view加个paddingTop, 而这个paddingTop的值取当前手机的statusbar高度.
比如这里我给自定义的toolbar添加了paddingTop

    //动态获取statusBar的高度
    private static int sHeight = -1;
    public static int getStatusBarHeight(Context context) {
        if (sHeight == -1) {
            //获取status_bar_height资源的ID
            int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
            if (resourceId > 0) {
                //根据资源ID获取响应的尺寸值
                sHeight = context.getResources().getDimensionPixelSize(resourceId);
            }
        }
        return sHeight;
    }
    //给顶部的view添加paddingTop
    int height = getStatusBarHeight(context);
    customeToolbar.setPadding(root.getPaddingRight(), height + root.getPaddingTop(),
                              root.getPaddingLeft(), root.getPaddingBottom());

看效果


Android5.0
2.2 解决问题2: 键盘遮挡输入框

经过测试发现影响adjustResize生效以及contentView上移 的关键是设置contentView根布局 android:fitsSystemWindows="true"

那么我们只需要
1.重写View的fitSystemWindows(Rect insets)的方法, 使得其控制contentView位移的功能失效,

public class CustomInsetsLinearLayout extends LinearLayout {

    private int[] mInsets = new int[4];

    public CustomInsetsLinearLayout(Context context) {
        super(context);
    }

    public CustomInsetsLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomInsetsLinearLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public final int[] getInsets() {
        return mInsets;
    }

    @Override
    protected final boolean fitSystemWindows(Rect insets) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            // Intentionally do not modify the bottom inset. For some reason,
            // if the bottom inset is modified, window resizing stops working.

            mInsets[0] = insets.left;
            mInsets[1] = insets.top;
            mInsets[2] = insets.right;

            insets.left = 0;
            insets.top = 0;
            insets.right = 0;
        }

        return super.fitSystemWindows(insets);
    }
}
  1. 同时配置android:fitsSystemWindows="true"保留对于adjustResize属性的影响;
<?xml version="1.0" encoding="utf-8"?>
<com.example.j.verticaltextdemo.view.CustomInsetsLinearLayout
    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">

    <include layout="@layout/center_title_toolbar" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <EditText
        android:id="@+id/et1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:hint="请输入" />

</com.example.j.verticaltextdemo.view.CustomInsetsLinearLayout>

最终效果展示

Android 5.0及其以上的显示效果 Android4.4的显示效果
解决问题2 Android4.4

3. 完全沉浸效果

Android6.0及其以上 Android5.x Android4.4
Android6.0 Android5.0 Android4.4

4. 进阶篇: 浅色状态栏及兼容性配置

目前市面上的浅色状态栏基本都是 白底黑字, 比如 [微博]
支持这种设置的有Android6.0及其以上; MIUI v6及以上, Flyme 4.0及以上, 所以我的兼容方案如下:

    1. 对于支持[状态栏透明 + 状态栏文字图标黑白切换]的机型(Android 6.0及以上,MIUI v6及以上, Flyme 4.0及以上), 全透明状态栏 + 黑色文字图标
    1. 对于仅支持[状态栏透明]的机型(Android 4.4及其以上), 采用: 半透明状态栏 + 白色文字图标
    1. 对于不支持的机型(Android 4.4以下), 采用默认状态: 黑色状态栏 + 白色文字图标

具体实现

    /**
     * Android 6.0 原生
     *
     * @param activity
     * @param dark
     */
    private static void setAndroidNativeLightStatusBar(Activity activity, boolean dark) {
        //状态栏字体图标颜色
        View decor = activity.getWindow().getDecorView();
        if (dark) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR //浅色状态栏(字体图标白色)
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN //contentView 全屏(置于statusbar之下)
                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            }
        } else {
            decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
        }
    }

附:

具体代码参见 https://github.com/JesseWo/ImmersedStatusBar

上一篇下一篇

猜你喜欢

热点阅读