快捷導(dǎo)航

DrawerLayout結(jié)合Tollbar實現(xiàn)菜單側(cè)滑效果

更新時間：2017年12月04日 14:11:05 作者：ZhengJiaoCsdn

這篇文章主要為大家詳細介紹了DrawerLayout結(jié)合Tollbar實現(xiàn)菜單側(cè)滑效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了DrawerLayout結(jié)合Tollbar實現(xiàn)菜單側(cè)滑的具體代碼，供大家參考，具體內(nèi)容如下

DrawerLayout(抽屜布局)：谷歌官方的控件，可以簡單的實現(xiàn)側(cè)滑菜單；
此Demo主要是DrawerLayout結(jié)合Toolbar實現(xiàn)側(cè)滑左上角返回鍵實現(xiàn)動畫效果，點擊左上角返回鍵實現(xiàn)動畫效果并且滑出滑入側(cè)滑菜單；
xml布局文件：

<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" 
 xmlns:app="http://schemas.android.com/apk/res-auto" 
 tools:context="www.dld.com.drawerlayoutdemo.MainActivity" 
 android:orientation="vertical"> 
 
 <!--app:theme="@style/DrawerArrowStyle"設(shè)置旋轉(zhuǎn)樣式（當DrawerLayout滑出返回鍵有一個動畫）--> 
 <android.support.v7.widget.Toolbar 
  android:layout_width="match_parent" 
  android:layout_height="wrap_content" 
  android:id="@+id/toolbar" 
  android:background="@android:color/holo_blue_dark" 
  app:theme="@style/DrawerArrowStyle"/> 
 
 <android.support.v4.widget.DrawerLayout 
  android:id="@+id/drawerLayout" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
  <!--主布局--> 
  <LinearLayout 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:background="#e5e5e5"> 
   <TextView 
    android:gravity="center" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:text="主頁面" 
    android:textSize="35sp"/> 
  </LinearLayout> 
  <!-- 
  側(cè)滑菜單 
  android:layout_gravity="start"從左邊滑出 
  android:layout_gravity="end"從右邊滑出 
  --> 
  <LinearLayout 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:background="#e5e5e5" 
   android:layout_gravity="start" 
   > 
   <TextView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:text="側(cè)滑菜單" 
    android:gravity="center" 
    android:textSize="35sp"/> 
  </LinearLayout> 
 </android.support.v4.widget.DrawerLayout> 
 
</LinearLayout>

布局文件非常簡單，就是一個線性布局，上面是toolbar，下面是DrawerLayout，抽屜布局里面放兩個容器布局，上面的是主頁面，下面的是菜單頁面；

想要實現(xiàn)左上角返回按鈕的動畫必須給toolbar設(shè)置樣式（app:theme="@style/DrawerArrowStyle"）：

<!-- 左邊的側(cè)滑箭頭指示 是否翻轉(zhuǎn)，顏色--> 
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle"> 
 <item name="spinBars">true</item> 
 <item name="color">@android:color/white</item> 
</style>

接下來設(shè)置Toolbar和DrawerLayout：

toolbar = (Toolbar) findViewById(R.id.toolbar); 
mDrawerLayout= (DrawerLayout) findViewById(R.id.drawerLayout); 
/***************************************Toolbar設(shè)置****************************************/ 
//把布局中的Toolbar當作ActionBar 
setSupportActionBar(toolbar); 
//設(shè)置標題 
getSupportActionBar().setTitle("頤眾商城"); 
//設(shè)置返回鍵 
getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
 
/**********************************DrawerLayout設(shè)置****************************************/ 
//第一步：創(chuàng)建返回鍵，并實現(xiàn)打開關(guān)/閉監(jiān)聽 
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, 0, 0) { 
 @Override 
 //打開Drawer 
 public void onDrawerOpened(View drawerView) { 
  super.onDrawerOpened(drawerView);//開關(guān)狀態(tài)改為opened 
 } 
 
 @Override 
 //關(guān)閉Drawer 
 public void onDrawerClosed(View drawerView) { 
  super.onDrawerClosed(drawerView);//開關(guān)狀態(tài)改為closed 
 } 
}; 
 
//第二步：該方法會自動和actionBar關(guān)聯(lián), 將開關(guān)的圖片顯示在了action上，如果不設(shè)置，也可以有抽屜的效果，不過是默認的圖標 
mDrawerToggle.syncState(); 
//第三步：設(shè)置抽屜滑出來，和滑進去的監(jiān)聽 
mDrawerLayout.setDrawerListener(mDrawerToggle);

點擊打開鏈接免費下載源碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: