自定义控件--带动画的CheckBox

淩亂°似流年 2022-08-08 11:53 195阅读 0赞

**效果图**

**![20150516001002925][]**

CheckBox状态：  Checked , UnChecked

**动画分析：**

**1.UnChecked --> Checked ， 圆由小变大（简单易实现），然后是对号的动画（后面分析怎么画对号）**

**2.Checked --> UnChecked ， 显示对号消失动画，然后圆由大变小（简单易实现）**

**---------------------------------------------------------------------------------------------------------**

**画的对号的位置分析**

**![SouthEast][]**

**然后是画对号的动画分析**

**![SouthEast 1][]**

**关键分析在图里，上代码**

/*
     * Created by Hanks
     * Copyright (c) 2015 . All rights reserved
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     *    http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */
    package rxandroid.zyh.com.rxandroid.custom;
    
    import android.animation.ValueAnimator;
    import android.annotation.TargetApi;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.os.Build;
    import android.util.AttributeSet;
    import android.view.View;
    import android.view.animation.LinearInterpolator;
    
    /**
     * Created by Administrator on 2015/5/14.
     */
    public class TouchCheckBox extends View {
    
        private Paint mCirclePaint;
        private Paint mCorrectPaint;
        private int radius;                    //圆的半径
        private int width, height;             //控件宽高
        private int cx, cy;                    //圆心xy坐标
        private float[] points = new float[6]; //对号的3个点的坐标
        private float correctProgress;
        private float downY;
        private boolean isChecked;
        private boolean toggle;
        private boolean isAnim;
        private int animDurtion = 150;
    
        private OnCheckedChangeListener listener;
        private int unCheckColor = Color.GRAY;
        private int circleColor = Color.RED;
    
        public TouchCheckBox(Context context) {
            this(context, null);
        }
    
        public TouchCheckBox(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public TouchCheckBox(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(context);
    
        }
    
        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        public TouchCheckBox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }
    
    
        /**
         * 初始化
         * @param context
         */
        private void init(Context context) {
    
            mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCirclePaint.setColor(Color.RED);
            mCirclePaint.setStyle(Paint.Style.FILL);
    
            mCorrectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCorrectPaint.setColor(Color.WHITE);
            mCorrectPaint.setStyle(Paint.Style.FILL);
            mCorrectPaint.setStrokeWidth(dip2px(context, 2));
            setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (isChecked) {
                        hideCorrect();
                    } else {
                        showCheck();
                    }
                }
            });
        }
    
        /**
         * 设置当前选中状态
         * @param checked
         */
        public void setChecked(boolean checked){
            if (isChecked && !checked) {
                hideCorrect();
            } else if(!isChecked && checked) {
                showCheck();
            }
        }
    
        /**
         * 返回当前选中状态
         * @return
         */
        public boolean isChecked(){
            return isChecked;
        }
    
        /**
         * 确定尺寸坐标
         * @param w
         * @param h
         * @param oldw
         * @param oldh
         */
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            height = width = Math.min(w - getPaddingLeft() - getPaddingRight(),h - getPaddingBottom() - getPaddingTop());
            cx = w / 2;
            cy = h / 2;
    
            float r = height / 2f;
            points[0] = r / 2f + getPaddingLeft();
            points[1] = r + getPaddingTop();
    
            points[2] = r * 5f / 6f + getPaddingLeft();
            points[3] = r + r / 3f + getPaddingTop();
    
            points[4] = r * 1.5f +getPaddingLeft();
            points[5] = r - r / 3f + getPaddingTop();
            radius = (int) (height * 0.125f);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            
            float f = (radius -height * 0.125f) / (height * 0.5f); //当前进度
            mCirclePaint.setColor(evaluate(f,unCheckColor,circleColor));
            canvas.drawCircle(cx, cy, radius, mCirclePaint); //画圆
    
            //画对号
            if(correctProgress>0) {
                if(correctProgress<1/3f) {
                    float x = points[0] + (points[2] - points[0]) * correctProgress;
                    float y = points[1] + (points[3] - points[1]) * correctProgress;
                    canvas.drawLine(points[0], points[1], x, y, mCorrectPaint);
                }else {
                    float x = points[2] + (points[4] - points[2]) * correctProgress;
                    float y = points[3] + (points[5] - points[3]) * correctProgress;
                    canvas.drawLine(points[0], points[1], points[2], points[3], mCorrectPaint);
                    canvas.drawLine(points[2], points[3], x,y, mCorrectPaint);
                }
            }
        }
    
    
        /**
         * 设置圆的颜色
         * @param color
         */
        public void setCircleColor(int color){
            circleColor = color;
        }
    
        /**
         * 设置对号的颜色
         * @param color
         */
        public void setCorrectColor(int color){
            mCorrectPaint.setColor(color);
        }
    
        /**
         * 设置未选中时的颜色
         * @param color
         */
        public void setUnCheckColor(int color){
            unCheckColor = color;
        }
    
        private int evaluate(float fraction, int startValue, int endValue) {
            int startInt = startValue;
            int startA = (startInt >> 24) & 0xff;
            int startR = (startInt >> 16) & 0xff;
            int startG = (startInt >> 8) & 0xff;
            int startB = startInt & 0xff;
    
            int endInt = endValue;
            int endA = (endInt >> 24) & 0xff;
            int endR = (endInt >> 16) & 0xff;
            int endG = (endInt >> 8) & 0xff;
            int endB = endInt & 0xff;
    
            return ((startA + (int) (fraction * (endA - startA))) << 24)
                    | ((startR + (int) (fraction * (endR - startR))) << 16)
                    | ((startG + (int) (fraction * (endG - startG))) << 8)
                    | ((startB + (int) (fraction * (endB - startB))));
        }
    
        /**
         * 处理触摸事件触发动画
         */
        /*private class OnChangeStatusListener implements OnTouchListener {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                Log.i("Touch","Touch");
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        downY = event.getRawY();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        float dy = event.getRawY() - downY;
                        if (Math.abs(dy) >= 0) { //滑过一半触发
                            toggle = true;
                        } else {
                            toggle = false;
                        }
                        break;
                    case MotionEvent.ACTION_CANCEL:
                    case MotionEvent.ACTION_UP:
                        if (toggle) {
                            if (isChecked) {
                                hideCorrect();
                            } else {
                                showCheck();
                            }
                        }
                        break;
                }
                return true;
            }
        }*/
    
        private void showUnChecked() {
            if (isAnim) {
                return;
            }
    
            isAnim = true;
            ValueAnimator va = ValueAnimator.ofFloat(0, 1).setDuration(animDurtion);
            va.setInterpolator(new LinearInterpolator());
            va.start();
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue(); // 0f ~ 1f
                    radius = (int) ((1 - value) * height * 0.375f + height * 0.125f);
                    if (value >= 1) {
                        isChecked = false;
                        isAnim = false;
                        if(listener!=null){
                            listener.onCheckedChanged(TouchCheckBox.this,false);
                        }
                    }
                    invalidate();
                }
            });
        }
    
        private void showCheck() {
            if (isAnim) {
                return;
            }
            isAnim = true;
            ValueAnimator va = ValueAnimator.ofFloat(0, 1).setDuration(animDurtion);
            va.setInterpolator(new LinearInterpolator());
            va.start();
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue(); // 0f ~ 1f
                    radius = (int) (value * height * 0.37f + height * 0.125f);
                    if (value >= 1) {
                        isChecked = true;
                        isAnim = false;
                        if(listener!=null){
                            listener.onCheckedChanged(TouchCheckBox.this,true);
                        }
                        showCorrect();
                    }
                    invalidate();
                }
            });
        }
    
        private void showCorrect() {
            if (isAnim) {
                return;
            }
            isAnim = true;
            ValueAnimator va = ValueAnimator.ofFloat(0, 1).setDuration(animDurtion);
            va.setInterpolator(new LinearInterpolator());
            va.start();
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue(); // 0f ~ 1f
                    correctProgress = value;
                    invalidate();
                    if(value>=1){
                        isAnim = false;
                    }
                }
            });
        }
        private void hideCorrect() {
            if (isAnim) {
                return;
            }
            isAnim = true;
            ValueAnimator va = ValueAnimator.ofFloat(0, 1).setDuration(animDurtion);
            va.setInterpolator(new LinearInterpolator());
            va.start();
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue(); // 0f ~ 1f
                    correctProgress = 1-value;
                    invalidate();
                    if(value>=1){
                        isAnim = false;
                        showUnChecked();
                    }
                }
            });
        }
        public void setOnCheckedChangeListener(OnCheckedChangeListener listener){
            this.listener = listener;
        }
        public interface OnCheckedChangeListener{
            void onCheckedChanged(View buttonView, boolean isChecked);
        }
    
        /**
         * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
         */
        public static int dip2px(Context context, float dpValue) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (dpValue * scale + 0.5f);
        }
    
        /**
         * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
         */
        public static int px2dip(Context context, float pxValue) {
            final float scale = context.getResources().getDisplayMetrics().density;
            return (int) (pxValue / scale + 0.5f);
        }
    }

源码： [https://github.com/hanks-zyh/AnimateCheckBox][https_github.com_hanks-zyh_AnimateCheckBox]

[20150516001002925]: /images/20220805/20e9707cca8e49d5b3f271f210970b2e.png
[SouthEast]: /images/20220805/0baf0ef7a0594287aebc706cf8438f07.png
[SouthEast 1]: /images/20220805/60e5a5cd5f5444cab60b9f0c82ac5c0c.png
[https_github.com_hanks-zyh_AnimateCheckBox]: https://github.com/hanks-zyh/AnimateCheckBox