《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();
    }
});