Android自制滑动删除Activity组件

今天在做项目的时候,看到iOS端的实现效果是二级页面可以手指在界面上向右滑动关闭页面,而不再是右上角的返回按钮(说实在的,不能单手操作是Android的痛).
于是思考Android上如何实现此功能.

为避免重复造轮子,首先肯定是google,百度了.

很好,网上的各种方案都是在Activity中监听手势,然后实现伪滑动关闭页面.这个方案不是我想要的.

还有一种方案,编写一个可监听滑动的布局,然后在每个想要滑动的activity中作为根布局.这种方案,作者只是提出了思路,并没有完整的思路,但却给了我启发.

思路如下:
1. 首先,Activity是无法控制移动的,但是他其中的View却可以,我们只需要控制View整体跟随手指进行移动即可.
2. 基于第一条,我们需要获取到Activity的根View, 然后监听View的touchEvent.根据手指移动距离实现View中的内容平滑滚动.
3. 基于第2条,如果界面中没有ListView,ScrollView等能够截获事件焦点的控件的话,一切正常. 一旦出现这些控件,我们的滑动将被提前拦截,导致无法实现滑动关闭页面.
4. 于是,我们必须要对事件进行提前拦截,即在View的interceptTouchEvent中作拦截.但显然,对于我们直接获取到的View是无法重写它的intercept逻辑的.因此我们必须重新实现一个能够拦截事件的Layout.
5. 假如此Layout可以正常工作了,能够实现监听手指滑动,也可以提前抢占焦点了,但如何让这个Layout嵌入到我们的Activity中去呢?
6. 一种方案显然可以在xml中将此Layout作为根布局来使用.但总觉得与现有系统耦合的太紧,不具有热插拔能力(就是通过添加/注释一行代码即可实现的能力).
7. 我的目标是要能够通过一行代码解决此问题!
8. 如何既不在xml中加入定制的Layou又能用一行代码解决问题呢?
9. 我起初的思路是,改造Activity,实现一个拥有此功能的抽象类.然后 希望滑动关闭的Activity都来继承此类就可以了.
10. 很好,通过上边代码,我只需要更改现有设计的继承类即可实现目标.
11. 但是很快问题出现了,系统中有的界面本身继承的是FragmentActivity,有的继承自AppCompatActivity,等等.直接改变继承关系导致原有设计功能上的缺失和改变!
12. 不用继承的话,我又该如何作呢?灵光一现,是否可以通过类化:FlipHelper.inject(activity)来达到同样的目的呢,说干就干. 通过在一个静态类FlipHelper中注入界面activity.然后获取到Activity的根View…最后实现目标.
13. 整个过程的实现,变的非常独立,不依赖于任何其他功能.甚至最终我将所有的实现代码写在了一个类中(FlipHelper).也只有区区200行(含注释).
完整的演示代码:https://github.com/andrewlu1/CustomView/
现贴出来,共同分析实现过程:

package cn.andrewlu.app.customview;

import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.Shader;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.FrameLayout;

/**
 * Created by andrewlu on 16-1-15.
 * 通过向activity的结构中注入一层能够拦截事件的View布局,从而可以让内容页跟着手指移动.
 */
public final class FlipHelper {
    public static void inject(Activity activity) {
        ViewGroup root = (ViewGroup) activity.getWindow().findViewById(Window.ID_ANDROID_CONTENT);
        if (root == null || root.getChildAt(0) == null) {
            throw new RuntimeException("inject method must called after setContentView");
        }

        //向其中注入一层布局.
        HDraggableLayout container = new HDraggableLayout(activity);
        // container.setBackgroundColor(Color.argb(100, 0, 0, 0));
        container.setContentDescription("the injected view.");
        View child = root.getChildAt(0);
        child.setBackgroundColor(Color.WHITE);
        ViewGroup.LayoutParams p = child.getLayoutParams(); //new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        root.addView(container, p);
        root.removeView(child);
        container.addView(child);
    }
}


/**
 * Created by andrewlu on 16-1-15.
 * 可以在水平方向拖动的水平滚动布局.表现效果为:当手指向右滑动时,内容会根据手指位置向右一起滑动.
 * 以后可能会扩展向左滑动功能.现在不作讨论.
 * 只能通过new创建出来.因此只实现一个构造函数.
 */
class HDraggableLayout extends FrameLayout {
    private SimpleGestureListener onGestureListener = new SimpleGestureListener();

    public HDraggableLayout(Context context) {
        super(context);
        View shadowView = new ShadowView(context);
        LayoutParams p = new LayoutParams(20, ViewGroup.LayoutParams.MATCH_PARENT);
        p.gravity = Gravity.LEFT | Gravity.TOP;
        p.leftMargin = -20;
        addView(shadowView, p);
    }

