码迷,mamicode.com
首页 > 其他好文 > 详细

高仿qq‘一键下班’—让你的view‘黏’起来

时间:2015-07-27 13:18:21      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:自定义控件   高仿qq   

qq手机客户端自5.0起有一个‘一键下班’的功能,qq聊天的消息数view可以拖拽,有一种黏黏的视觉效果,让手机控件更加生动,也增加了交互时的趣味性。最近在学习自定义控件的知识,所以试着实现了一下这个功能,来看看整体的一个预览效果:
技术分享
然后看一下view的拖动特写:
技术分享

主要要实现的功能:

显示消息的view被手指按住的时候随着手指移动而移动,如果触点和原位置的距离在某个距离A内,移动的view和原位置之间仍然有些‘黏黏的东西’黏住,如果距离大于A,view随手指移动而没有中间的连接部分。然后是手指抬起的情况,如果手指抬起的点到原位置距离小于距离B(B小于A),view会立即回到初始位置,这个时候如果连接还没有断开,view也会回到初始位置但是会有一个回弹的效果,如果手指抬起点到原位置距离大于B,view就不会回到原位置,且在手指抬起的位置有一个爆炸的效果。如果移除了总消息数的view,消息列表的所有view都会在原位置一一爆炸消失。

下边分析一下实现逻辑:

工具分析下qq地布局,这个显示消息数的view是Textview
技术分享,但是拖动的时候是这个样子的:
技术分享
发现这个textview消失了,可见拖动的时候的绘制不是发生在这个textview上的,当然拖动发生得时候view的形状改变也不好处理。
又看了下整个布局的父控件
技术分享
我靠,居然是复写的view,而且还是个容器view,直觉里边有海量的代码,虽然ViewGroup可以聊作参考,但是这又得花费哥们儿大量时间,而且有点偏离目标,只好另辟蹊径。
那么重点回到了刚才拖动的时候textview的消失,既然这玩意消失了,那么拖动的是什么鬼?直觉是海量代码容器view里边对这个拖动事件做了处理,但是我暂时还不太好复写这样一个view,于是我想到了一个替代品,使用一个占满整个布局的一个子view来代替。按住的时候隐藏textview,同时让这个替代的view显示,并接着处理以后的事件。但是有个问题当手指移出这个textview按在其他控件上的时候又会被别的控件把手指的事件拦截掉了。所以这个事件的处理应该是在最最开始就被处理掉,这个由涉及到了Android的事件分发机制,这个参考一个很直观的介绍博客事件分发,所以对事件的处理就放在了activity的dispatchTouchEvent方法中。
那么问题来了怎么判定控件触点是不是落在view内,这用到了View类的一个方法getLocationInWindow,传入一个长度为2的数组,调用之后会得到view的位置的横纵坐标,控件的宽高又可以get得到,所以就可以判断触点是不是落在了这个view内部,决定要不要做接下来的处理。

下边讲一下关键的实现细节

绘制逻辑参考了这篇文章QQ手机版 5.0“一键下班”设计小结,这个主要是一些高中几何的知识,绘制的API可以参考一下aige的自定义控件专栏(强烈推荐),也可以看一下稍后给出的demo。

SnotView的一些主要属性

    private final long KICK_BACK_DURATION = 200;// 鼻涕回弹的时长 单位ms
    private final int BOOM_DURATION = 300;// 爆炸效果时长
    public float oriX, oriY;// “钉住”的鼻涕部分的中心点
    private int oriR;// “钉住”的鼻涕部分的中心点

    public int MAX_DISTANCE;// 最大距离 超过这个距离鼻涕被扯断

    private float fingerX, fingerY;// 手指按住的点 坐标
    private int fingerR;// 拖出来的园的半径
    private int snotColor;// 鼻涕的颜色 
    private Paint snotPaint;// 鼻涕画笔

    private Paint textPaint;// 文字画笔
    private int textColor;// 文字颜色
    private String text;// 文字内容

    private double newR;// 鼻涕被拖动时候 钉住部分的半径 变化的
    private double dist;// 手指和钉住点之间的距离

    // newR变化区间
    private int oriRMax;// “钉住”的鼻涕部分的最大半径
    private int oriRMin;// “钉住”的鼻涕部分做小半径
    private float textSize;// 文字的大小

    // 手指松开的一刻记录的坐标
    private float recordX;
    private float recordY;//

    private double SAFE_DISTANCE;// 安全距离
    volatile boolean hasCut;// 鼻涕是不是被扯断
    private float width, height;// 鼻涕的宽高
    private int[] imgs = new int[] { R.drawable.idp, R.drawable.idq, R.drawable.idr, R.drawable.ids, R.drawable.idt };// 动画资源
    private boolean boombing;// 是不是正在播放爆炸动画
    private Bitmap bitmap;// 动画帧资源
    Handler handler = new Handler();
    private DragCallback callback;

而我们绘制的内容是要和触摸到的view相关联的,于是有了以下这个初始化方法。参数exHeigh是ActionBar加上状态栏的高度,方便我们计算精确的坐标。注意里边有些属性值的确定相较于qq并不是确切的。

