沉浸式状态栏介绍

沉浸式状态栏式Android 4.4 引入的一个机制,可以将手机顶端的状态栏颜色融入当前app的界面中,而不至于和app的界面以及配色有着明显的割裂。

android 如dialog沉浸式 安卓 沉浸_安卓

在如今手机全面屏化的促进下,并且由于安卓手机的碎片化各家的状态栏背景颜色可能还不一定一致。在不进行沉浸式状态栏适配的app在大屏占比的手机上就会显得异常突兀,下面我就介绍一种最快速方便的将当前app和顶部状态栏实现沉浸式体验的方法。


沉浸式状态栏实现

首先需要明确使用下面的方法需要安卓4.4 KITKAT以上的系统,具体实现仅仅需要两步就可以实现。


步骤一

首先我们需要在想要实现沉浸式状态栏的app界面的页面布局的xml代码中加入以下两句代码:

android:fitsSystemWindows=“true”
android:clipToPadding=“true”

具体代码的添加位置为当前Activity的布局xml文件的除了根布局以外的,最上方和状态栏接触的布局位置。下面我以自己登录界面的代码进行演示,大家只需要关注上方有关渐变背景的相对布局代码,我这个界面主要是一个顶部的切换栏,中间有登录和注册的切换TextView,具体的登录和注册页面通过inflate的方式添加进底部的content。

xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

   <LinearLayout
       android:id="@+id/title_back"
       android:fitsSystemWindows="true" <!--渐变代码添加位置-->
       android:clipToPadding="true"
       android:layout_width="match_parent"
       android:layout_height="100dp"
       android:background="@drawable/login_title_background"
       android:layout_weight="1.0"
       android:orientation="vertical">
   </LinearLayout>

    <LinearLayout
        android:id="@+id/title_switch"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">
        <LinearLayout
            android:id="@+id/ly_login"
            android:layout_width="10dp"
            android:layout_height="50dp"
            android:layout_weight="1.0"
            android:orientation="vertical"
            android:gravity="center_horizontal|center_vertical">
            <TextView
                android:id="@+id/tv_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录"
                android:textStyle="bold"
                android:textSize="20sp"
                android:textColor="#333333"/>
            <LinearLayout
                android:id="@+id/login_bar"
                android:layout_width="70dp"
                android:layout_height="4dp"
                android:layout_marginTop="5dp"
                android:orientation="vertical"
                android:background="#FFBF54">
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ly_regist"
            android:layout_width="10dp"
            android:layout_height="50dp"
            android:layout_weight="1.0"
            android:orientation="vertical"
            android:gravity="center_horizontal|center_vertical">

            <TextView
                android:id="@+id/tv_regist"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:text="注册"
                android:textStyle="bold"
                android:textSize="20sp"
                android:textColor="#CCCCCC"/>
            <LinearLayout
                android:id="@+id/regist_bar"
                android:layout_width="70dp"
                android:layout_height="4dp"
                android:layout_marginTop="5dp"
                android:orientation="vertical"
                android:background="#FFFFFF">
            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="10dp"
            android:layout_height="40dp"
            android:layout_weight="1.0"
            android:gravity="center_horizontal|center_vertical">
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/login_content"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#FFFFFF"
        android:layout_weight="3.0"
        android:orientation="vertical">
    </LinearLayout>

</LinearLayout>

上诉xml代码对应的页面布局效果如下:

android 如dialog沉浸式 安卓 沉浸_安卓_02


步骤二

第二步需要在对应的Activity的Java代码中,onCreate()在setContentView之后添加以下的语句:

if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT) {
 		getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  }

具体的位置下面以我自己的项目部分文件做展示,具体如下:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT) {//沉浸渐变代码添加位置,判断当前sdk版本
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
        login_view= LayoutInflater.from(this).inflate(R.layout.login_tab, null);
        regist_view= LayoutInflater.from(this).inflate(R.layout.regist_tab, null);
        switch_content = (LinearLayout) findViewById(R.id.login_content);
        switch_content.addView(login_view);
   }

至此两步已经完成,重新编译就可以实现上述效果。需要强调的是当前的Activity的style设置的 NoActionBar 。