How to Animate the Up-Button to Hamburger like in Gmail

在使用Drawerlayout时,Toolbar左上角的汉堡图标可以呼出侧栏菜单,当google推荐侧栏显示延伸到状态栏下面时,曾经的酷炫的汉堡变箭头动画就被盖住了,这么酷的动画似乎没有存在的必要。

gmail首页中,点击列表任意item都会进入邮件详情页面,这个过程Toolbar左上角的汉堡图标会变换成箭头图标。如下


这样的话,当点击汉堡图标呼出侧栏菜单时,动画就可以去掉了。而且,在进入邮件详情时,如果想快速进入其它主菜单,可以直接在左侧屏幕边缘右滑呼出侧栏菜单,不用点返回再去呼出侧栏菜单,减少了操作层次。

接下来,可以尝试去实现这个效果。

在普通的DrawerLayout中,汉堡变箭头动画是随着DrawerLayout呼出而变化的。从源码ActionBarDrawerArrowToggle中可以找到,控制汉堡变箭头动画是由方法setProgress();控制的:

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
    mSlider.setPosition(Math.min(1f, Math.max(0, slideOffset)));
}

public void setPosition(float position) {
    if (position == 1f) {
        setVerticalMirror(true);
    } else if (position == 0f) {
        setVerticalMirror(false);
    }
    setProgress(position);
}

onDrawerSlide是DrawerListener的回调方法,也就是但侧栏滑动过程时调用。mSlider是继承DrawerArrowDrawable的DrawerArrowDrawableToggle内部类对象,DrawerArrowDrawable则就是主要这个动画的实现类,实现方法就是setProgress()。

实现这个动画主要是调用mSlider.setPosition(some_float_between_0_and_1);所以可以这样实现:

1,由于mSlider是私有变量,我们可以通过反射取到这个私有变量,然后调用setPosition(some_float_between_0_and_1);由于是要实现动画,所以传递的参数可以用ValueAnimator.ofFloat(float... values)实现。

2,另外,可以稍微封装起来,这样可以不用反射,增加适用性。效果如下:


在stackoverflow上找到了另外一种方法,但是实际效果却不怎么好http://stackoverflow.com/questions/36631288/how-to-animate-the-up-button-to-hamburger-like-in-gmail第一个回答。

github地址:https://github.com/XYScience/DrawerToggleLikeGmail

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值