    //实现定向/定量的滚动事件拦截.
    private PointF mTouchPoint = new PointF();
    private PointF mTouchPointDist = new PointF();
    private final static int MIN_SLOP = 24;
    private long eventTime = 0;

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                mTouchPoint.x = ev.getRawX();
                mTouchPoint.y = ev.getRawY();
                eventTime = ev.getEventTime();
                onGestureListener.onDown(ev);
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                mTouchPointDist.x = ev.getRawX() - mTouchPoint.x;
                mTouchPointDist.y = ev.getRawY() - mTouchPoint.y;

                //只负责起始时的拦截.拦截后,事件就完全交给touch来处理了.
                if (Math.abs(mTouchPointDist.y) > Math.abs(mTouchPointDist.x)) break;
                if (mTouchPointDist.x < MIN_SLOP) break;

                Log.i("onInterceptTouchEvent", String.format("dx:%f,dy:%f", mTouchPointDist.x, mTouchPointDist.y));
                return true;
            }
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE: {
                mTouchPointDist.x = ev.getRawX() - mTouchPoint.x;
                mTouchPointDist.y = ev.getRawY() - mTouchPoint.y;
                //负责滑动距离的计算.
                if (getScrollX() - mTouchPointDist.x > 0) {
                    mTouchPointDist.x = getScrollX();
                }
                mTouchPoint.x = ev.getRawX();
                mTouchPoint.y = ev.getRawY();
                onGestureListener.onScroll(mTouchPointDist.x, mTouchPointDist.y);
                onGestureListener.onFling(mTouchPointDist.x * 1000 / (ev.getEventTime() - eventTime), mTouchPointDist.y * 1000 / (ev.getEventTime() - eventTime));
                eventTime = ev.getEventTime();
                break;
            }
            case MotionEvent.ACTION_UP: {
                onGestureListener.onUp();
                break;
            }
        }
        return super.onTouchEvent(ev);
    }

    private ValueAnimator backAnim, finishAnim;

    //回滚
    private void scrollBack() {
        backAnim = ObjectAnimator.ofInt(this, "scrollX", getScrollX(), 0).setDuration(200);
        backAnim.start();
    }

    //滚动到结束.
    private void scrollFinish() {
        finishAnim = ObjectAnimator.ofInt(this, "scrollX", getScrollX(), -getWidth()).setDuration(200);
        finishAnim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Context c = getContext();
                if (c instanceof Activity) {
                    ((Activity) c).onBackPressed();
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        finishAnim.start();
    }

    private class SimpleGestureListener {
        public boolean onDown(MotionEvent ev) {

            return false;
        }

        public boolean onScroll(float distanceX, float distanceY) {
            scrollBy(-(int) distanceX, 0);
            return true;
        }

        public boolean onFling(float velocityX, float velocityY) {
            Log.i("onFling", String.format("vX:%f,vY:%f", velocityX, velocityY));
            return false;
        }

        public void onUp() {
            Log.i("onUp", "=====================");
            if (Math.abs(getScrollX()) < getWidth() / 2) {
                scrollBack();
            } else {
                scrollFinish();
            }
        }
    }
}

//实现一个带阴影的控件.阴影呈现在左边.
class ShadowView extends View {
    private Paint shadowPaint = new Paint();

    public ShadowView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Shader mShader = new LinearGradient(getWidth(), 0, 0, 0,
                new int[]{Color.GRAY, Color.TRANSPARENT}, null, Shader.TileMode.CLAMP);
        shadowPaint.setShader(mShader);
        canvas.drawRect(0, 0, getWidth(), getHeight(), shadowPaint);
    }
}

下面帖出完整的代码解释:
1. 核心函数:Fliphelper.inject(Activity)实现了向Activity的View根层级注入一层自定义的Layout. 这样可以省去在Xml中修改根布局的问题.
具体的做法,就是通过

 ViewGroup root = (ViewGroup) activity.getWindow().findViewById(Window.ID_ANDROID_CONTENT);

可以得到包含Activity中的界面的根布局.注意,这里是不是xml文件中的那个根布局,而是嵌套在xml外层的一个根布局,通常是一个FrameLayout.
而root.getChildAt(0)就能够得到activity的实际布局内容了.也就是xml所实例化出来的View.
接下来我们需要构造我们自定义的HDraggableLayout对象,并将它添加到root中去.同时,将root.getChildAt(0)从原有布局即root中移除,并添加到我们自定义的布局对象中去.

这样我们的View层级中多出了一个可以拦截事件的布局(至少我们期望的是它能够在适当的时候拦截我们的触摸事件,而不是拦截所有,否则界面中的所有控件都无法响应滑动事件了)

接着我们来看这一层能够拦截事件的Layout如何实现:
很简单,我们在HDraggableLayout的 onInterceptTouchEvent()函数中,拦截MOVE事件,当满足一定的条件的时候,就返回true,表示我们要拦截这个事件,不让这个事件再向下传递了.
那么这个一定的条件是什么呢?

mTouchPointDist.x = ev.getRawX() - mTouchPoint.x;
mTouchPointDist.y = ev.getRawY() - mTouchPoint.y;
//只负责起始时的拦截.拦截后,事件就完全交给touch来处理了.
if (Math.abs(mTouchPointDist.y) > Math.abs(mTouchPointDist.x)) break;
if (mTouchPointDist.x < MIN_SLOP) break;
return true;

代码中我们可以看到,采取放行策略,即哪些条件可以放行此事件,反之其他的条件都要拦截.那么哪些条件可以放行呢? 当垂直方向的移动距离大于水平方向时,此时我们可能期望的是界面中的ListView的上下滚动,而不是界面随手指移动,因此放行. 第二条件,当水平移动距离小于一个最少距离(24DP)时,也放行,为什么呢?因为手指触摸到屏幕时,由于触摸面积的问题,微小的动作都为引起此MOVE事件,如果因为手指轻轻碰一下屏幕就产生位移,会有太灵敏的感觉,体验绝对不好.因此不拦截.

一旦拦截到事件后,剩下的MOVE事件就会全部发给自身的onTouchEvent().这样在onTouch中让手指跟随界面移动.即可.于是代码如下:

   @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE: {
                mTouchPointDist.x = ev.getRawX() - mTouchPoint.x;
                mTouchPointDist.y = ev.getRawY() - mTouchPoint.y;
                //负责滑动距离的计算.
                if (getScrollX() - mTouchPointDist.x > 0) {
                    mTouchPointDist.x = getScrollX();
                }
                mTouchPoint.x = ev.getRawX();
                mTouchPoint.y = ev.getRawY();
                onGestureListener.onScroll(mTouchPointDist.x, mTouchPointDist.y);
                onGestureListener.onFling(mTouchPointDist.x * 1000 / (ev.getEventTime() - eventTime), mTouchPointDist.y * 1000 / (ev.getEventTime() - eventTime));
                eventTime = ev.getEventTime();
                break;
            }
            case MotionEvent.ACTION_UP: {
                onGestureListener.onUp();
                break;
            }
        }
        return super.onTouchEvent(ev);
    }

同样是检测MOVE事件,只不过这里不是做拦截,而是计算滑动距离,然后让界面跟着手指左右移动.当然要做好边界检测,控制界面只能向左滑到0,向右滑到getWidth()

最后在松开手指的时候,检测滑动的距离是否超过半屏,从而用属性动画的方式,控制界面是退回原位0还是继续向右滑动最后消失.当界面消失时,我们调用了

            @Override
            public void onAnimationEnd(Animator animation) {
                Context c = getContext();
                if (c instanceof Activity) {
                    ((Activity) c).onBackPressed();
                }
            }

Activity.onBackPressed().默认的实现就是finish界面.如果你重写了activity的onBackPressed().那么一定记得带上finish().否则此组件无法实现关闭界面的效果,只是将界面移出了屏幕.而没有destroy()界面.
当然你也可以修改此组件,让这个关闭变成一个回调的过程,这样你就可以在回调中实现关闭动作,而不必依赖Activity的onBackPressed()功能.

还有最后一个小的技巧,我们将界面滑离原来的位置时,发现左边边界与底部颜色融合到一起了,没有层次分明的效果,于是想到要在左边边缘加上阴影效果,很可惜的是,android的View没有阴影的属性,只能自行脑补一个阴影实现.我的思路如下:
在HDraggableLayout的左边加入一个带阴影效果的自定义View.让它刚好偏离出屏幕,当我们滑动的时候,就可以把这个阴影拖出来了.
阴影View的实现如下:

//实现一个带阴影的控件.阴影呈现在左边.
class ShadowView extends View {
    private Paint shadowPaint = new Paint();
    public ShadowView(Context context) {
        super(context);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        Shader mShader = new LinearGradient(getWidth(), 0, 0, 0,
                new int[]{Color.GRAY, Color.TRANSPARENT}, null, Shader.TileMode.CLAMP);
        shadowPaint.setShader(mShader);
        canvas.drawRect(0, 0, getWidth(), getHeight(), shadowPaint);
    }
}

将阴影加入Layout的代码如下:

    public HDraggableLayout(Context context) {
        super(context);
        View shadowView = new ShadowView(context);
        LayoutParams p = new LayoutParams(20, ViewGroup.LayoutParams.MATCH_PARENT);
        p.gravity = Gravity.LEFT | Gravity.TOP;
        p.leftMargin = -20;
        addView(shadowView, p);
    }

有兴趣可以改造此组件,可以增加改变阴影颜色,阴影宽度等方法.

一切就这么简单.一个能够将你的Activity变成可滑动删除的组件就写好了.
实际测试的时候发现,Activity的默认背景颜色为黑色,而不是透明的.想在代码中直接给Activity设置一个透明的样式无论如何都没有起效果.于是采用了最笨的办法,在Manifest.xml中直接给Activity设置一个背景透明的Theme样式.样式如下:

    <style name="myTransparent" parent="AppBaseTheme">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
    </style>

大功告成!看看效果吧.