Android学习之DrawerLayout_android drawerlayout fragment?.setup

最近和实验室的伙伴一起做项目，用到了DrawerLayout，但是之前学的忘了，现在给自己做做总结

DrawerLayout是Support Libarary包中显示了侧滑菜单效果的控件。
drawerLayout分为为侧边菜单和主内容区，侧边菜单可以根据手势打开和关闭，主内容去可以随着菜单的点击而变化

DrawerLayout其实是一个布局控件，和LinearLayout一样，它最好是最外层布局，也就是根布局，否则会出现触摸时间被屏蔽的现象。
注意，在DrawerLayout布局中，只能有两个布局，前面一个主内容，后面一个是侧滑菜单的部分，侧滑菜单必须设置layout_gravity=“start/left”属性，表示是左滑出还是右滑出。

我们先看布局：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    tools:context="com.example.asus1.testdrawerlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#000"
        >

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

          <ImageView
              android:layout_width="50dp"
              android:layout_height="match_parent"
              android:id="@+id/iv_showdrawer"
              android:src="@mipmap/ic_showdrawer"
              android:scaleType="center"
              />

          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/tv_title"
              android:textColor="#fff"
              android:textSize="18sp"
              android:text="我的内容"
              android:layout_gravity="center_vertical"

              />
      </LinearLayout>

    </android.support.v7.widget.Toolbar>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"

            >
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="100dp"
            android:src="@mipmap/bg_content" />

        </LinearLayout>

    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "start"
        android:id="@+id/nv_leftdrawer"
        app:headerLayout="@layout/view_leftdrawer"
        app:menu="@menu/menu_leftdrawer"
        />

</android.support.v4.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

这个的效果图：

关于NagvigationView稍后再说

---

drawerlayout的左侧或者右侧菜单可以的打开和隐藏是可以被DrawerLayout.DrawerLayoutListenner的实现监听到。如果我们的activity有actionbar，那么建议用ActionBarToggle来监听，它是DrawerListener的实现类，它可以将drawerlayout的展开和隐藏与actionbar的app图标关联起来。当展开的时候，有一定的平移效果，点击图标的时候，还能展示或者隐藏菜单

 private  void init(){
        mToolBar = (Toolbar)findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerlayout);
        mNavtigationView = (NavigationView)findViewById(R.id.nv_leftdrawer);
        //mToolImage = (ImageView)findViewById(R.id.iv_showdrawer);
        setSupportActionBar(mToolBar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mDrawerLinstener = new ActionBarDrawerToggle
                (this,mDrawerLayout,mToolBar,
                        R.string.opendrawer,
                        R.string.closedrawer){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);



            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);



            }


        };

        mDrawerLinstener.syncState();
        mDrawerLayout.addDrawerListener(mDrawerLinstener);

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

效果：

注意几个坑：
我自己在写的时候，因为推介是用drawerlayout作为根布局，我也照做了，但是toolbar就是被侧滑菜单遮盖，原因是我把toolbar写在了主内容里面，而侧滑菜单肯定是要遮盖主内容的。因此需要将drawerlayout作为子布局，toolbar单独出来
一定要用mDrawerLinstener.syncState();来同步状态，要不然就看不到展开的动画效果
在drawerlistener中的两个方法，不能改变toolbar的标题
但是可以更新menu

我们在那两个重写的方法中onDrawerClosed(View drawerView) onDrawerOpened(View drawerView)加上invalidateOptionsMenu();
然后重写

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    // If the nav drawer is open, hide action items related to the content view
    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
    menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
    return super.onPrepareOptionsMenu(menu);
}
1
2
3
4
5
6
7

就可以了

更神奇的是，ActionBarDrawerToggle的onOptionsItemSelected方法。该方法activity的onOptionsItemSelected方法中根据传递进来的menu item做了上面我们在“一般想法”中提到的事情。用官方的说法是”ActionBarDrawerTogglewill take care of this”。我们只需这样做就ok了：

@Override
public boolean  onOptionsItemSelected(MenuItem item) {
// The action bar home/up actionshould open or close the drawer.
// ActionBarDrawerToggle will takecare of this.
if(mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
……….//处理其他菜单点击事件
returnsuper.onOptionsItemSelected(item);
}
1
2
3
4
5
6
7
8
9
10

关于Fragment那块，我觉得没有必要单独说

参考：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0925/1713.html

附上gitHub的地址：https://github.com/vivianluomin/PracticeEveryDay