zoukankan      html  css  js  c++  java
  • 透明状态栏和沉浸式状态栏

    从Android4.4开始提供的沉浸式状态栏,让APP设计得更优美,很多APP都采用了。对于沉浸式状态栏的理解,很多人都表达不太一样,在这里根据自己的理解分为透明状态栏和沉浸式状态栏,分别对4.4和5.0进行适配。

    布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@mipmap/bg"
    android:scaleType="fitXY"/>
    </RelativeLayout>

    透明状态栏

    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)支持4.4及以上版本,透明(4.4以上),半透明(5.0以上)),所以5.0以上全透明单独适配。

    1
    2
    3
    4
    5
    6
    7
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    }else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }

    image

    透明状态栏和导航栏

    代码设置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    getWindow().setNavigationBarColor(Color.TRANSPARENT);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }

    image

    真正的沉浸式状态栏

    状态栏和导航栏在4.4以上半透明,在5.0以上不透明。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    public void (大专栏  透明状态栏和沉浸式状态栏"keyword">boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    | View.SYSTEM_UI_FLAG_FULLSCREEN
    | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
    }
    }

    image

    ToolBar和状态栏颜色一致

    主要有两种情况:纯色和渐变色。

    纯色

    最简单的方式就是colorPrimary和colorPrimaryDark设为同一个颜色:

    1
    2
    3
    4
    5
    6
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorAccent</item>
    </style

    在代码中设置的话,SDK21及以上可以使用getWindow().setStatusBarColor()方法设置颜色,在SDK19及以上需要找到状态栏View,然后设置背景颜色

    1
    getWindow().setStatusBarColor(Color.TRANSPARENT);

    还可将状态栏的颜色设为透明,然后将ToolBar的内容扩展到状态栏上,具体方法看下面渐变色的介绍

    渐变色

    要实现渐变色,ToolBar和状态栏的颜色不好单独设置,可以给ToolBar设置颜色后扩展到状态栏上。
    渐变色可以使用shape创建,也可以用图片。使用gradient设置渐变色:

    1
    2
    3
    4
    5
    6
    7
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
    android:angle="90"
    android:startColor="#7f99a8"
    android:endColor="#8ea8b7"
    android:type="linear"/>
    </shape>

    toolbar.setFitsSystemWindows(true)将ToolBar的内容扩展到状态栏,让ToolBar的内容不与状态栏重叠。在代码中实现:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    toolbar.setFitsSystemWindows(true);
    }else if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    toolbar.setFitsSystemWindows(true);
    }

    image

  • 相关阅读:
    vue生命周期简介和钩子函数
    vue.js 笔记
    vue-cli安装以及搭建vue项目详细步骤
    nodejs 报错
    线程池 一 ThreadPoolExecutor
    JUC 一 线程池
    线程八锁
    JUC 一 ReentrantReadWriteLock
    JUC 一 ReentrantLock 可重入锁
    JUC 一 CountDownLatch(闭锁)
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12239885.html
Copyright © 2011-2022 走看看