android狀態列一體化沉浸式狀態列相容低版本

阿新 • • 發佈：2018-12-23

摘要 Android 沉浸式狀態列、狀態列一體化、透明狀態列、仿ios透明狀態列

推薦好用的工具類：http://jaeger.itscoder.com/android/2016/03/27/statusbar-util.html

git地址：https://github.com/laobie/StatusBarUtil

Google 在 4.4 給全屏閱讀文字或玩遊戲這種情景增加了透明狀態列和透明導航欄的功能。

首先上兩張樂家驛站應用的截圖，實際效果大家也可以下載體驗，樂家驛站下載：http://www.wandoujia.com/apps/com.haier.cabinet.customer

注意：本文是自定義標題欄，不用android預設自帶的標題欄。

第一步：設定 Acitivity 所在 window 的屬性

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //透明狀態列 

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // Translucent status bar
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

      

    }

        //透明狀態列
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //透明導航欄
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

只要加入上面兩行程式碼，就可以實現沉浸式通知欄了。效果如圖：

設定狀態列的顏色狀態列的顏色跟兩個屬性有關：

    android:fitsSystemWindows="true"
    android:clipToPadding="true"

只要在某個view設定了該熟悉，那麼狀態列的顏色就跟該view的背景色保持一致。佈局檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:fitsSystemWindows="true"
        android:clipToPadding="true"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#009959"
        android:text="你好，請問你有男朋友嗎"/>


    <Button
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="#ff669d"/>

</LinearLayout>

由於我們要實現的是狀態列和頂部的控制元件是同一個顏色，同時，控制元件內容也不和狀態列重複，所以只要把那兩行程式碼放到我們頂部的控制元件就可以了。上面內容部分來自部落格http://blog.csdn.net/carlos1992/article/details/46773059，感謝原作者。下面我們來解決相容性問題。猶豫這個特性是andorid4.4支援的，最少要api19才可以使用，那麼低於4.4的怎麼辦呢？這裡我們還是通過自定義標題欄的方式解決。首先我們來看怎麼實現文章開頭特產惠介面的效果。本應用是FragmentAcitity+Framgment實現，故主介面是四個fragment組成。 MainUIAcitivy中onCreate方法：

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //透明狀態列
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            // Translucent status bar
            window.setFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

        // 強制更新
        UmengUpdateAgent.setDialogListener(new UmengDialogButtonListener() {

            @Override
            public void onClick(int status) {
                switch (status) {
                    case UpdateStatus.Update:
                        break;
                    default:
                        // close the app
                        AppToast.showShortText(MainUIActivity.this,
                                "非常抱歉，您需要更新應用才能繼續使用");
                        MainUIActivity.this.finish();
                }
            }
        });
    }

首頁（特產惠）佈局的載入如下程式碼，大家可以看到根據當前api是否大於4.4，載入不同的佈局，歸根到底就是標題欄的不同。

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view = inflater.inflate(R.layout.fragment_home_v19, container, false);
        }
        return view;
    }

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    >

        <!--其他佈局-->

    <RelativeLayout
        android:id="@+id/index_title_bar"
        android:layout_alignParentTop="true"
        style="@style/title_bar_style_home"
        android:fitsSystemWindows="true"
        android:gravity="center"
        >

        <TextView
            android:id="@+id/current_city_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:drawableTop="@drawable/ic_location"
            android:drawablePadding="2dp"
            android:text="北京"
            android:textColor="#fff"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="33dp"
            android:gravity="center_vertical"
            android:layout_weight="10"
            android:background="@drawable/shape_edit_corners_bg"
            android:hint="請輸入商品名稱"
            android:imeOptions="actionSearch"
            android:singleLine="true"
            android:textColor="@color/black_text"
            android:textColorHint="#ffb6b6b6"
            android:textSize="14sp"
            android:maxLength="10"
            android:paddingLeft="5dp"
            android:paddingRight="3dp"
            android:drawableLeft="@drawable/ic_search"
            android:drawableRight="@drawable/bg_btn_voice"
            android:layout_toLeftOf="@+id/image_right"
            android:layout_toRightOf="@+id/current_city_text"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>

        <TextView
            android:id="@+id/image_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:drawableTop="@drawable/ic_category"
            android:drawablePadding="2dp"
            android:text="分類"
            android:textColor="#fff"
            android:textSize="10sp" />

    </RelativeLayout>
</RelativeLayout>

fragment_home_v19.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:orientation="vertical"
    >

        <!-- 其他佈局 -->

    <RelativeLayout
        android:id="@+id/index_title_bar"
        android:layout_alignParentTop="true"
        style="@style/title_bar_style_home_v19"
        android:fitsSystemWindows="true"
        android:gravity="center"
        android:paddingTop="@dimen/title_bar_padding_top"
        >

        <TextView
            android:id="@+id/current_city_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:drawableTop="@drawable/ic_location"
            android:drawablePadding="2dp"
            android:text="北京"
            android:textColor="#fff"
            android:textSize="10sp" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="33dp"
            android:gravity="center_vertical"
            android:layout_weight="10"
            android:background="@drawable/shape_edit_corners_bg"
            android:hint="請輸入商品名稱"
            android:imeOptions="actionSearch"
            android:singleLine="true"
            android:textColor="@color/black_text"
            android:textColorHint="#ffb6b6b6"
            android:textSize="14sp"
            android:maxLength="10"
            android:paddingLeft="5dp"
            android:paddingRight="3dp"
            android:drawableLeft="@drawable/ic_search"
            android:drawableRight="@drawable/bg_btn_voice"
            android:layout_toLeftOf="@+id/image_right"
            android:layout_toRightOf="@+id/current_city_text"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>

        <TextView
            android:id="@+id/image_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:drawableTop="@drawable/ic_category"
            android:drawablePadding="2dp"
            android:text="分類"
            android:textColor="#fff"
            android:textSize="10sp" />

    </RelativeLayout>
