DrawerLayout的使用

56 阅读 0 评论 37 点赞

我是靠谱客的博主害怕万宝路，最近开发中收集的这篇文章主要介绍DrawerLayout的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、DrawerLayout简介

是Google公司提供的侧滑栏，内置在SDK中

二、使用DrawerLayout

①、在layout布局中设置DrawerLayout

layout/activity_main（在layout中添加DrawerLayout）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.newbiechen.reviewtechtrontierdemo.MainActivity">
<!--侧滑栏控件-->
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--主题内容，一般使用FrameLayout+Fragment实现内容页-->
<FrameLayout
android:id="@+id/main_frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<!--侧滑栏的内容,这个View可以设置侧滑栏的宽度和高度-->
<LinearLayout
android:id="@+id/main_linear_left_drawer"
android:layout_width="220dp"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

解析：我们可以知道DrawerLayout标签内部接收两个View。

第一个为显示主页内容的视图。第二个为侧滑栏内容的视图。

②、设置DrawerLayout显示的内容

为侧滑栏和主视图添加View，构成完成的View。（为了方便起见，直接在layout中添加了）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.newbiechen.reviewtechtrontierdemo.MainActivity">
<!--侧滑栏控件-->
<android.support.v4.widget.DrawerLayout
<span style="white-space:pre">	</span>android:id="@+id/main_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--主题内容，一般使用FrameLayout+Fragment实现内容页-->
<FrameLayout
android:id="@+id/main_frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--添加了一句话-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="it is main content"/>
</FrameLayout>
<!--侧滑栏的内容,这个View可以设置侧滑栏的宽度和高度-->
<LinearLayout
android:id="@+id/main_linear_left_drawer"
android:layout_width="220dp"
android:layout_height="match_parent"
android:orientation="vertical">
<!--添加了按钮-->
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Button3"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

效果：

③、过程中的小问题

然后发现：额，怎么不能用啊。怎么刚开始显示的是侧滑栏的内容，而且不是给侧滑栏设置了width=220dp了怎么还会占满屏幕。

其实是FrameLayout(主题内容)与LinearLayout(侧滑栏)的View一起显示在了Activity上。

我们可以将FrameLayout中的<TextView>加上android:layout_gravity="center"，然后就会发现文字出现在了中间。

说明：DrawerLayout其实本质上是FrameLayout。

那么如何解决这个问题呢：

在<LinearLayout>上加上 layout_gravity = "left"

效果：

这下终于可以用了，但是发现侧滑栏的背景是半透明的，一般的侧滑栏都有自己的背景颜色，好区分侧滑栏，只要在LinearLayout上加上background="#fff"就可以了。

④、设定Drawer的点击事件

mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
//移动Drawer的过程中回调
}
@Override
public void onDrawerOpened(View drawerView) {
//当打开时候回调
}
@Override
public void onDrawerClosed(View drawerView) {
//当关闭的时候回调
}
@Override
public void onDrawerStateChanged(int newState) {
}
});

三、结合Toolbar使用DrawerLayout

效果图：

要求：Toolbar的使用

1、设置Toolbar与Activity相关联（参考：Toolbar的使用）

2、创建ActionBarDrawerToggle（其实是DrawerLayout.Listener的实现，连接Toolbar与DrawerLayout）

构造方法：

mDrawerToggle = new ActionBarDrawerToggle(activity,
mDrawerLayout,
mToolbar
R.string.drawer_open, /* "对打开侧滑栏的描述 */
R.string.drawer_close /* "对关闭侧滑栏的描述 */
)

创建：

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,mDrawerLayout,
mToolbar,R.string.drawer_open,R.string.drawer_close);
//设置Toolbar显示左上角的图标,默认为返回箭头
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//将toggle设置为mDrawerLayout的监听。
mDrawerLayout.addDrawerListener(toggle);

怎么将Toolbar左上角的指示器弄成（效果图上像三一样的图标）

添加：

mDrawerToggle.syncState();

这样就跟效果图一样了。

3、设置按钮的监听

我们知道ActionBarDrawerToggle是DrawerLayout.Listener的实现，所以也就表示能够重写Listener方法。


ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,mDrawerLayout,
mToolbar,R.string.drawer_open,R.string.drawer_close){
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};

4、特殊配置,保证Activity重启时候恢复原状。

 @Override
protected void onPostCreate(Bundle savedInstanceState)
{
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}

 @Override
public void onConfigurationChanged(Configuration newConfig)
{
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggls
mDrawerToggle.onConfigurationChanged(newConfig);
}

5、完整代码

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;
    private ActionBarDrawerToggle mDrawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.main_drawer);
        mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
        //将Toolbar关联到Activity上
        setSupportActionBar(mToolbar);
        mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,
                mToolbar,R.string.drawer_open,R.string.drawer_close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        //设置Toolbar显示左上角的图标
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //将toggle设置为mDrawerLayout的监听。
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        mDrawerToggle.syncState();
    }
    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}

四、使用Navigation Drawer来制作DrawerLayout 的侧滑栏

http://www.jianshu.com/p/76e30f87a4ed