《Android 自定义控件：选中状态的自定义动画按钮》

一、先看简单效果，制作GIF图太麻烦，现在直接贴图，然后说明效果。

效果：

1. 当点击按钮的时候，完成一个被点击的动画效果；

2. 动画效果一次是：圆-->勾。

 

二、分析

1. 要完成这个功能，肯定需要我们自定义控件；

2. 这是一个图象，我们肯定要画出来。那么安装常规，我们应该会先画圆，然后划勾，勾又需要分成两端，先由西北向东南画，然后由西南向东北画。

3. 动画效果，10毫秒刷新一次控件；

 

三、代码

1.自定义的View:

public class DrawHookView extends View {

    //绘制圆弧的进度值
    private int progress = 0;
    //线1的x轴
    private int line1_x = 0;
    //线1的y轴
    private int line1_y = 0;
    //线2的x轴
    private int line2_x = 0;
    //线2的y轴
    private int line2_y = 0;

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

    public DrawHookView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DrawHookView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void redraw() {
        progress = 0;
        line1_x = 0;
        line1_y = 0;
        line2_x = 0;
        line2_y = 0;
        invalidate();
    }
    //绘制


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        progress++;
        //绘制圆弧
        Paint paint = new Paint();
        //设置画笔颜色
        paint.setColor(getResources().getColor(R.color.arc_blue));
        //设置圆弧的宽度
        paint.setStrokeWidth(5);
        //设置圆弧为空心
        paint.setStyle(Paint.Style.STROKE);
        //消除锯齿
        paint.setAntiAlias(true);

        //获取圆心的x坐标
        int center = getWidth() / 2;
        int center1 = center - getWidth() / 5;
        //圆弧半径
        int radius = getWidth() / 2 - 5;

        //定义的圆弧的形状和大小的界限
        RectF rectF = new RectF(center - radius - 1, center - radius - 1, center + radius + 1, center + radius + 1);
        //根据进度画圆弧
        canvas.drawArc(rectF, 235, -360 * progress / 100, false, paint);

        /**
         * 绘制对勾
         */
        //先等圆弧画完，才画对勾
        if (progress >= 100) {
            if (line1_x < radius / 3) {
                line1_x++;
                line1_y++;
            }
            //画第一根线
            canvas.drawLine(center1, center, center1 + line1_x, center + line1_y, paint);

            if (line1_x == radius / 3) {
                line2_x = line1_x;
                line2_y = line1_y;
                line1_x++;
                line1_y++;
            }
            if (line1_x >= radius / 3 && line2_x <= radius) {
                line2_x++;
                line2_y--;
            }
            canvas.drawLine(center1 + line1_x - 1, center + line1_y, center1 + line2_x, center + line2_y, paint);
        }
        //每隔10毫秒界面刷新
        postInvalidateDelayed(3);
    }
}

 2. 布局 xml调用

<com.bql.rvcamp.rvcamp.view.DrawHookView
    android:id="@+id/dhView1"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="30dp"
    android:layout_marginEnd="150dp" />

 

此处需要注意：com.bql.rvcamp.rvcamp.view.DrawHookView这个是根据包名来得，别弄错了。先看看你的报名，然后< + 提示一般都是可以找到这个自定义控件的，千万别直接copy。

3. 最后：点击事件调用

//在初始化的时候可让其先隐藏
dhView1.setVisibility(View.GONE);
iv_yingyin.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //点击之后显示出来
        dhView1.setVisibility(View.VISIBLE);
        //动画
        dhView1.redraw();
    }
});