Navigation Drawer 打造MD侧边栏

Google原生侧边菜单 Navigation Drawer!

Posted by Mio4kon on 2014-11-29

Navigation Drawer

参考链接:官方API博客

使用方法

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:id="@+id/toolbar"
    ... />

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

    <!-- Content -->
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      ...

    </RelativeLayout>

    <!-- Side Drawer -->
    <LinearLayout
      android:id="@+id/drawer_view"
      android:layout_width="@dimen/navdrawer_width"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      android:background="#88FFFFFF"
      android:orientation="vertical">
    </LinearLayout>

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

</RelativeLayout>

drawer_view 中,要記得 layout_gravity 設定成 start 或是 left



如果想要下面这张覆盖在ToolBar的效果,只要将Drawerlayout写在最外层即可

image

<android.support.v4.widget.DrawerLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/drawer"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  tools:context=".MainActivity">

  <!-- Content -->
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      ... />

    ...

  </RelativeLayout>

  <!-- Side Drawer -->
  <LinearLayout
    android:id="@+id/drawer_view"
    android:layout_width="@dimen/navdrawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:clickable="true"
    android:background="#88FFFFFF"
    android:orientation="vertical">

  </LinearLayout>

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

需要注意的是地方在 Side 的 layout 要設定 clickable 的屬性設定為 true,否則會在側邊欄打開的狀況下,還能按到位於介面下方的 up button。

代码声明

//open button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// Handle DrawerLayout
DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
// Handle ActionBarDrawerToggle
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
actionBarDrawerToggle.syncState();
// Handle different Drawer States :D
mDrawerLayout.setDrawerListener(actionBarDrawerToggle);

点击Navigation icon额度效果

google很多App在点击侧边栏时会有一些特效.如何取消和添加呢?

<style name="AppTheme.Base" parent="Theme.AppCompat">
...
 <!--將新加入的風格 AppTheme.MyDrawerStyle 設定給 drawerArrowStyle 這個屬性-->
  <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>
</style>


<!--加入一個新的 navigation drarwer 的風格-->
<style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
  <!--是否抽屉按钮打转-->
  <item name="spinBars">false</item>
  <!--抽屉按钮的颜色-->
  <item name="color">@android:color/black</item>
</style>