Android自带的DrawerLayout和ActionBarDrawerToggle实现侧滑效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38998213/article/details/82026190

主要就是一下这几句，使用ActionBarDrawerToggle实现侧滑各种效果 ：

initToolBar(mToolbar,true,"");
DrawerLayout drawer = (DrawerLayout) findView(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawer, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();

一下具体详解：

1. // 这两句显示左边的三条杠，如果要变为白色在toolbar的布局文件里添加这两句：
2. // android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
3. // app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
4. getSupportActionBar().setHomeButtonEnabled(true);
5. getSupportActionBar().setDisplayHomeAsUpEnabled(true);

只需要两句代码就可以显示箭头，但默认的颜色是黑色的，要想变成白色，就在toolbar的布局文件中添加注释的两句代码即可。

下面就是Drawer的实现了。

先贴一下toolbar的布局，因为它适合drawer联动的，等会要用到它，至于为什么单独放一个文件中，说是这样可以提高复用率。

1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. android:layout_width="match_parent"
5. android:layout_height="wrap_content"
6. android:id="@+id/toolbar"
7. android:background="?attr/colorPrimary"
8. android:minHeight="?attr/actionBarSize"
9. android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
10. app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
11. >
12.  
13. </android.support.v7.widget.Toolbar>

接着是DrawerLayout的布局，因为它也是一个组件，所以可以在布局文件中使用。

1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:id="@+id/drawer_layout">
6. <LinearLayout
7. android:id="@+id/ll_content"
8. android:layout_width="match_parent"
9. android:layout_height="match_parent">
10.  
11. </LinearLayout>
12.  
13. <LinearLayout
14. android:id="@+id/ll_drawer"
15. android:layout_width="240dp"
16. android:layout_height="match_parent"
17. android:layout_gravity="start"
18. android:background="@android:color/white">
19. <ListView
20. android:id="@+id/lv_drawer"
21. android:layout_width="240dp"
22. android:layout_height="match_parent"
23. android:divider="@null"
24. />
25. </LinearLayout>
26.  
27. </android.support.v4.widget.DrawerLayout>

从上面的代码可以看出，DrawerLayout实在v4包中的。将它作为根布局使用，其中上面一个线性布局作为主界面的容器，下面的一个是作为侧滑菜单内容的容器。要强调的一点是：在下面的LinearLayout中要添加

1. android:layout_gravity="start"

这个属性，才能将它作为侧滑菜单内容的容器，否则其会覆盖上面的LinearLayout。

将上面两个布局用include属性引入MainActivity的布局文件：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:fitsSystemWindows="true"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:orientation="vertical">
7. <include layout="@layout/layout_toolbar"/>
8.  
9. <include layout="@layout/layout_drawer"/>
10. </LinearLayout>

接下来就要在代码中做相关操作了。

首先，先获取toolbar和DrawerLayout的引用：

1. toolbar = (Toolbar) findViewById(R.id.toolbar);
2. setSupportActionBar(toolbar);
3. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

然后创建抽屉的开关，将toolbar和DrawerLayout作为参数传递给它：

1. mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);

通过下面这句实现toolbar和Drawer的联动：

1. mToggle.syncState();

如果没有上面的代码，箭头是不会随着侧滑菜单的开关而变换的，具体的可以自己试验一下。

最后给DrawerLayout设置开关的监听：

1. mDrawerLayout.addDrawerListener(mToggle);

这样就可以实现开头的图片效果了。

下面说一下用Fragment实现点击侧滑菜单项变换页面的效果。

首先定义三个布局，

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical" android:layout_width="match_parent"
4. android:layout_height="match_parent">
5.  
6. <TextView
7. android:layout_width="match_parent"
8. android:layout_height="match_parent"
9. android:text="news"
10. android:gravity="center"
11. android:textSize="29sp"
12. />
13.  
14. </LinearLayout>

三个长得差不多，就贴一个了。

再定义三个Fragment继承自Fragment也可以继承v4包的，我这里继承的不是v4包里的。

1. public class NewsFragment extends Fragment {
2.  
3. @Nullable
4. @Override
5. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
6.  
7. return inflater.inflate(R.layout.fragment_news, container, false);
8. }
9. }

恩，也贴一个吧，反正都差不多。

下面是MainActivity中的相关操作：

首先我让MainActivity中的容器默认添加NewsFragment：

1. // 主页面默认添加NewsFragment
2. fragmentManager = getFragmentManager();
3. fragmentManager.beginTransaction().add(R.id.ll_content, new NewsFragment()).commit();

其次获取侧滑菜单列表的引用，并设置数据和item点击事件：

1. lv_drawer = (ListView) findViewById(R.id.lv_drawer);
2. mAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, items);
3. lv_drawer.setAdapter(mAdapter);
4. ll_drawer = (LinearLayout) findViewById(R.id.ll_drawer);
5. lv_drawer.setOnItemClickListener(new AdapterView.OnItemClickListener() {
6. @Override
7. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
8. switchFragment(position);
9. }
10. });

能看到在上面的点击事件方法中调用了switchFragment方法，用于切换Framment，从而实现页面变换。其具体定义：

1. // 根据所点列表项的下标，切换fragment
2. @Override
3. public void switchFragment(int fragmentId) {
4. mDrawerLayout.closeDrawer(ll_drawer);
5. if(currentFragmentId == fragmentId)
6. return;
7. currentFragmentId = fragmentId;
8. FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
9. switch (fragmentId)
10. {
11. case 0:
12. fragmentTransaction.replace(R.id.ll_content, new NewsFragment());
13. toolbar.setTitle("新闻资讯");
14. break;
15. case 1:
16. fragmentTransaction.replace(R.id.ll_content, new VideoFragment());
17. toolbar.setTitle("视频");
18. break;
19. case 2:
20. fragmentTransaction.replace(R.id.ll_content, new WeatherFragment());
21. toolbar.setTitle("天气");
22. break;
23. }
24. fragmentTransaction.commit();
25. }

解释一下，其中的currentFragmentId表示当前正在显示的Fragment的编号，我是根据侧滑菜单项的下标指定其编号的。方法的第一句代码实现了关闭菜单的功能，其中的参数ll_drawer就是菜单内容容器的引用。然后判断所点菜单项的下标是否等于当前显示的Fragment的id，如果是，则返回，不是，则修改currentFragmentId为当前点击项的下标，最后通过FragmentTransaction的replace方法实现页面变换。