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