DraggableFlagView

介绍:

可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果),拖拽一定的距离可以消失回调。

运行效果:

使用说明:

实现原理:

当根据touch事件的移动,不断调用onDraw()方法进行刷新绘制。

*注意:这里原来的小红点称为红点A;根据手指移动绘制的小红点称为红点B。

touch事件移动的时候需要处理的逻辑:

1. 红点A的半径根据滑动的距离会不断地变小。

2. 红点B会紧随手指的位置移动。

3. 在红点A和红点B之间需要用贝塞尔曲线绘制连接区域。

4. 如果红点A和红点B之间的间距达到了设置的最大的距离,则表示,这次的拖拽会有效,一旦放手红点就会消失。

5. 如果达到了第4中情况,则红点A和中间连接的贝塞尔曲线不会被绘制。

6. 如果红点A和红点B之间的距离没有达到设置的最大的距离,则放手后,红点B消失,红点A从原来变小的半径使用反弹动画变换到原来最初的状态

main.xml

    <com.wangjie.draggableflagview.DraggableFlagView
                xmlns:dfv="http://schemas.android.com/apk/res/com.wangjie.draggableflagview"
                android:id="@+id/main_dfv"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentBottom="true"
                android:layout_margin="15dp"
                dfv:color="#FF3B30"
                />

MainActivity:

    public class MainActivity extends Activity implements DraggableFlagView.OnDraggableFlagViewListener, View.OnClickListener {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            findViewById(R.id.main_btn).setOnClickListener(this);
            DraggableFlagView draggableFlagView = (DraggableFlagView) findViewById(R.id.main_dfv);
            draggableFlagView.setOnDraggableFlagViewListener(this);
            draggableFlagView.setText("7");
        }
        @Override
        public void onFlagDismiss(DraggableFlagView view) {
            Toast.makeText(this, "onFlagDismiss", Toast.LENGTH_SHORT).show();
        }
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.main_btn:
                    Toast.makeText(this, "hello world", Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    }
已下载
0