Custom Control-CheckBox with animation

Custom Control-CheckBox with animation

CheckBox status: Checked, UnChecked

Animation analysis:

1. UnChecked --> Checked, the circle is increased from small to large (simple and easy to implement), and then an animation of the right sign (how to draw the right sign after analysis)

2. Checked --> UnChecked: displays the animation of the disappearance of the right sign, and then the circle is changed from large to small (easy to implement)

Bytes ---------------------------------------------------------------------------------------------------------

Analysis of the position of the mark drawn

 

Then, we will draw an animated Analysis of the right number.

The key analysis lies in tracing and the code

 

/** 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 License t 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 distrib Uted 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. g Raphics. 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; // radius of the circle private int width, height; // control width and height private int cx, cy; // Center xy coordinate private float [] points = new float [6]; // coordinate 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, defStyle Res);}/*** initialize * @ 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 ();}}});} /*** set the current selected status * @ param checked */public void setChecked (boolean checked) {if (isChecked &&! Checked) {hideCorrect ();} else if (! IsChecked & checked) {showCheck () ;}/ *** returns the selected status * @ return */public boolean isChecked () {return isChecked ;} /*** determine the dimensional coordinates * @ 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 ()-getPaddingTo P (); 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 Canvas) {float f = (radius-hei Ght * 0.125f)/(height * 0.5f); // current progress mCirclePaint. setColor (evaluate (f, unCheckColor, circleColor); canvas. drawCircle (cx, cy, radius, mCirclePaint); // draw a circle // draw a pair 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 );}}} /*** set the circle color * @ param color */public void setCircleColor (int color) {circleColor = color;}/*** set the color of the check mark * @ param col Or */public void setCorrectColor (int color) {mCorrectPaint. setColor (color);}/*** set the color when not selected * @ 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 = s TartInt & 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 ))));} /*** process the trigger Touch event trigger animation * // * 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) {// trigger toggle = true when the slider is halfway through;} 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 (ValueAnimat Or 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 onAnimationUp Date (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);}/*** convert the unit from dp to px (pixel) based on the resolution of the mobile phone) */public static int dip2px (Context context, float dpValue) {final float scale = context. getResources (). getDisplayMetrics (). density; return (int) (dpValue * scale + 0.5f);}/*** based on the resolution of the phone) to dp */public static int px2dip (Context context, float pxValue) {final float scale = context. getResources (). getDisplayMetrics (). density; return (int) (pxValue/scale + 0.5f );}}