版權(quán)聲明：本文為HaiyuKing原創(chuàng)文章，轉(zhuǎn)載請注明出處！

前言

簡單實現(xiàn)側(cè)邊欄（側(cè)滑菜單）效果：

• 點擊觸發(fā)打開左側(cè)側(cè)邊欄，手勢滑動關(guān)閉左側(cè)側(cè)邊欄；
• 手勢滑動打開右側(cè)側(cè)邊欄，手勢滑動關(guān)閉右側(cè)側(cè)邊欄；
• 簡單實現(xiàn)打開側(cè)邊欄的動畫效果（透明度、移動效果）；
• 打開側(cè)邊欄的時候動態(tài)更改側(cè)邊欄中的數(shù)據(jù)；

效果圖

? ? ??? ? ? ?

代碼分析

此Demo只是簡單實現(xiàn)側(cè)邊欄的效果，目的在于可以快速的導(dǎo)入到項目中。至于更復(fù)雜的效果，請閱讀《參考資料》

使用步驟

一、項目組織結(jié)構(gòu)圖

注意事項：

1、? 導(dǎo)入類文件后需要change包名以及重新import R文件路徑

2、? Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），如果項目中存在，則復(fù)制里面的內(nèi)容，不要整個覆蓋

二、導(dǎo)入步驟

引入依賴庫

在APP的build.gradle文件中添加以下代碼：

