1. 程式人生 > >Android三句程式碼使用沉浸式狀態列

Android三句程式碼使用沉浸式狀態列

用過android手機的人都知道android使用app的時候螢幕上方的狀態列都是黑色的,就算不是黑色的都與正在開啟的app顏色不同。有一種灰常不搭調的感覺。~

今天無意中看了一下關於沉浸式狀態列的資料~~作為強迫症重度患者怎能錯過?

下面就開始使用沉浸式狀態列之旅:

程式碼未上圖先行:

沉浸式:


非沉浸式:


嗯~雖然第二張圖比較模糊,但是也可以想象第一張比較好看(~ ̄▽ ̄)~。

那麼接下來要說的就是如何實現第一張圖的那樣的效果:

首先要說明的是以下方法只適合android4.4或以上的系統

android4.4也就是api19~所以我們在res資料夾下新建一個values-v19,然後再新建一個style.xml檔案。

在style上寫以下程式碼:

指定style為noactionbar而且半透明

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor" >
    </style>
</resources>

然後執行程式可以看到,狀態列與app頂部顏色是一致的,但是如果佈局檔案的頂部寫有其它內容的話會發現佈局檔案上的內容會與狀態列上的內容重合~~這肯定是不允許的。

有沒有方法解決呢?

在使用了沉浸式狀態列的佈局檔案上寫上以下兩句話:

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

就可以解決這個問題了~

但是在某些情況下會發現寫上這兩句程式碼之後,狀態列顏色會是白色或者其它顏色~這是因為寫上這兩句程式碼的地方的顏色是與狀態列顏色是一樣的。

也就是說如果有一個LinearLayout的背景色是紅色,那麼使用了沉浸式狀態列的情況下,在這個linearLayout寫上以上兩句程式碼之後狀態列也會變成紅色。

可以看到實際上就三句程式碼~

 <style name="AppBaseTheme" parent="android:Theme.Holo.Light.NoActionBar.TranslucentDecor" >
 android:clipToPadding="true"
  android:fitsSystemWindows="true"

最後說一下:

每個app都有那麼多的activity如果每個activity都寫一次上面兩句程式碼未免有點煩人,所以在某些情況下是可以“偷懶”的。比如很多app都是用toolbar或actionbar之類的。

那麼狀態列的顏色就要與app上的這個bar的顏色一致。那麼我們只需自己定義一個actionbar然後在佈局上面寫上以上兩句程式碼那麼在使用到這個自定義actionbar的activity自然那兩句程式碼自然會生效啦!

以下就是例子:

首先是自定義actionbar的佈局檔案:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rellay_action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/maincolor"
    android:clipToPadding="true"
     android:fitsSystemWindows="true"
   >
<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="@dimen/top_navigation_height"
    >
     <ImageButton
        android:id="@+id/btn_action_bar_left"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@drawable/common_back_btn_bg_pressed"
        android:contentDescription="@null"
        android:padding="20dp"
        android:visibility="gone" />

    <TextView
        android:id="@+id/tv_action_bar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:singleLine="true"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <ImageButton
        android:id="@+id/btn_action_bar_right"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:contentDescription="@null"
        android:padding="20dp"
        android:visibility="gone" />
</RelativeLayout>
   

</RelativeLayout>

然後是使用這個自定義actionbar的佈局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content" >

    <com.javy.test.view.CustomActionBar
        android:id="@+id/action_bar_act_detail_intro"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </com.javy.test.view.CustomActionBar>
</LinearLayout>


就這樣~~ok了