1. 程式人生 > >TOOLBAR和沉浸式狀態列入門

TOOLBAR和沉浸式狀態列入門

toolbar是android sdk API21新增的元件,是ActionBar的加強版,更加方便自定義佈局。api21之後可以直接使用toolbar,但是我們肯定要支援api21之前的,下邊的所有程式碼都是相容21之前的

簡單toolbar

步驟

首先寫好style

<resources>

    <style name="ActionBarTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

</resources>
 

styles.xml(v19),寫這個是為了狀態列,因為19對應android4.4,只有這個版本以上設定了下邊的style才能改變狀態列顏色

<resources>

    <style name="ActionBarTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowTranslucentNavigation" >true</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

</resources>

指定activity的theme為android:theme="@style/ActionBarTheme"

toolbar的xml程式碼

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffff00"
    android:layoutMode="opticalBounds"
    android:minHeight="?attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

    android:theme="@style/ThemeOverlay.AppCompat.Dark">


</android.support.v7.widget.Toolbar>

佈局

<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:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>

注意android:fitsSystemWindows="true"這句話,防止toolbar和status bar有重疊

主要程式碼

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        設定狀態列的顏色,當版本大於4.4時起作用
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            SystemBarTintManager tintManager = new SystemBarTintManager(this);
            tintManager.setStatusBarTintEnabled(true);
            tintManager.setStatusBarTintResource(android.R.color.holo_red_light);
        }

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setTitle("mainTitle");// 標題的文字需在setSupportActionBar之前,不然會無效
        mToolbar.setTitleTextColor(Color.parseColor("#ff0000"));
        setSupportActionBar(mToolbar);
        mToolbar.setNavigationIcon(android.R.drawable.ic_delete);
        mToolbar.setLogo(android.R.drawable.ic_media_play);
    }
}

效果如上,toolbar上從左到右依次為導航圖,logo,標題

對應module:toolbar0

自定義佈局toolbar

上文的toolbar只有導航圖,logo,標題,我能不能加一些自定義佈局呢,當然可以,就在toolbar對應xml的佈局里加就可以了。

比如我們再toolbar.xml內部加一個LinearLayout,程式碼如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffff00"

    android:layoutMode="opticalBounds"
    android:minHeight="?attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="11111" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="2222" />
    </LinearLayout>
</android.support.v7.widget.Toolbar>

那麼效果變為

此時需要注意

toolbar的android:background="#ff0000"有時候會無效

只要toolbar裡寫了自定義佈局,比如裡面寫了個LinearLayout,那麼toolbar的android:background="#ff0000",這句話就會出現以下情況,如果compileSdk是22,那麼android:background="#ff0000"這句話有效果,如果compileSdk是21,那麼android:background="#ff0000"這句話沒有效果,原因大概是compile'com.android.support:appcompat-v7:22.1.1',這個jar包要求compilesdk在22或以上。如果toolbar裡沒有寫自定義佈局,那麼這句話肯定有效

對應module:toolbar1 

V7的actionbar就是toolbar實現的

Toolbar在Appcombat V7庫是一個公開的控制元件,位於android.support.v7.widget包中,繼承自ViewGroup,所以我們可以像使用普通的容器控制元件一樣使用Toolbar,並主動呼叫相關方法實現ActionBar的功能。但是,Google是希望在Appcombat V7庫中使用Toolbar來代替現有ActionBar的實現,所以肯定不會僅僅提供個控制元件就好了,Appcombat V7還把Toolbar封裝進預設的Activity中。在新建工程時,建立嚮導會預設匯入Appcombat V7庫,自動建立的Activity也會繼承自對Toolbar封裝過的ActionBarActivity,建立工程後立刻執行應用,此時已是Toolbar實現了ActionBar的功能。我們可以試一下,下邊程式碼獲得的v,其實就是Toolbar型別的

View v=findViewById(R.id.action_bar);


 沉浸式的效果

再來看一個沉浸式的效果,把toolbar和狀態列的顏色調為一致android.R.color.holo_blue_bright

狀態列顏色

4.4以上可以修改狀態列顏色,其實控制狀態列顏色很簡單

首先在values-v19資料夾內的styles.xml內新增一個activity的style,這個style內部必須填<itemname="android:windowTranslucentStatus">true</item>

可以是

   <style name="MyTheme"parent="Theme.AppCompat.Light.DarkActionBar">
       <itemname="android:windowTranslucentStatus">true</item>
</style>

也可以是

 
   <style name="MyTheme"parent="Theme.AppCompat.NoActionBar">
       <itemname="android:windowTranslucentStatus">true</item>
   </style>

parent是無所謂的,大部分都可以,關鍵是android:windowTranslucentStatus要置為true

然後制定activity使用此style,最後在oncreate裡面新增程式碼

//       設定狀態列的顏色,當版本大於4.4時起作用

       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
           SystemBarTintManager tintManager = new SystemBarTintManager(this);
           tintManager.setStatusBarTintEnabled(true);
           tintManager.setStatusBarTintResource(android.R.color.holo_red_light);
       }

就可以在4.4級以上版本設定狀態列顏色了

注意狀態列顏色設定其實和toolbar人沒有一毛錢關係

SystemBarTintManager可以使用setStatusBarTintDrawable,雖然這個函式已經被廢棄,但是不要和別人共享Drawable物件,我曾經讓statusbar和actionbar共享一個背景的drawable,會出問題,這個函式會失效,具體原因不明,但是單獨使用一個Drawable是沒問題的

參考文獻