apply plugin: 'com.android.application'android {compileSdkVersion 26defaultConfig {applicationId "com.why.project.drawerlayoutdemo"minSdkVersion 16targetSdkVersion 26versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'}} }dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation 'com.android.support:appcompat-v7:26.1.0'implementation 'com.android.support.constraint:constraint-layout:1.0.2'testImplementation 'junit:junit:4.12'androidTestImplementation 'com.android.support.test:runner:1.0.1'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'//DrawerLayout側(cè)邊欄中動畫效果用到的compile 'com.nineoldandroids:library:2.4.0' }

在styles.xml文件中注釋和添加以下代碼：【主要是用于Demo中的使用自定義的頂部導(dǎo)航欄效果】

<resources><!-- Base application theme. --><!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">&lt;!&ndash; Customize your theme here. &ndash;&gt;<item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style>--><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style></resources>

三、使用方法

在Activity布局文件中使用DrawerLayout【注意下面底色標(biāo)記的代碼】

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/id_drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"><!-- 主內(nèi)容視圖一定要是DrawerLayout的第一個子視圖【必須】 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!-- 引入導(dǎo)航欄 --><includeandroid:id="@+id/main_navbar"layout="@layout/navigationbar_main" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="內(nèi)容區(qū)域"android:textSize="22sp"android:layout_gravity="center"/></LinearLayout><!-- 左側(cè)區(qū)域側(cè)邊欄【可選】【如果想要只有一個右側(cè)的側(cè)邊欄，那么就只需要留一個即可,注意的是left需要換成right】 --><!-- android:tag="LEFT"用于java代碼中通過drawerView.getTag()判斷左側(cè)還是右側(cè) --><fragmentandroid:id="@+id/fragment_leftmenu"android:name="com.why.project.drawerlayoutdemo.MainMenuLeftFragment"android:layout_width="300dp"android:layout_height="match_parent"android:layout_gravity="left"android:tag="LEFT" /><!-- 右側(cè)區(qū)域側(cè)邊欄【可選】 --><fragmentandroid:id="@+id/fragment_rightmenu"android:name="com.why.project.drawerlayoutdemo.MainMenuRightFragment"android:layout_width="300dp"android:layout_height="match_parent"android:layout_gravity="right"android:tag="Right" /></android.support.v4.widget.DrawerLayout>

頂部菜單欄布局文件navigationbar_main.xml【布局較簡單，就不展開了】

<?xml version="1.0" encoding="utf-8"?> <!-- 首頁界面的導(dǎo)航欄布局文件 --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/nav_twoversion_home"android:layout_width="match_parent"android:layout_height="48dp"android:layout_gravity="center"android:background="#3F51B5" ><!-- 用戶側(cè)邊欄圖標(biāo) --><ImageViewandroid:id="@+id/nav_user"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:layout_centerVertical="true"android:paddingLeft="10dp"android:paddingRight="10dp"android:contentDescription="@string/app_name"android:gravity="center"android:src="@drawable/nav_user" /><!-- 標(biāo)題 --><TextViewandroid:id="@+id/nav_title"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_centerInParent="true"android:gravity="center"android:text="@string/app_name"android:textColor="#ffffff"android:textSize="18sp" /></RelativeLayout> navigationbar_main.xml

創(chuàng)建側(cè)邊欄碎片文件——MainMenuLeftFragment、MainMenuRightFragment【根據(jù)項目實際需求，可能只需要創(chuàng)建一個即可】【可參考demo中，直接復(fù)制到實際項目中，注意修改activity布局文件中的fragment的完整路徑地址】

MainMenuLeftFragment.java

package com.why.project.drawerlayoutdemo;import android.os.Bundle; import android.support.v4.app.Fragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;/*** Created by HaiyuKing* Used 首頁左側(cè)側(cè)邊欄碎片界面*/public class MainMenuLeftFragment extends Fragment {private static final String TAG = "MainMenuLeftFragment";/**View實例*/private View myView;// private TextView tv_show;//重寫public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {Log.d(TAG,"onCreateView");myView = inflater.inflate(R.layout.fragment_home_left_menu, container, false);return myView;}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onActivityCreated(savedInstanceState);Log.d(TAG,"onActivityCreated");//初始化控件以及設(shè)置 initView();}@Overridepublic void onResume() {super.onResume();Log.d(TAG,"onResume");//初始化監(jiān)聽事件 initEvent();}/**初始化控件*/private void initView(){Log.d(TAG,"initView");tv_show = myView.findViewById(R.id.tv_show);}/**初始化默認(rèn)數(shù)據(jù)【這個需要在activity中執(zhí)行，原因是：在布局文件中通過<fragment>的方式引用Fragment，打開Activity的時候，Fragment的生命周期函數(shù)均執(zhí)行了】* 那么就存在一個問題，初始化fragment中的數(shù)據(jù)，可能會在activity數(shù)據(jù)初始化之前執(zhí)行*/ public void setDefaultDatas(){tv_show.setText(tv_show.getText() + "\n執(zhí)行了一次setDefaultDatas()");}/**初始化監(jiān)聽事件*/private void initEvent(){} }

fragment_home_left_menu.xml布局文件

<?xml version="1.0" encoding="utf-8"?> <!-- 首頁界面的左側(cè)側(cè)邊欄界面布局文件 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="#E3E3E3"><TextViewandroid:id="@+id/tv_show"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="左側(cè)側(cè)邊欄區(qū)域"android:textSize="18sp"/> </LinearLayout>

在Activity中使用如下【繼承FragmentActivity或者其子類AppCompatActivity】

package com.why.project.drawerlayoutdemo;import android.content.Context; import android.os.Bundle; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.Gravity; import android.view.View; import android.widget.ImageView;import com.nineoldandroids.view.ViewHelper;public class MainActivity extends AppCompatActivity {private Context mContext;/**導(dǎo)航欄左側(cè)的用戶圖標(biāo)*/private ImageView nav_userImg;/**導(dǎo)航欄左側(cè)的側(cè)邊欄的父容器*/private DrawerLayout mDrawerLayout;/**導(dǎo)航欄左側(cè)的側(cè)邊欄碎片界面*/private MainMenuLeftFragment leftMenuFragment;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mContext = this;//初始化控件 initViews();//初始化數(shù)據(jù) initData();//初始化控件的點擊事件 initEvent();}private void initViews() {nav_userImg = (ImageView) findViewById(R.id.nav_user);mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);//關(guān)閉手勢滑動：DrawerLayout.LOCK_MODE_LOCKED_CLOSED（Gravity.LEFT：代表左側(cè)的） mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.LEFT);leftMenuFragment = (MainMenuLeftFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_leftmenu);}private void initData() {}private void initEvent() {//用戶圖標(biāo)的點擊事件nav_userImg.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {OpenLeftMenu();}});//側(cè)邊欄的事件監(jiān)聽mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener(){/*** 當(dāng)抽屜滑動狀態(tài)改變的時候被調(diào)用* 狀態(tài)值是STATE_IDLE（閑置-0），STATE_DRAGGING（拖拽-1），STATE_SETTLING（固定-2）中之一。*/@Overridepublic void onDrawerStateChanged(int newState){}/*** 當(dāng)抽屜被滑動的時候調(diào)用此方法* slideOffset 表示 滑動的幅度(0-1)*/@Overridepublic void onDrawerSlide(View drawerView, float slideOffset){Log.w("onDrawerSlide", "slideOffset="+slideOffset);//0.0 -- 0.56 -- 1.0 View mContent = mDrawerLayout.getChildAt(0);//內(nèi)容區(qū)域viewView mMenu = drawerView;float scale = 1 - slideOffset;if (drawerView.getTag().equals("LEFT")){//左側(cè)的側(cè)邊欄動畫效果//設(shè)置左側(cè)區(qū)域的透明度0.6f + 0.4f * (0.0 ... 1.0)【也就是打開的時候透明度從0.6f ... 1.0f，關(guān)閉的時候反之】ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * slideOffset);//移動內(nèi)容區(qū)域：左側(cè)側(cè)邊欄寬度 * (0.0 ... 1.0)【也就是打開的時候，內(nèi)容區(qū)域移動從0 ... 左側(cè)側(cè)邊欄寬度】ViewHelper.setTranslationX(mContent,mMenu.getMeasuredWidth() * slideOffset);mContent.invalidate();//重繪view } else{//右側(cè)的側(cè)邊欄動畫效果//移動內(nèi)容區(qū)域：-右側(cè)側(cè)邊欄寬度 * (0.0 ... 1.0)【也就是打開的時候，內(nèi)容區(qū)域移動從-0 ... -左側(cè)側(cè)邊欄寬度】ViewHelper.setTranslationX(mContent,-mMenu.getMeasuredWidth() * slideOffset);mContent.invalidate();}}/*** 當(dāng)一個抽屜被完全打開的時候被調(diào)用*/@Overridepublic void onDrawerOpened(View drawerView) {if (drawerView.getTag().equals("LEFT")){//如果感覺顯示有延遲的話，可以放到nav_userImg的點擊事件監(jiān)聽中執(zhí)行leftMenuFragment.setDefaultDatas();//打開的時候初始化默認(rèn)數(shù)據(jù)【比如：請求網(wǎng)絡(luò)，獲取數(shù)據(jù)】 }}/*** 當(dāng)一個抽屜被完全關(guān)閉的時候被調(diào)用*/@Overridepublic void onDrawerClosed(View drawerView){//關(guān)閉手勢滑動：DrawerLayout.LOCK_MODE_LOCKED_CLOSED（Gravity.LEFT：代表左側(cè)的） mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.LEFT);}});}/**打開左側(cè)的側(cè)邊欄*/public void OpenLeftMenu(){mDrawerLayout.openDrawer(Gravity.LEFT);//打開手勢滑動：DrawerLayout.LOCK_MODE_UNLOCKED（Gravity.LEFT：代表左側(cè)的） mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.LEFT);} }

混淆配置

無

參考資料

Android DrawerLayout 高仿QQ5.2雙向側(cè)滑菜單

DrawerLayout

項目demo下載地址

https://github.com/haiyuKing/DrawerLayoutDemo?

轉(zhuǎn)載于:https://www.cnblogs.com/whycxb/p/8506137.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的DrawerLayoutDemo【侧边栏（侧滑菜单）简单实现】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。