private void copyPropertiesOf(TextView view, int exHeigh) {
        int[] location = new int[2];
        view.getLocationInWindow(location);
        textSize = view.getTextSize();
        ColorDrawable cDrawable = (ColorDrawable) view.getBackground();
        snotColor = cDrawable.getColor();
        ColorStateList clist = view.getTextColors();
        textColor = clist.getDefaultColor();
        width = view.getWidth();
        height = view.getHeight();
        oriR = view.getHeight() / 2;
        oriX = location[0] + view.getWidth() / 2;
        oriY = location[1] + oriR - exHeigh;
        text = view.getText().toString();
        fingerR = oriR * 5 / 7;
        oriRMax = oriR;
        oriRMin = oriR * 2 / 5;
        MAX_DISTANCE = oriR * 6;
        SAFE_DISTANCE = oriR * 5;
        boombing = false;
        hasCut = false;
        setBackgroundColor(Color.parseColor("#00000000"));
    }

最后一句话setBackgroundColor(Color.parseColor(“#00000000”));使背景透明,因为我们的SnotView是在所有控件之上的,拖动的时候底下的部分也需要被看到。

看一看绘制方法,主要还是参考之前提到的那篇文章,有难度的可能是一些简单的几何运算,因为手机屏幕上的坐标系和几何坐标系不同,略微烧脑,不过相信对大多数人来说,把这个缕清应该不是问题。

protected void onDraw(Canvas canvas) {
        if (boombing) {
            if (bitmap != null)
                canvas.drawBitmap(bitmap, fingerX - oriR, fingerY - oriR, snotPaint);
        } else {
            drawNowOriCircleAndSnot(canvas);
            drawMovingObject(canvas);
        }
    }

    /**
     * @Description 画跟随手指移动的部分
     */
    private void drawMovingObject(Canvas canvas) {
        RectF rect1 = new RectF(fingerX - width / 2, fingerY - height / 2, fingerX + width / 2, fingerY + height / 2);
        canvas.drawRoundRect(rect1, oriR, oriR, snotPaint);
        float dX = (textPaint.measureText(text) / 2);
        float dY = -((textPaint.descent() + textPaint.ascent()) / 2);
        canvas.drawText(text, fingerX - dX, fingerY + dY, textPaint);
    }

    /**
     * 画出移动状态的原始的圆形 和中间的鼻涕
     * 
     * @param canvas
     */
    private void drawNowOriCircleAndSnot(Canvas canvas) {
        dist = getDistance(fingerX, fingerY, oriX, oriY);
        if (dist <= MAX_DISTANCE && !hasCut) {
            double factor = dist / MAX_DISTANCE;
            newR = oriRMax - (oriRMax - oriRMin) * factor;
            canvas.drawCircle(oriX, oriY, (float) newR, snotPaint);
            drawSide(canvas);
        }
    }

    /**
     * 绘制两边略带弧度的线 即手指按点和原位置之间‘粘稠’的部分
     * 
     * @param canvas
     */
    private void drawSide(Canvas canvas) {
        double cos = getCons(fingerX, fingerY, oriX, oriY);
        double sin = Math.sqrt(1 - cos * cos);
        double dX1 = newR * cos;
        double dY1 = newR * sin;
        double dX2 = fingerR * cos;
        double dY2 = fingerR * sin;
        Point[] p = new Point[2];
        Point[] p2 = new Point[2];

        Point[] c = new Point[2];
        c[0] = new Point((fingerX + oriX) / 2, (fingerY + oriY) / 2);
        c[1] = c[0];
        if ((fingerY >= oriY && fingerX <= oriX) || (fingerY <= oriY && fingerX >= oriX)) {
            p[0] = new Point(oriX + dX1, oriY + dY1);
            p[1] = new Point(oriX - dX1, oriY - dY1);

            p2[0] = new Point(fingerX + dX2, fingerY + dY2);
            p2[1] = new Point(fingerX - dX2, fingerY - dY2);

        } else if (fingerY >= oriY && fingerX >= oriX || (fingerY <= oriY && fingerX <= oriX)) {

            p[0] = new Point(oriX - dX1, oriY + dY1);
            p[1] = new Point(oriX + dX1, oriY - dY1);

            p2[0] = new Point(fingerX - dX2, fingerY + dY2);
            p2[1] = new Point(fingerX + dX2, fingerY - dY2);
        }
        drawStickyShape(canvas, p, p2, c);
    }

    /**
     * 贝塞尔曲线围起来的梯形
     */
    public void drawStickyShape(Canvas canvas, Point[] p, Point[] p2, Point[] c) {
        Path path = new Path();
        path.moveTo((float) p[0].x, (float) p[0].y);
        path.quadTo((float) c[0].x, (float) c[0].y, (float) p2[0].x, (float) p2[0].y);
        path.lineTo((float) p2[1].x, (float) p2[1].y);
        path.quadTo((float) c[1].x, (float) c[1].y, (float) p[1].x, (float) p[1].y);
        path.lineTo((float) p[0].x, (float) p[0].y);
        canvas.drawPath(path, snotPaint);
    }

事件的处理因为事件的来源不是SnotView本身,自然就不能在onTouchEvent方法里写。以下这个方法处理来自activity的dispatchTouchEvent事件

public synchronized void handlerTvTouchEvent2(MotionEvent event, View v, int exHeight) {
        float x = event.getX();
        float y = event.getY();

        this.fingerX = x;
        this.fingerY = y - exHeight;
        this.v = v;
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            setProperty((TextView) v, exHeight);
            setVisibility(View.VISIBLE);
            break;
        case MotionEvent.ACTION_UP:
            handleFingerUp();
            break;
        case MotionEvent.ACTION_MOVE:
            doWhenFingerMove();
            break;
        }
    }

下边讲讲手指抬起的时候回弹动画的处理,看qq的效果我首先想到的是使用属性动画,有一个overShoot的效果,但是那个回弹的次数比qq我们要的效果少一次,于是我们自定义一个插值器来实现这种效果。

/**
     * 
     * @Description 回弹
     */
    private void kickback() {
        recordX = fingerX;
        recordY = fingerY;
        ValueAnimator backAnimator = ValueAnimator.ofFloat((float) dist, 0);
        OvershootInterpolator inter = new MyQQDragInterprator();
        // changeTension(inter, 4);
        backAnimator.setInterpolator(inter);
        backAnimator.setDuration(KICK_BACK_DURATION);
        backAnimator.addUpdateListener(new AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                doWhenKickback(animation);
            }
        });
        backAnimator.addListener(new AnimatorListener() {

            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                setVisibility(View.GONE);
                if (callback != null)
                    callback.onFree();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }
        });
        backAnimator.start();
    }

    protected void doWhenKickback(ValueAnimator animation) {
        float value = Float.parseFloat(animation.getAnimatedValue().toString());//
        final double cos = getCons(fingerX, fingerY, oriX, oriY);
        final double sin = Math.sqrt(1 - cos * cos);
        if (recordX >= oriX && recordY >= oriY) {
            fingerX = (float) (oriX + value * sin);
            fingerY = (float) (oriY + value * cos);
        } else if (recordX < oriX && recordY > oriY) {
            fingerX = (float) (oriX - value * sin);
            fingerY = (float) (oriY + value * cos);
        } else if (recordX > oriX && recordY < oriY) {
            fingerX = (float) (oriX + value * sin);
            fingerY = (float) (oriY - value * cos);
        } else {
            fingerX = (float) (oriX - value * sin);
            fingerY = (float) (oriY - value * cos);
        }
        postInvalidate();
    }

    /**
     * @Description: 回弹的时候的差值器
     * @author monkey-d-wood
     */
    private class MyQQDragInterprator extends OvershootInterpolator {
        @Override
        public float getInterpolation(float t) {
            t -= 1.0f;
            float answer1 = (float) Math.sin(Math.PI * 5 / 2 * t) * t;
            return 1 - answer1;
        }
    }

