仿饿了么悬浮购物车按钮

Miryou 2019-06-26

1、需求分析及思路分析

今天新鲜出炉的需求来了:产品要在首页上放置一个悬浮图标,这个图标既起着宣传的作用(图标上面有活动标题),也是一个按钮,点击之后能跳转到某个详情页面。而且为了用户体验更好,在滑动界面时,这个图标要乖乖地藏起来,不能影响用户操作。我仔细分析了一下,哟,这不就是中午点外卖时用的饿了么上面的购物车按钮么?

仿饿了么悬浮购物车按钮

仿饿了么悬浮购物车按钮

用户没有触摸界面时,购物车就正常悬浮在右下角,当界面滑动时,它就自觉地将自身的一半缩到屏幕之外,而且会变得半透明,不再遮挡底下的内容。到了这一步,相信大家都会想到是用触摸事件来实现了。

@Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return super.dispatchTouchEvent(event);
    }

触摸事件有三种,每一步的作用和实现的效果都不一样:

  • 手指按下(ACTION_DOWN):用户手指在屏幕上按下时,记下此时的y坐标作为起始y坐标(startY);
  • 手指抬起(ACTION_UP):获取此时的坐标作为结束坐标与
  • 手指滑动(ACTION_MOVE):根据手指滑动的距离

2、项目创建及布局编写

创建一个新项目,MainActivity的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.lindroid.floatshoppingcart.MainActivity">

   <ListView
       android:id="@+id/listView"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </ListView>

   <ImageView
       android:id="@+id/iv_cart"
       android:layout_alignParentBottom="true"
       android:layout_alignParentRight="true"
       android:layout_marginBottom="55dp"
       android:layout_marginRight="20dp"
       android:src="@mipmap/ic_shopping_cart"
       android:layout_width="50dp"
       android:layout_height="50dp" />

</RelativeLayout>

右下角的ImageView就是我们的主角,图标是我自己找的购物车图标。为了模拟界面滑动,我在底下简单放了一个ListView,并填充了一些数据。

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    private ImageView ivCart;
    private List<String> titles = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initData() {
        for (int i = 0; i < 60; i++) {
            titles.add(new StringBuffer("这是一条数据").append(i).toString());
        }
    }

    private void initView() {
        listView = (ListView) findViewById(R.id.listView);
        ivCart = (ImageView) findViewById(R.id.iv_cart);
        listView.setAdapter(new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,titles));
    }

}

此时的效果如下:
仿饿了么悬浮购物车按钮
布局写完,下面就来实现我们想要的效果了。

3、悬浮按钮的动画效果

悬浮按钮的动画效果很简单,就俩:

  • 位移动画:悬浮按钮向右平移,直至一半在屏幕之外;
  • 渐变动画:悬浮按钮在位移的同时逐渐变得半透明,此处将透明度设为0.5.

3.1 位移动画

首先我们要明确悬浮按钮的位移距离,如下图所示:

仿饿了么悬浮购物车按钮
悬浮按钮的总位移等于它的右侧到右边屏幕的距离(蓝线),再加上它的半径(紫线)。半径我们可以用
getMeasuredWidth获取它的宽度再除于2,那么蓝线的长度呢?

我们无法直接获取控件右侧到右边屏幕的距离,但是我们可以换个思路,先获取整个屏幕的宽度,再减去按钮右侧到左边的距离就行了,而后者可以使用getRight轻松得到。获取手机屏幕宽高可以使用下面的方法:

private int[] getDisplayMetrics(Context context) {
        DisplayMetrics mDisplayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics);
        int W = mDisplayMetrics.widthPixels;
        int H = mDisplayMetrics.heightPixels;
        int array[] = {W, H};
        return array;
    }

3.2 渐变动画

渐变动画就比较简单了,只需要设置起始透明度和结束透明度即可。

3.3 动画集合

两种动画是同时开始和结束的,我们可以设置一个动画集合:

private void hideFloatImage(int distance) {
        isShowFloatImage = false;
        //位移动画
        TranslateAnimation ta = new TranslateAnimation(
                0,//起始x坐标,10表示与初始位置相距10
                distance,//结束x坐标
                0,//起始y坐标
                0);//结束y坐标(正数向下移动)
        ta.setDuration(300);

        //渐变动画
        AlphaAnimation al = new AlphaAnimation(1f, 0.5f);
        al.setDuration(300);

        AnimationSet set = new AnimationSet(true);
        //动画完成后不回到原位
        set.setFillAfter(true);
        set.addAnimation(ta);
        set.addAnimation(al);
        ivCart.startAnimation(set);
    }

动画发生之后不需要归位,所以记得setFillAfter要设为true。

3.4 悬浮按钮回归原位的动画

