盒子
盒子
文章目录
  1. 一、使用DrawerLayout布局
  2. 二、使用ActionBarDrawerToggle
  3. 三、将抽屉布局的层级填到toolbar之上

DrawerLayout 学习笔记

DrawerLayout的使用十分简单,使用android.support.v4.widget.DrawerLayout标签即可,DrawerLayout的第一个子标签就是正文,其他布局都是抽屉布局(默认隐藏在屏幕外)。可以使用android:layout_gravity属性指定是隐藏在屏幕的左边或者右边。

一、使用DrawerLayout布局

把activity_main.xml修改成下面的样子,这里声明了一个LinearLayout作为正文布局(DrawerLayout的第一个子标签),和其他两个LinearLayout布局作为抽屉布局(将android:layout_gravity设置为left或者right):

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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!-- 正文布局 -->
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="content" />


</LinearLayout>

<!-- 从左边抽出来的布局 -->
<LinearLayout
android:id="@+id/drawer_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#FFFFFF"
android:gravity="center_horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />

</LinearLayout>

<!-- 从右边抽出来的布局 -->
<LinearLayout
android:id="@+id/drawer_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#FFFFFF"
android:gravity="center_horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />

</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

运行之后就长这个样子,可以用手指从左边或者右边把抽屉布局拖出来:

当然也能在代码里面调用openDrawer来显示:

1
2
3
4
//打开左边的抽屉布局
drawerLayout.openDrawer(Gravity.LEFT);
//打开右边的抽屉布局
drawerLayout.openDrawer(Gravity.RIGHT);

二、使用ActionBarDrawerToggle

android提供了一个ActionBarDrawerToggle来简化DrawerLayout的操作,用法十分简单。
1.自定义一个ToolBar(可以查看我之前的一篇博文)

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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="#3F51B5"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />


<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!-- 正文布局 -->
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="content" />


</LinearLayout>

<!-- 从左边抽出来的布局 -->
<LinearLayout
android:id="@+id/drawer_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#FFFFFF"
android:gravity="center_horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />

</LinearLayout>

<!-- 从右边抽出来的布局 -->
<LinearLayout
android:id="@+id/drawer_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#FFFFFF"
android:gravity="center_horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />

</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

2.在acvitity代码中创建ActionBarDrawerToggle并重写下面的方法就可以了

  • 在onPostCreate方法中调用ActionBarDrawerToggle.syncState(),如果不调用该方法,则ActionBarDrawerToggle不会显示 (onPostCreate在Activity完全加载成功之后调用,这个时候所有界面资源都已经创建和初始化完成)
  • 在onOptionsItemSelected方法中调用ActionBarDrawerToggle.onOptionsItemSelected()。(原本我以为这里是用来实现按下按钮打开和关闭抽屉布局的,但经测试,就算不调用也能正常运行。)
    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
    public class MainActivity extends AppCompatActivity {
    ActionBarDrawerToggle mToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mToggle = new ActionBarDrawerToggle(this, drawerLayout,toolbar,R.string.drawer_open, R.string.drawer_close);

    drawerLayout.setDrawerListener(mToggle);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
    //onPostCreate在Activity完全加载成功之后调用
    //这个时候所有界面资源都已经创建和初始化完成
    super.onPostCreate(savedInstanceState);

    //如果不调用该方法,则ActionBarDrawerToggle不会显示
    mToggle.syncState();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    //原本我以为这里是用来实现按下按钮打开和关闭抽屉布局的
    //但经测试,就算不调用也能正常运行。
    return mToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item);
    }
    }

运行可以得到下面这效果,可以使用控制按钮来打开和关闭左边的抽屉布局,那个控制按钮还实现了一种特别酷炫的动画:

三、将抽屉布局的层级填到toolbar之上

知乎的安卓app也使用了DrawerLayout,但它的抽屉布局显示的时候是位于toolbar之上的。我们只要把toolbar标签放到内容布局(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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!-- 正文布局 -->
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">


<!-- 把toolbar放到这里,使抽屉布局层级比toolbar高 -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="#3F51B5"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="content" />


</LinearLayout>

<!-- 从左边抽出来的布局 -->
<LinearLayout
android:id="@+id/drawer_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#FFFFFF"
android:gravity="center_horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />

</LinearLayout>

<!-- 从右边抽出来的布局 -->
<LinearLayout
android:id="@+id/drawer_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#FFFFFF"
android:gravity="center_horizontal">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />

</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>

运行效果如下: