1. 程式人生 > >另外兩種android沉浸式狀態列實現思路

另外兩種android沉浸式狀態列實現思路

http://www.jianshu.com/p/b100b64544f3

關於沉浸式狀態列相信大家都不陌生,IOS系統很早就有,android5.0及以後版本都支援給狀態列著色,而目前android主流版本還是4.4,網上通用實現4.4(API19)沉浸式狀態列也都是依賴於可以將狀態列變為透明的屬性,再為其著色,主要實現程式碼:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_match_actionbar);
                //只對api19以上版本有效
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { setTranslucentStatus(true); } //為狀態列著色 SystemBarTintManager tintManager = new SystemBarTintManager(this); tintManager.setStatusBarTintEnabled(true); tintManager.setStatusBarTintResource(R.color.statusbar_bg); } @TargetApi
(19) private void setTranslucentStatus(boolean on) { Window win = getWindow(); WindowManager.LayoutParams winParams = win.getAttributes(); final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; if (on) { winParams.flags |= bits; } else
{ winParams.flags &= ~bits; } win.setAttributes(winParams); }

再在根佈局新增以下兩個屬性:

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

為什麼我要尋找其他的方案?

面對大多數的介面自然是沒有多大問題,但是針對類似QQ這種側滑的介面,如圖:


Screenshot_2015-12-30-09-55-33.png


我的手機系統版本是4.4的,如果想做成QQ側滑背景這樣的效果,使用上面的方案就變成了這樣


Screenshot_2015-12-30-09-55-34.png


這樣出來的效果就會很醜,於是才有了改進版的方案,不知QQ是否是這樣做的。
除了上述的缺陷以外,還有一點看著不是很舒服,就是當我使用抽屜選單或者滑動返回效果的時候是這樣的


狀態列並沒有陰影效果


我想要的效果是這樣的


狀態列也會跟著一起滑動

第一種思路

自定義一個狀態列,不能新增“ android:fitsSystemWindows="true"
”這個屬性,不然無法填充到狀態列,如下

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

    <View
        android:id="@+id/status_bar"
        android:layout_width="match_parent"
        android:layout_height="20dp"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

在到程式碼中判斷

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View statusBar = findViewById(R.id.status_bar);

        setContentView(R.layout.activity_test);
        //判斷SDK版本是否大於等於19,大於就讓他顯示,小於就要隱藏,不然低版本會多出來一個
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            setTranslucentStatus(true);
            statusBar.setVisibility(View.VISIBLE);
            //還有設定View的高度,因為每個型號的手機狀態列高度都不相同
        }else{
            statusBar.setVisibility(View.GONE);
        }
    }
    @TargetApi(19)
    private void setTranslucentStatus(boolean on) {
        Window win = getWindow();
        WindowManager.LayoutParams winParams = win.getAttributes();
        final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
        if (on) {
            winParams.flags |= bits;
        } else {
            winParams.flags &= ~bits;
        }
        win.setAttributes(winParams);
    }

其實,這樣已經解決了我上面提出的兩個問題

第二種實現方案

第二種方案是為了解決第一種方案中遇到的奇葩問題,設定了透明屬性的介面(聊天及底下評論的框框)不能被系統輸入法頂上去,之前寫過一篇Android 聊天介面背景圖片被輸入法“頂上去”問題解析,現在遇到的就是無論如何聊天的輸入框都不能被系統輸入法頂上去(就是打字看不到輸入框),經過一番測試,發現竟然和“ android:fitsSystemWindows="true"
”這個屬性有關,加上去輸入框就沒問題,但自定義的狀態列不能被填充到真正的狀態列位置


未標題-1.png


陷入了兩難的境地,加還是不加都有問題,而且都特別明顯,說了半天,來看看第二種方案。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="@android:color/holo_green_light"
    android:fitsSystemWindows="true"
    tools:context="com.saidtx.myapplication.TestActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/edit"
        android:background="@android:color/white">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="20dp"
                android:text="@string/previews"/>
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</RelativeLayout>

關鍵在於下面兩個屬性,還有需要在其他子佈局新增背景,不然就跟隨了最外層的背景,程式碼部分還是採用網上通用方案,只是不需要自定義的狀態列了,也不需要計算狀態列的高度

android:fitsSystemWindows="true"
android:background="@android:color/holo_green_light"

最終效果

問題雖然解決了,卻還是不明白其中的原由,希望有心人解惑