DrawerLayout使用(实现SlidingMenuUI效果)

以前做侧边栏功能,使用的是开源库SlidingMenu,最近在做透明状态栏的时候出现menu跟content没办法上移到状态栏的问题,想起以前创建的带侧边栏的Activity是能够使用状态栏的,不过他的侧边栏是用的系统自带的DrawerLaout,准确说应该叫做抽屉,命名跟他的效果也很贴切。
下面记录一些在使用DrawerLaout的时候遇到的一些问题及跟SlidingMenu在滑动风格上的区别,以及使用DrawerLaout做出像SlidingMenuUI效果的处理。
我们先往下看:
找了张美女图片做为背景图,下面是主界面
这里写图片描述
划出抽屉菜单
这里写图片描述
1. 划出菜单后,我们的内容区域多了一层阴影,如果菜单是黑色的,像我这个demo中的一样,多了阴影就很难看了,那怎么去掉这个阴影呢,

设置以下代码即可实现

mDrawerLayout.setScrimColor(Color.TRANSPARENT);
  1. 用过SlidingMenu的同学都知道,划出菜单的时候我们的内容区域会跟着移动的,但是上面的效果图是菜单是浮在内容区域上面的,这样如果想从SlidingMenu切换到DrawerLayout然后又不能说服我们得UI妹子,那这里有个方法可以实现将content也同步进行移动。
    先看效果图:
    这里写图片描述
    从图中可以看出问题1也解决了-没有了阴影。主要一点是美女也跟着菜单像右边移动了。效果是不是跟SlidingMenu一样,别急,我们来看代码
    不,看代码前先说下nineoldandroids.jar这个库,这个是一个兼容的动画库,相信很多同学都用过,没用过的自行脑补,这里就不多说了。为什么提到这个库呢,因为我们的效果是使用这个库实现的。看代码咯:
mDrawerLayout.addDrawerListener(new DrawerListener() {
            @Override
            public void onDrawerStateChanged(int newState) {
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                View mContent = mDrawerLayout.getChildAt(0);
                ViewHelper.setTranslationX(mContent,
                            mMenu.getMeasuredWidth() * slideOffset);

            }

            @Override
            public void onDrawerOpened(View drawerView) {
            }

            @Override
            public void onDrawerClosed(View drawerView) {
            }
        });

通过给DrawerLayout增加addDrawerListener监听器,在滑动的过程中去改变我们的content的位置。

  1. 下面我们用DrawerLayout做出酷狗音乐的菜单效果
    原文来自鸿洋的
    http://blog.csdn.net/lmj623565791/article/details/41531475/
    这里写图片描述
    是不是很像。
    下面看代码吧:
mDrawerLayout.addDrawerListener(new DrawerListener()
        {
            @Override
            public void onDrawerStateChanged(int newState)
            {
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset)
            {
                View mContent = mDrawerLayout.getChildAt(0);
                View mMenu = drawerView;
                float scale = 1 - slideOffset;
                float rightScale = 0.8f + scale * 0.2f;
                float leftScale = 1 - 0.3f * scale;
                ViewHelper.setScaleX(mMenu, leftScale);
                ViewHelper.setScaleY(mMenu, leftScale);
                ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
                ViewHelper.setTranslationX(mContent,
                mMenu.getMeasuredWidth() * (1 - scale));
                ViewHelper.setPivotX(mContent, 0);
                ViewHelper.setPivotY(mContent,
                    mContent.getMeasuredHeight() / 2);
                mContent.invalidate();
                ViewHelper.setScaleX(mContent, rightScale);
                ViewHelper.setScaleY(mContent, rightScale);

            }

            @Override
            public void onDrawerOpened(View drawerView)
            {
            }

            @Override
            public void onDrawerClosed(View drawerView)
            {
            }
        });

通过使用DrawerLayout我们实现了很不错的UI效果,同时也发现了一些不足

4.DrawerLayout的滑动只能从页面边缘滑动出来,没有SlidingMenu的效果好,这个我也找到了解决的办法,这里就不贴上代码了,大家直接看到原文 Android——DrawerLayout滑动范围的设置
但是作者也说了,提供的两种方式都有一定的缺陷,我尝试了方法一,用反射去修改滑动范围,跟viewPage一起使用的时候得再处理下事件的分发。如果大家有更好的方法,请告诉我一下。

5.下面看下我们的 DrawerLayout的沉浸式状态栏(透明状态栏是怎么出来的吧)。
很简单,就几句代码
不过只能兼容4.4.4以上系统

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

在我们的Activity中设置上面这段代码即可实现透明状态栏。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值