Android Studio官方版DrawerLayout側滑菜單解析

標籤：側滑菜單   drawerlayout   navigationview   android   

如下

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/82/76/wKioL1dWPDSRFthkAAXbB2mdpXE316.gif" title="demo.gif" alt="wKioL1dWPDSRFthkAAXbB2mdpXE316.gif" />

這是使用Android Studio建立的一個DrawerLayout項目跑出來後的效果(沒有Android Studio的盆友趕緊去下載個吧)。

產生後的代碼有點混亂，稍微整理一下，那麼先看布局檔案

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>  <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      xmlns:tools="http://schemas.android.com/tools"      android:id="@+id/drawer_layout"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:fitsSystemWindows="true"      tools:openDrawer="start">        <include          layout="@layout/app_bar_main"          android:layout_width="match_parent"          android:layout_height="match_parent" />        <android.support.design.widget.NavigationView          android:id="@+id/nav_view"          android:layout_width="wrap_content"          android:layout_height="match_parent"          android:layout_gravity="start"          android:fitsSystemWindows="true"          app:headerLayout="@layout/nav_header_main"          app:menu="@menu/activity_main_drawer" />    </android.support.v4.widget.DrawerLayout>

如上在DrawerLayout中引用了app_bar_main.xml，在NavigationView控制項中heraderLayout代表的是樣本圖中側滑菜單綠色的部位，menu則表示功能表項目。

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>  <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:fitsSystemWindows="true"      tools:context="com.lg.slidingmenudemo.MainActivity">        <android.support.design.widget.AppBarLayout          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:theme="@style/AppTheme.AppBarOverlay">            <android.support.v7.widget.Toolbar              android:id="@+id/toolbar"              android:layout_width="match_parent"              android:layout_height="?attr/actionBarSize"              android:background="?attr/colorPrimary"              app:popupTheme="@style/AppTheme.PopupOverlay" />        </android.support.design.widget.AppBarLayout>        <include layout="@layout/content_main" />    </android.support.design.widget.CoordinatorLayout>

app_bar_main.xml中可以在Toolbar中設定頂部標題，感覺引用content_main.xml麻煩的話可以直接在裡邊寫布局，刪掉content_main.xml即可。

MainActivity:

public class MainActivity extends AppCompatActivity          implements NavigationView.OnNavigationItemSelectedListener {        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);          setSupportActionBar(toolbar);            //控制側滑菜單         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);          ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                  this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);          drawer.setDrawerListener(toggle);          toggle.syncState();            //設定NavigationView菜單的選擇事件         NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);          navigationView.setNavigationItemSelectedListener(this);      }          //後退鍵      @Override      public void onBackPressed() {          DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);          if (drawer.isDrawerOpen(GravityCompat.START)) {              drawer.closeDrawer(GravityCompat.START);          } else {              super.onBackPressed();          }      }        @SuppressWarnings("StatementWithEmptyBody")      @Override      public boolean onNavigationItemSelected(MenuItem item) {          int id = item.getItemId();            if (id == R.id.nav_camera) {            } else if (id == R.id.nav_gallery) {            } else if (id == R.id.nav_slideshow) {            } else if (id == R.id.nav_manage) {            } else if (id == R.id.nav_share) {            } else if (id == R.id.nav_send) {            }            //關閉側滑菜單          DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);          drawer.closeDrawer(GravityCompat.START);          return true;      }  }

自己也可以自訂側滑菜單的menu

<?xml version="1.0" encoding="utf-8"?>  <menu xmlns:android="http://schemas.android.com/apk/res/android">        <group android:checkableBehavior="single">          <item              android:id="@+id/nav_camera"              android:icon="@drawable/ic_menu_camera"              android:title="Import" />          <item              android:id="@+id/nav_gallery"              android:icon="@drawable/ic_menu_gallery"              android:title="Gallery" />          <item              android:id="@+id/nav_slideshow"              android:icon="@drawable/ic_menu_slideshow"              android:title="Slideshow" />          <item              android:id="@+id/nav_manage"              android:icon="@drawable/ic_menu_manage"              android:title="Tools" />      </group>        <item android:title="Communicate">          <menu>              <item                  android:id="@+id/nav_share"                  android:icon="@drawable/ic_menu_share"                  android:title="Share" />              <item                  android:id="@+id/nav_send"                  android:icon="@drawable/ic_menu_send"                  android:title="Send" />          </menu>      </item>    </menu>

item中的icon為功能表項目表徵圖資源ID，title則是功能表項目標題(功能表項目顯示的文本)，可以根據需求自訂

源碼地址：http://down.51cto.com/data/2221961

本文出自 “Android開發專欄” 部落格，請務必保留此出處http://liuyvhao.blog.51cto.com/11690759/1786857

Android Studio官方版DrawerLayout側滑菜單解析