下边讲讲activity中需要做的处理,在布局文件中加入我们的自定义view并让其占满整个布局,并让其隐藏

    <com.sovnem.qqbardrag.SnotView
        android:id="@+id/snotview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#efefef"
        android:visibility="gone" />

在dispatchTouchEvent方法中处理手指事件。

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        getHeights();
        tView.getLocationInWindow(location);
        float x = ev.getX();
        float y = ev.getY();
        if (ev.getAction() == MotionEvent.ACTION_DOWN && x > location[0] && x < location[0] + tView.getWidth() && y > location[1] && y < location[1] + tView.getHeight()) {
            isIn = true;
        }
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            isIn = false;
            touchView.handlerTvTouchEvent2(ev, tView, exHeight);
        }
        if (isIn) {
            touchView.handlerTvTouchEvent2(ev, tView, exHeight);
            return true;
        }

        return super.dispatchTouchEvent(ev);
    }

如果是在布局中使用了Listview,在dispatchTouchEvent中需要一一判断手指触摸的到底是哪个view。如何拿到这些view?在adapter的getView方法中,将这些Textview加一个标记(Tag),监听listview的OnScroll事件,获取当前页面所有可见的item索引,通过索引和tag的一一对应关系,通过索引找到Textview,在做手指触点的判断处理。

@Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        firstVisiable = firstVisibleItem;
        visiableCout = visibleItemCount;
    }

总结

其实后来发现跟qq的拖动还是有一些差别的,也可能会有些bug,所以这个东西离实际使用还有一些差距。这篇博客目的是给出一个实现的思路,文中有纰漏和错误还望指正,上边没讲到的细节可以在随后的demo中查看。
如果这篇博客激发了你的某些灵感或解决了你的某些困惑,那我深感荣幸。

demo地址http://download.csdn.net/detail/u012293381/8933109

版权声明:本文为博主原创文章,未经博主允许不得转载。

高仿qq‘一键下班’—让你的view‘黏’起来

标签:自定义控件   高仿qq   

原文地址:http://blog.csdn.net/u012293381/article/details/47059737

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!