Android实现原生侧滑菜单的超简单方式

先来看看效果图

当你点击菜单可以更改图标，例如点击happy，首页就会变一个笑脸，这个实现的过程超级简单

你需要使用ToolBar与DrawableLayout两个比较新的控件

首先要写三个xml布局文件，我这里的布局文件是使用了include标签嵌入的，代码如下

headbar_toolbar.xml

my_drawablelayout.xml

main_activity.xml

如何应用在java文件中【一个文件搞定】

package com.demo.usher.demo_slidingmenu;

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

 @BindView(R.id.tbHeadBar)
 Toolbar mTbHeadBar;

 
 @BindView(R.id.llMenu)
 LinearLayout mLlMenu;

 
 @BindView(R.id.lvMenu)
 ListView mLvMenu;

 @BindView(R.id.ivContent)
 ImageView mIvContent;

 @BindView(R.id.dlMenu)
 DrawerLayout mMyDrawable;

 ActionBarDrawerToggle mToggle;

 private List lvMenuList = new ArrayList() {{
  add("angry");
  add("happy");
  add("sad");
  add("embarrassed");
 }};

 private List imageList = new ArrayList() {{
  add(R.drawable.angry);
  add(R.drawable.happy);
  add(R.drawable.sad);
  add(R.drawable.embarrassed);
 }};

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  ButterKnife.bind(this);

  
  initToolBarAndDrawableLayout();

  mLvMenu.setAdapter(new ArrayAdapter(this, android.R.layout.simple_expandable_list_item_1, lvMenuList));
  mLvMenu.setonItemClickListener(new AdapterView.onItemClickListener() {
   @Override
   public void onItemClick(AdapterView parent, View view, int position, long id) {
    mIvContent.setImageResource(imageList.get(position));
    mMyDrawable.closeDrawers();
   }
  });
 }

 private void initToolBarAndDrawableLayout() {
  setSupportActionBar(mTbHeadBar);
  
  getSupportActionBar().setHomeButtonEnabled(true);
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  
  getSupportActionBar().setDisplayShowTitleEnabled(false);

  mToggle = new ActionBarDrawerToggle(this, mMyDrawable, mTbHeadBar, R.string.open, R.string.close) {
   @Override
   public void onDrawerOpened(View drawerView) {
    super.onDrawerOpened(drawerView);
    //Toast.makeText(MainActivity.this, R.string.open, Toast.LENGTH_SHORT).show();
   }

   @Override
   public void onDrawerClosed(View drawerView) {
    super.onDrawerClosed(drawerView);
    //Toast.makeText(MainActivity.this, R.string.close, Toast.LENGTH_SHORT).show();
   }
  };
  
  mMyDrawable.addDrawerListener(mToggle);
  mToggle.syncState();
 }
}

关于butterknife注解与样式

butterknife直接在gradle文件中配置好如下【缺什么就补什么】

apply plugin: 'com.android.application'
apply plugin: 'android-apt'

android {
 compileSdkVersion 24
 buildToolsVersion "24.0.2"

 defaultConfig {
  applicationId "com.demo.usher.demo_slidingmenu"
  minSdkVersion 15
  targetSdkVersion 24
  versionCode 1
  versionName "1.0"
 }
 buildTypes {
  release {
   minifyEnabled false
   proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  }
 }

}

buildscript {
 repositories {
  mavenCentral()
 }
 dependencies {
  classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'
 }
}

dependencies {
 compile fileTree(include: ['*.jar'], dir: 'libs')
 testCompile 'junit:junit:4.12'
 compile 'com.android.support:appcompat-v7:24.2.0'
 compile 'com.jakewharton:butterknife:8.4.0'
 
 apt 'com.jakewharton:butterknife-compiler:8.4.0'
 compile 'com.android.support:support-v4:24.2.0'
}

style【关于返回键的颜色样式等在style文件中修改】

 
  @style/AppTheme.DrawerArrowToggle
 

 
  @android:color/white
 

总结

其实很多时候我们在使用第三方控件的时候往往不知道背后是怎么实现的，使用原生控件可以让我们更好的理解一个交互或者说实现一个功能的原理，有利于做出性能与交互都非常优秀的APP，以上就是这篇文章的全部内容，希望对大家的工作或学习带来一定的帮助。