前面我们讨论的都是界面滑动,按钮向右隐藏的动画,而用户的手指离开屏幕时,悬浮按钮是要回归原位,这时候的动画效果就跟之前的相反了,所以只需小小修改一下参数即可:

private void showFloatImage(int distance) {
        isShowFloatImage = false;
        //位移动画
        TranslateAnimation ta = new TranslateAnimation(
                distance,//起始x坐标
                0,//结束x坐标
                0,//起始y坐标
                0);//结束y坐标(正数向下移动)
        ta.setDuration(300);

        //渐变动画
        AlphaAnimation al = new AlphaAnimation(1f, 0.5f);
        al.setDuration(300);

        AnimationSet set = new AnimationSet(true);
        //动画完成后不回到原位
        set.setFillAfter(true);
        set.addAnimation(ta);
        set.addAnimation(al);
        ivCart.startAnimation(set);
    }

注意一下这里的位移动画的起始坐标。由于补间动画的特性,动画发生位移之后,移动的只是控件的内容,而不是控件本身,所以我们要以控件所在位置为坐标原点,而不是发生位移后的内容!故这里的起始坐标是水平移动的距离,结束坐标是回到坐标原点,也就是0。

4、监听手指触摸事件

分析完动画效果之后,我们现在就要来调用了,前面已经说过了是在触摸事件中监听,那么好的,我们现在就将触摸事件和动画的代码集合起来吧:

private float startY;
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (Math.abs(startY - event.getY()) > 10) {
                    hideFloatImage(moveDistance);
                }
                startY = event.getY();
                break;
            case MotionEvent.ACTION_UP:
                new Handler(new Handler.Callback() {
                    @Override
                    public boolean handleMessage(Message msg) {
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                showFloatImage(moveDistance);
                            }
                        });
                        return false;
                    }
                }).sendEmptyMessageDelayed(0, 1500);
                break;
        }
        return super.dispatchTouchEvent(event);
    }

手指按下时,我们只需要获取到起始坐标。这里要注意的是我们的手指在手机屏幕上的触摸是一个面(手指的与屏幕的接触面积)而不仅仅是一个点,所以MotionEvent.ACTION_MOVE是很容易就触发的。为了避免用户手指一按下悬浮按钮就移动,我们可以设置一个值,当手指滑动的距离超过它时才视为有效的滑动。手指抬起时则延迟1.5s再让悬浮图案还原。当然,不要忘了动画是要主线程中进行的。

运行一下,就可以看到如下的效果了:

仿饿了么悬浮购物车按钮

5、优化动画效果

到现在我们差不多实现了我们想要的效果了,但是如果你试着快速滑动一下就会发现一个可怕的问题:
仿饿了么悬浮购物车按钮

频繁滑动时动画就会频繁地触发,甚至你快速滑动几次后,悬浮按钮看起来就像抽了风一样。这显然是不行的,我们接下来就做如下的优化:

  1. 当悬浮按钮处于显示状态时,不会触发显示动画,处于隐藏状态时,不会触发隐藏动画;
  2. 当手指按下抬起,延时执行显示动画的1.5s内,如果用户再次按下抬起手指,则中止之前的动画,并重新计算延迟时间。

优化1

这个我们只需要加一个布尔值isShowFloatImage来控制即可。每次调用动画判断一下。

优化2

之前是通过Handler发送延迟消息来执行动画的,这样无法控制动画的中止。那么现在,我们就需要用另外一种方法来控制显示动画了。这里我选择了Java的计时器Timer。当用户的手指抬起时,我们记下当前时间upTime,下次用户再次按下手指时将当前时间与upTime比较,差值小于1.5s的话则中止动画。

完成上面两步优化之后的代码如下:

private Timer timer;
    /**用户手指按下后抬起的实际*/
    private long upTime;

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (System.currentTimeMillis() - upTime < 1500) {
                    //本次按下距离上次的抬起小于1.5s时,取消Timer
                    timer.cancel();
                }
                startY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (Math.abs(startY - event.getY()) > 10) {
                    if (isShowFloatImage){
                        hideFloatImage(moveDistance);
                    }
                }
                startY = event.getY();
                break;
            case MotionEvent.ACTION_UP:
                if (!isShowFloatImage){
                    //开始1.5s倒计时
                    upTime = System.currentTimeMillis();
                    timer = new Timer();
                    timer.schedule(new FloatTask(), 1500);
                }
                break;
            default:
                break;
        }
        return super.dispatchTouchEvent(event);
    }

    class FloatTask extends TimerTask {
        @Override
        public void run() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    showFloatImage(moveDistance);
                }
            });
        }
    }

再次运行一下,就会发现动画不会频繁地触发,比之前的体验更好了。

GitHub源码

相关推荐