</RelativeLayout>

style.xml

<style name="title_bar_style_home"><!-- 首頁用 -->
        <item name="android:background">#ffc6003b</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">48dp</item>
    </style>
    <style name="title_bar_style_home_v19"><!-- 首頁用v19 -->
        <item name="android:background">#ffc6003b</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">65dp</item>
    </style>

values/dimens.xml

<dimen name="title_bar_padding_top">0dp</dimen>

values-v19/dimens.xml

<dimen name="title_bar_padding_top">20dp</dimen>

首頁（特產惠）的關鍵程式碼就這麼多，下面我們來重點看第二個fragment（生活+）。跟首頁不同的是，生活+介面的標題欄是白色的,如果實現侵色，狀態列也是白色的，這樣狀態列的白色字就看不見了，下面給出解決方法。解決的辦法還是自定義標題欄。原理：自定義標題欄（包含狀態列），背景為黑色，也就是狀態列的顏色。高度為68dp，然後設定paddingTop=20dp，這個20dp就是狀態列的高度。剩下的48dp就是我們真正的標題欄。首先還是根據當前api是否大於4.4，載入不同的佈局，歸根到底就是狀態列的不同。

@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_life, container, false);
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
			view = inflater.inflate(R.layout.fragment_life_v19, container, false);
		}
		
		return view;
	}

fragment_life.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <!-- 其他佈局 -->
</LinearLayout>

title_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_title_bar"
    style="@style/title_bar_style_main"
    android:fitsSystemWindows="true"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFEFEFE">

        <TextView
            android:id="@+id/title_text"
            style="@style/title_text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="end"
            android:singleLine="true" />

        <ImageView
            android:id="@+id/right_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:contentDescription="@null"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:src="@drawable/ic_notice"
            android:visibility="gone"/>


    </RelativeLayout>
</LinearLayout>

fragment_life_v19.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <!-- 其他佈局 -->

    

</LinearLayout>

title_bar_main_v19.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_title_bar"
    style="@style/title_bar_style_main_19"
    android:fitsSystemWindows="true"
    android:paddingTop="@dimen/title_bar_padding_top">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFEFEFE">

        <TextView
            android:id="@+id/title_text"
            style="@style/title_text_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ellipsize="end"
            android:singleLine="true" />

        <ImageView
            android:id="@+id/right_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:contentDescription="@null"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:src="@drawable/ic_notice"
            android:visibility="gone"/>


    </RelativeLayout>
</LinearLayout>

style.xml

<style name="title_bar_style_main">
        <item name="android:background">#FFFEFEFE</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">48dp</item>
        <item name="android:gravity">center_vertical</item>
    </style>
    <style name="title_bar_style_main_19">
        <item name="android:background">@android:color/black</item>
        <item name="android:paddingLeft">0.0dip</item>
        <item name="android:paddingRight">0.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">68dp</item>
        <item name="android:gravity">center_vertical</item>
    </style>

就這麼簡單，希望大家能夠提出意見！

再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智慧的隊伍中來！https://www.cnblogs.com/captainbed

android狀態列一體化沉浸式狀態列相容低版本

android狀態列一體化沉浸式狀態列

android狀態列一體化沉浸式狀態列相容低版本

android狀態列一體化(沉浸式狀態列)

Android狀態列一體化(沉浸式)的實現(Eclipse版)

android全屏／沉浸式狀態列下，各種鍵盤擋住輸入框解決辦法

Android動態顯示和隱藏狀態列/實現沉浸式狀態列

Android關於全屏設定和隱藏狀態列、沉浸式狀態列的總結

透明狀態列或沉浸式狀態在MIUI系統下，更改系統狀態列字型顏色的方法

漫談透明狀態列和沉浸式狀態列

android狀態列一體化、沉浸式狀態列(相容低版本)

android 沉浸式狀態列(像ios那樣的狀態列與應用統一顏色樣式)

Android 沉浸式狀態列完美解決方案

Android中沉浸式狀態列，改變狀態列顏色類似QQ樣式

android系統版本6.0及以上設定沉浸式狀態列

Android 沉浸式狀態列3

QMUI Android的學習——（1）引入庫配置主題，並實現沉浸式狀態列效果

Android沉浸式狀態列

Android狀態列一體化/沉浸/透明

Android—設定沉浸式狀態列

Android實現沉浸式狀態列及標題欄滑動變色

android狀態列一體化 沉浸式狀態列 相容低版本

相關推薦

android狀態列一體化沉浸式狀態列相容低版本