使用DrawerLayout实现简单的侧滑效果

简介

DrawerLayout是官方的一个实现侧滑菜单的控件,可以使用它实现大部分的侧滑效果。

基本步骤

首先在布局中使用DrawerLayout,它继承自VIewGroup,第一个childView就是我们的内容布局,第二个就是我们的菜单,当然也可以有第三个作为第二个菜单

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/ic_launcher" />

        <ListView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:tag="left"
            android:background="#fff"/>

        <ListView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:tag="right"
            android:background="#fff"/>

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

contentView自然是要填充父布局,菜单的width自己设定就好,值得一提的是菜单的android:layout_gravity属性,left表示左菜单,right表示右菜单这很直观,还有一个start属性,官方解释如下

To support right-to-left (RTL) languages, specify the value with”start” instead of “left” (so the drawer appears on the right when the layout is RTL).

这样就实现最基本的使用了,效果如下
这里写图片描述

listview没有添加数据,背景图片也图省事直接用ic_laucnher,所以看起来比较丑。。。

设置监听

官方提供了接口DrawerListener,监听drawer的状态,需要重写以下四个个方法

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }

方法名已经很明显了,在这就不解释了,接下来我们利用这个接口实现一个侧滑特效
代码如下

            mDrawer.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                // 判断是否左菜单
                if (drawerView.getTag().equals("left")) {
                    // 得到contentView
                    View content = mDrawer.getChildAt(0);
                    int offset = (int) (drawerView.getWidth() * slideOffset);
                    content.setTranslationX(offset);
                }

            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });

这里通过布局文件声明的tag属性来判断是哪一个菜单,如果是左菜单,我们就在滑动过程中不断设置content的translationX,这个值是根据菜单的宽度和偏移比例相乘得到的,效果如下
这里写图片描述
稍加修改就可以实现qq的侧滑效果

        mDrawer.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                // 判断是否左菜单
                if (drawerView.getTag().equals("left")) {
                    // 得到contentView
                    View content = mDrawer.getChildAt(0);
                    int offset = (int) (drawerView.getWidth() * slideOffset);
                    content.setTranslationX(offset);
                    content.setScaleX(1 - slideOffset * 0.5f);
                    content.setScaleY(1 - slideOffset * 0.5f);
                }

            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });

    }

这里写图片描述

使用ActionBarDrawerToggle

ActionBarDrawerToggle这个类实现了DrawerListener接口,它的作用就是配合ToolBar使用,这样我们点击ToolBar的home键时,就可以出发drawer。当然,虽然ActionBarDrawerToggle帮我们重写了四个方法,我们不需要重写,我们也可以根据自己需要重写相关方法,代码如下

        mToolbar.setTitle("Test");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mToggle = new ActionBarDrawerToggle(this, mDrawer, mToolbar, R.string.drawer_open, R.string.drawer_close) {

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                View content = mDrawer.getChildAt(0);
                if (drawerView.getTag().equals("left")) {
                    int offset = (int) (drawerView.getWidth() * slideOffset);
                    content.setTranslationX(offset);
                    content.setScaleX(1-slideOffset / 2);
                    content.setScaleY(1-slideOffset / 2);
                }
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                //mToolbar.setTitle("closed");
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                //mToolbar.setTitle("opened");
            }
        };
        mToggle.syncState();
        mDrawer.addDrawerListener(mToggle);

ActionBarDrawerToggle的构造函数第一个是Activity,第二个是DrawerLayout,第三个是ToolBar,接下来两个int我也不知道是什么。mToggle.syncState()方法是同步toolbar与drawerlayout的状态,也就是home的图标会改变,最后当然就是添加监听了,效果如下
这里写图片描述

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值