快捷導(dǎo)航

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

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

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

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

DrawerLayout(抽屜布局)：谷歌官方的控件，可以簡(jiǎn)單的實(shí)現(xiàn)側(cè)滑菜單；
此Demo主要是DrawerLayout結(jié)合Toolbar實(shí)現(xiàn)側(cè)滑左上角返回鍵實(shí)現(xiàn)動(dòng)畫(huà)效果，點(diǎn)擊左上角返回鍵實(shí)現(xiàn)動(dòng)畫(huà)效果并且滑出滑入側(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)樣式（當(dāng)DrawerLayout滑出返回鍵有一個(gè)動(dòng)畫(huà)）--> 
 <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="主頁(yè)面" 
    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>

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

想要實(shí)現(xiàn)左上角返回按鈕的動(dòng)畫(huà)必須給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>

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

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

點(diǎn)擊打開(kāi)鏈接免費(fèi)下載源碼

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

您可能感興趣的文章: