使用DrawerLayout和SlidingMenu分别实现侧滑菜单、以及AS使用SlidingMenu第三方库的步骤

最近有需求要实现一下侧滑菜单的功能，网上有很多类似的案例，但不是不美观就是失败率极高。所以自己花了点时间实现了一下，然后展示出来，算做一下笔记。

首先实现侧滑菜单有很多方法，这里只演示使用布局DrawerLayout和第三方库SlidingMenu的分别实现，没有过多的解释，直接演示源码。

一、DrawerLayout 实现侧滑菜单

新建一个Android项目,主页面的布局文件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/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <FrameLayout android:id="@+id/flContent" android:layout_width="match_parent" android:layout_height="match_parent" /> <ListView android:layout_gravity="left" android:id="@+id/lvContent" android:layout_width="280dp" android:layout_height="match_parent" android:background="#69ffaa" android:divider="@android:color/transparent" android:dividerHeight="0dp" /> </android.support.v4.widget.DrawerLayout>

接着添加一个ContentFragment，其布局文件fragment_content.xml的代码：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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"> <ImageView android:id="@+id/imgContent" android:layout_width="270dp" android:layout_height="480dp" android:layout_centerInParent="true" /> </RelativeLayout>

ContentFragment的代码实现，随便找四个图片添加进项目：

/** * Created by Layne_Yao on 2018/5/17. * :http://blog.csdn.net/Jsagacity */ public class ContentFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_content, null); ImageView imgContent = view.findViewById(R.id.imgContent); int count = getArguments().getInt("text"); switch (count) { case 0: imgContent.setBackgroundResource(R.drawable.girl1); break; case 1: imgContent.setBackgroundResource(R.drawable.girl2); break; case 2: imgContent.setBackgroundResource(R.drawable.girl3); break; case 3: imgContent.setBackgroundResource(R.drawable.girl4); break; case 4: imgContent.setBackgroundResource(R.drawable.girl5); break; } return view; } }

最后就是MainActivity的代码，全部贴出来：

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener { private DrawerLayout drawerLayout; private FrameLayout flContent; private ListView lvContent; private ActionBarDrawerToggle drawerToggle; private List<String> datas; private ArrayAdapter<String> adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setTitle("菜单选择"); drawerLayout = findViewById(R.id.drawerLayout); flContent = findViewById(R.id.flContent); lvContent = findViewById(R.id.lvContent); datas = new ArrayList<>(); datas.add("美女1"); datas.add("美女2"); datas.add("美女3"); datas.add("美女4"); datas.add("美女5"); adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, datas); lvContent.setAdapter(adapter); lvContent.setOnItemClickListener(this); //创建菜单控制开关 drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.menu, R.string.drawer_open, R.string.drawer_close) { @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); invalidateOptionsMenu(); } @Override public void onDrawerClosed(View drawerView) { invalidateOptionsMenu(); super.onDrawerClosed(drawerView); } }; drawerLayout.setDrawerListener(drawerToggle); if (getSupportActionBar() != null) { //开启ActionBar显示菜单控制开 getSupportActionBar().setDisplayHomeAsUpEnabled(true); //菜单控制开关点击事件能够相应 getSupportActionBar().setHomeButtonEnabled(true); } } @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { Fragment fragment = new ContentFragment(); Bundle args = new Bundle(); args.putInt("text", i); fragment.setArguments(args); getFragmentManager().beginTransaction().replace(R.id.flContent, fragment).commit(); //关闭菜单 drawerLayout.closeDrawer(lvContent); } @Override public boolean onOptionsItemSelected(MenuItem item) { //屏蔽drawerToggle的点击事件 if (drawerToggle.onOptionsItemSelected(item)) { return true; } return super.onOptionsItemSelected(item); } @Override public void onPostCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) { super.onPostCreate(savedInstanceState, persistentState); //将drawerToggle与DrawerLayout状态同步 drawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); drawerToggle.onConfigurationChanged(newConfig); } }

运行结果：

二、AS导入SlidingMenu第三方库的步骤

SlidingMenu的Github地址：https://github.com/jfeinstein10/SlidingMenu

1、下载下来之后，首先拷贝SlidingMenu-master的library文件夹到你项目的根目录下

2、修改setting.gradle

在项目的setting.gradle里面添加module名字

include ':app',':SlidingMenuLibrary'

3、修改app目录下的build.gradle

添加引用momodule

implementation project(':SlidingMenuLibrary')

完了点击右上角的Sync Now，让AS自动为SlidingMenu自动生成gradle，会报错误，没有关系，继续修改错误

4、修改SlidingMenuLibrary的build.gradle

修改的参数跟APP下的build.gradle一致，我的项目是修改成这样：

然后点击右上角的Try again，重新刷新项目，还会报错误，继续修改

5、继续修改错误

以上的步骤就是AS正确导入第三方库SlidingMenu的操作，接下来就操作一个新项目。

三、用SlidingMenu第三方库实现侧滑菜单

很简单，先来个左侧滑菜单栏布局left_menu_main.xml:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_menu" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="45dp" android:background="@drawable/title_bar"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="Layne" android:textColor="#fff" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout> <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="了解会员特权" android:textColor="#000" android:textSize="16sp" /> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="个人装扮" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="我的收藏" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="我的相册" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="我的文件" android:textColor="#000" android:textSize="16sp" /> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="免流量特权" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> </LinearLayout> </ScrollView> </LinearLayout>

差不多的右布局right_menu_main.xml:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_menu" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="45dp" android:background="@drawable/title_bar"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:text="设置" android:textColor="#fff" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout> <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="个人信息" android:textColor="#000" android:textSize="16sp" /> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="二维码名片" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="我的帐号" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="聊天背景" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="通用" android:textColor="#000" android:textSize="16sp" /> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="黑名单" android:textColor="#000" android:textSize="16sp" /> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="隐私" android:textColor="#000" android:textSize="16sp" /> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="系统通知" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:orientation="vertical"> <TextView android:layout_width="fill_parent" android:layout_height="40dp" android:background="@drawable/list_item_style" android:clickable="true" android:drawableRight="@drawable/mm_submenu_normal" android:gravity="center_vertical" android:paddingLeft="25dp" android:text="帮助与反馈" android:textColor="#000" android:textSize="16sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="20dp" android:layout_marginTop="20dp" android:orientation="vertical"> <Button android:layout_width="fill_parent" android:layout_height="40dp" android:layout_marginLeft="20sp" android:layout_marginRight="20sp" android:background="@drawable/list_item_style" android:gravity="center" android:text="退出登录" android:textColor="#fff" android:textSize="16sp" /> </LinearLayout> </LinearLayout> </ScrollView> </LinearLayout>

主页面MainActivity的代码：

public class MainActivity extends SlidingFragmentActivity { private SlidingMenu slidingMenu; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 设置左侧侧拉条目的布局 setBehindContentView(R.layout.left_menu_main); // 获取侧拉条目对象 slidingMenu = getSlidingMenu(); // 1、设置侧拉条目的方向; slidingMenu.setMode(SlidingMenu.LEFT_RIGHT); // 2、设置内容页的宽度； slidingMenu.setBehindOffsetRes(R.dimen.main_menu_behind_offset); // 设置侧拉条目的宽度 // slidingMenu.setBehindWidthRes(res) // 3、设置侧拉条目和内容页分隔线，颜色渐变 slidingMenu.setShadowDrawable(R.drawable.shape_shadow); // 指明分隔线宽度 slidingMenu.setShadowWidthRes(R.dimen.main_menu_shadow_width); // 4、指明可拖拽侧拉条目的范围 // 全屏可拖拽 slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); // 边缘可拖拽 // slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN); // 全屏不可拖拽 // slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE); // 设置右边侧拉 slidingMenu.setSecondaryMenu(R.layout.right_menu_main); // 设置右边侧拉分隔线 slidingMenu.setSecondaryShadowDrawable(R.drawable.shape_shadow); } }

运行结果：

项目有很多小细节没有贴出来，可以下载源码慢慢研究。 源码下载