DraggableFlagView(自改版)的使用

DraggableFlagView(自改版)的使用

原版DraggableFlagView项目地址:https://github.com/wangjiegulu/DraggableFlagView

前言

本帖为原创帖,转载请注明出处.
这是我第一次写博客,目的是分享对第三方开源框架DraggableFlagView的使用,大神请绕路~
如果内容侵犯原作者的权利请联系我删帖,qq:1182564123.

正文

先说一下DraggableFlagView和BezierDemo的优缺点(个人见解).
DraggableFlagView:
    优点:效果做的比较好,特别是不想气泡消失还可以拉回原处,有反弹动画.
    缺点:没有气泡消失的动画,原作者项目里没有提供工具类.
BezierDemo:
    优点:有气泡消失动画,效果也还不错.
    缺点:气泡拉出只能消失,不能拉回原处.

    所以我的目的就是把DraggableFlagView加上气泡消失动画,想了各种方法,本来想在DraggableFlagView.java里面加入消失动画的,
    但是因为设置`this.setVisibility(GONE);`会让这个控件看不见,那样我要的气泡消失动画也不能正常显示出来.
    现在还想不到有什么方法能写在里面,有方法的写在评论那,求教.

下面贴代码:

build.gradle

compile 'com.nineoldandroids:library:2.4.0'

记得要添加依赖,使用DraggableFlagView需要nineoldandroids的支持,DraggableFlagView这个可以下载我改过的

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00000000"
    tools:context="cn.itcast.test.MainActivity">


    <TextView
        android:id="@+id/tv_show"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:drawableTop="@mipmap/ic_launcher"
        android:gravity="center"
        android:text="我的"
        android:textSize="20sp" />

    <cn.itcast.testapplication.DraggableFlagView
        android:id="@+id/draggableflagview"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_alignTop="@+id/tv_show"
        android:layout_marginLeft="-20dp"
        android:layout_toRightOf="@+id/tv_show" />

</RelativeLayout>

注意DraggableFlagView的外层是全屏的Relative布局,`android:layout_marginLeft="-20dp"`负数的属性用来设置view之间重叠在一起.

tip_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item
        android:drawable="@mipmap/idp"
        android:duration="200" />
    <item
        android:drawable="@mipmap/idq"
        android:duration="200" />
    <item
        android:drawable="@mipmap/idr"
        android:duration="200" />
    <item
        android:drawable="@mipmap/ids"
        android:duration="200" />
    <item
        android:drawable="@mipmap/idt"
        android:duration="200" />
    <item
        android:drawable="@android:color/transparent"
        android:duration="200" />
</animation-list>

动画文件,用于逐帧动画,`duration="200"`这个间隔时间可以适当调一下,动画素材在我分享的项目那.

MainActivity.java

package cn.itcast.test;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.Window;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import cn.itcast.test.util.ToastUtil;

public class MainActivity extends Activity {
    private DraggableFlagView draggableFlagView;
    private RelativeLayout activity_main;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();

        draggableFlagView.setText("99+");
        draggableFlagView.setOnDraggableFlagViewListener(new DraggableFlagView.OnDraggableFlagViewListener() {
            @Override
            public void onFlagDismiss(DraggableFlagView view, float x, float y) {
                playImageDismissAnim(x, y);
                ToastUtil.showToast(MainActivity.this, "finished");
            }
        });
    }

    /**
     * 播放气泡消失动画
     *
     * @param x 气泡的x坐标
     * @param y 气泡的y坐标
     */
    private void playImageDismissAnim(float x, float y) {
        ImageView img_dismiss = new ImageView(MainActivity.this);
        img_dismiss.setImageResource(R.drawable.tip_anim);
        img_dismiss.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                RelativeLayout.LayoutParams.WRAP_CONTENT));
        img_dismiss.setX(x);
        img_dismiss.setY(y);
        activity_main.addView(img_dismiss);
        //播放气泡消失动画
        ((AnimationDrawable) img_dismiss.getDrawable()).start();
    }

    private void initView() {
        activity_main = (RelativeLayout) findViewById(R.id.activity_main);
        draggableFlagView = (DraggableFlagView) findViewById(R.id.draggableflagview);
    }
}

`OnDraggableFlagViewListener()`是DraggableFlagView的回调方法,当气泡消失的时候调用,我在这方法实现播放气泡消失功能.
动画代码就不解释了,这个不难.

DraggableFlagView的源码太长,我就不贴完整代码了,我就声明一下我改动的地方.

public class DraggableFlagView extends FrameLayout {}

这里我把继承View改成了FrameLayout,因为不改成继承帧布局的话,红色气泡会显示在activity_main.xml里面常规控件的底层,
一般来说气泡是显示在最上层的,所以改成了FrameLayout.

private int viewWidth, viewHeight;  //控件的宽高

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewWidth = getWidth();
        viewHeight = getHeight();
    }

自定义了两个变量记录控件的宽高,用于调整气泡消失动画的位置.

// 设置绘制flag的paint
        paint = new Paint();
        paint.setColor(patientColor);
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);

增加防抖动功能,画笔改成圆笔实心.

startCircleY = startPoint.y - originRadius;

原作者那个原始点偏低了,这里调整了一下.

invalidate();

把原始的postInvalidate()改成了invalidate(),居我所知,postInvalidate是用在多线程里面的,用来通知onDraw()更新UI,
感觉还是规范点好,所以改了(虽然改了没看到区别,哈哈).

if (null != onDraggableFlagViewListener) {
                        onDraggableFlagViewListener.onFlagDismiss(this,
                                event.getX() - viewWidth, event.getY() - viewHeight);
                                }

这个才是重点,修改了原来的`onDraggableFlagViewListener()`传入参数,把播放气泡消失动画的位置回调过去给MainActivity.

其实对原项目也没什么多大改动,最主要的就是在DraggableFlagView提供的回调方法里面播放气泡消失的动画.

还有两个工具类,我就不贴代码了,在网上很容易能够搜到里面的代码,或者下载我分享的项目看看^_^

其实我觉得我的方法也不是很好,肯定会有在自定义组件里面修改的方法,希望大神指点一二.

demo动画:

我写的Demo:DraggableFlagViewDemo.zip