Androd Toolbar的簡單使用三

在Android 原生樣式應用中，有一個特別漂亮的效果，在使用抽屜佈局的時候，展開或關閉抽屜時，Toolbar的 navigation drawer（upButton） 有一個動畫，由三個橫線旋轉成箭頭，大概如下：

靜態圖片展示不出來動畫效果，請自行補腦！

這個效果其實是由 Toolbar+DrawerLayout 實現的。 

可以通過以下幾步實現：

1. 在佈局中加入DrawerLayout
2. 在代碼中找到DrawerLayout，將DrawerLayout 與 Toolbar關聯
3. 通過樣式修改 navigation drawer 的顏色

1. 在佈局中加入DrawerLayout   res/layout/activity_main.xml

<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"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="#339999" />

    <android.support.v4.widget.DrawerLayout
        android:layout_below="@+id/toolbar"
        android:id="@+id/drawerlayou"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--Main Content-->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#123456">

        </LinearLayout>

        <!--DrawerLayout Content-->
        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:background="#345678"
            android:layout_gravity="start" />

    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

2. 在MainActivity中找到DrawerLayout，將DrawerLayout 與 Toolbar關聯

final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayou);

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.app_name, R.string.app_name);
toggle.syncState();

drawerLayout.setDrawerListener(toggle);
 //通過 NavigationDrawer 打開關閉 抽屜
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         Toast.makeText(MainActivity.this, "HOME", Toast.LENGTH_SHORT).show();

         if (drawerLayout.isDrawerOpen(Gravity.START))
              drawerLayout.closeDrawer(Gravity.START);
          else
              drawerLayout.openDrawer(Gravity.START);
      }
});

3. 修改樣式 爲如下：

<resources>

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="colorPrimary">#66cc99</item>
        <item name="colorPrimaryDark">#66cc99</item>
        <item name="android:windowBackground">@color/back</item>
        <!-- 使用自定義樣式-->
        <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>
    </style>

    <style name="AppTheme" parent="AppTheme.Base" />

    <!--自定義 navigation drarwer 的樣式-->
    <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">false</item>
        <item name="color">#FFFFFF</item>
    </style>
</resources>

其中：

spinBars  旋轉效果      默認值爲 true，有旋轉效果 ；false則無旋轉效果。

color navigation icon 的顏色

如果想要抽屜遮住 Toolbar，只需要改下佈局，將Toolbar放入DrawerLayout的主界面即可：

<android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerlayou"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--Main Content-->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#123456">
            <!-- android:elevation="5dp" 加上陰影-->
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                android:elevation="5dp"
                android:background="#339999" />
        </LinearLayout>

        <!--DrawerLayout Content-->
        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:background="#345678"
            android:layout_gravity="start" />

</android.support.v4.widget.DrawerLayout>

源碼下載