Android custom circle button click progress animation, android custom

Android custom circle button click progress animation, android custom

A month ago when I went to the interview, I was asked a similar question, at that time did not answer up, a home to find the information: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0325/1603.html,
Based on the above link, I modified the result for half an hour and then achieved a rough effect. For example, it is not very good. Sorry ~

It is divided into four parts:
There is a gray hollow stroke circle at the bottom, a text in the middle, and a half circle at the two sides for upward animation;

Code:

Public class CircleBarTwoSider extends View {private RectF mColorWheelRectangle = new RectF (); // private Paint mDefaultWheelPaint; // Paint the Paint brush private mColorWheelPaintLeft in the gray circle at the bottom; // draw the private Paint mColorWheelPaintRight on the left of the blue-slice Paint brush; // draw the private Paint textPaint on the right of the blue-slice Paint brush; // The brush private float mColorWheelRadius of the intermediate text; // The radius private float circleStrokeWidth in the normal circle state; // The line width of the circle private float press ExtraStrokeWidth; // The width of the private String mText that is added to the Circle Line in the pressed state; // the content of the intermediate text is private int mCount; // The variable added to increase the number, he and mText actually represent a meaning private float mSweepAnglePer; // The variable added to achieve the effect of adding a blue slice. He and mSweepAngle actually represent a meaning private float mSweepAngle; // sector radian private int mTextSize; // text color BarAnimation anim; // animation class private int TIME = 300; public CircleBarTwoSider (Context context) {super (context); init (null, 0);} public CircleBarT WoSider (Context context, AttributeSet attrs) {super (context, attrs); init (attrs, 0);} public CircleBarTwoSider (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); init (attrs, defStyle);} private void init (AttributeSet attrs, int defStyle) {circleStrokeWidth = MyUtils. dip2px (getContext (), 10); pressExtraStrokeWidth = MyUtils. dip2px (getContext (), 2); mTextSize = MyUtils. dip2px (getContext (), 20); mColorWheelPaintRight = new Paint (Paint. ANTI_ALIAS_FLAG); mColorWheelPaintRight. setColor (0xFF29a6f6); mColorWheelPaintRight. setStyle (Paint. style. STROKE); mColorWheelPaintRight. setStrokeMiter (0); // mColorWheelPaintRight. setStrokeCap (Paint. cap. ROUND); // enable the circle mColorWheelPaintRight to show the edge. setStrokeWidth (circleStrokeWidth); mColorWheelPaintLeft = new Paint (Paint. ANTI_ALI AS_FLAG); mColorWheelPaintLeft. setColor (0xFF29a6f6); mColorWheelPaintLeft. setStyle (Paint. style. STROKE); mColorWheelPaintLeft. setStrokeMiter (0); // mColorWheelPaintLeft. setStrokeCap (Paint. cap. ROUND); // enable the circle mColorWheelPaintLeft to show the edge. setStrokeWidth (circleStrokeWidth); mDefaultWheelPaint = new Paint (Paint. ANTI_ALIAS_FLAG); mDefaultWheelPaint. setColor (0 xFFeeefef); mDefaultWheelPaint. setStyle (Paint. style. STROKE); mDefaultWheelPaint. setStrokeWidth (circleStrokeWidth); textPaint = new Paint (Paint. ANTI_ALIAS_FLAG | Paint. LINEAR_TEXT_FLAG); textPaint. setColor (0xFF333333); textPaint. setStyle (Style. FILL_AND_STROKE); textPaint. setTextAlign (Align. LEFT); textPaint. setTextSize (mTextSize); mText = "0"; mSweepAngle = 1; anim = new BarAnimation (); anim. setDuration (TIME); // set animation frequency} @ Override protected void onDr Aw (Canvas canvas) {// TODO Auto-generated method stub super. onDraw (canvas); canvas. drawArc (mColorWheelRectangle,-90,360, false, mDefaultWheelPaint); canvas. drawArc (mColorWheelRectangle, 90, mSweepAnglePer, false, mColorWheelPaintRight); canvas. drawArc (mColorWheelRectangle, 90,-mSweepAnglePer, false, mColorWheelPaintLeft); Rect bounds = new Rect (); String textstr = "can be bought:" + mCount + ""; textPaint. get TextBounds (textstr, 0, textstr. length (), bounds); canvas. drawText (textstr + "", (mColorWheelRectangle. centerX ()-(textPaint. measureText (textstr)/2), mColorWheelRectangle. centerY () + bounds. height ()/2, textPaint);} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stub int height = getDefaultSize (rows (), heightMe AsureSpec); int width = getDefaultSize (getSuggestedMinimumWidth (), widthMeasureSpec); int min = Math. min (width, height); setMeasuredDimension (min, min); mColorWheelRadius = min-circleStrokeWidth-pressExtraStrokeWidth; mColorWheelRectangle. set (circleStrokeWidth + pressExtraStrokeWidth, circleStrokeWidth + pressExtraStrokeWidth, mColorWheelRadius, mColorWheelRadius);} @ Override public void setPress Ed (boolean pressed) {// TODO Auto-generated method stub Log. I ("hloong", "call setPressed"); if (pressed) {mColorWheelPaintLeft. setColor (0xFF165da6); mColorWheelPaintRight. setColor (0xFF165da6); textPaint. setColor (0xFF070707); mColorWheelPaintLeft. setStrokeWidth (circleStrokeWidth + pressExtraStrokeWidth); mColorWheelPaintRight. setStrokeWidth (circleStrokeWidth + pressExtraStrokeWidth); mDefaultWheelPai Nt. setStrokeWidth (circleStrokeWidth + pressExtraStrokeWidth); textPaint. setTextSize (mTextSize-pressExtraStrokeWidth);} else {mColorWheelPaintLeft. setColor (0xFF29a6f6); mColorWheelPaintRight. setColor (0xFF29a6f6); textPaint. setColor (0xFF333333); mColorWheelPaintLeft. setStrokeWidth (circleStrokeWidth); mColorWheelPaintRight. setStrokeWidth (circleStrokeWidth); mDefaultWheelPaint. setStrokeWidth (circleStr OkeWidth); textPaint. setTextSize (mTextSize);} super. setPressed (pressed); this. invalidate ();} public void startCustomAnimation () {this. startAnimation (anim);} public void setText (String text) {mText = text; this. startAnimation (anim);} public void setSweepAngle (float sweepAngle) {mSweepAngle = sweepAngle;}/*** animation * @ author long * 2:11:22 */public class BarAnimation extends Animatio N {/*** Initializes expand collapse animation, has two types, collapse (1) and expand (0 ). * @ param view The view to animate * @ param type The type of animation: 0 will expand from gone and 0 size to visible and layout size defined in xml. * 1 will collapse view and set to gone * the animation class utilizes the variation characteristics of the interpolatedTime parameter (from 0 to 1) in applyTransformation, * The attribute of a View changes over time. The principle is that every time the system calls the animation applyTransformation () method, * changes the value of mSweepAnglePer and mCount, * then calls postInvalidate () to draw the view continuously. */Public BarAnimation () {}@ Override protected void applyTransformation (float interpolatedTime, Transformation t) {super. applyTransformation (interpolatedTime, t); // mSweepAnglePer and mCount are only temporary attributes used in the animation process, // mText and mSweepAngle are the true values of slice radians and intermediate values after the animation ends. If (interpolatedTime <1.0f) {mSweepAnglePer = interpolatedTime * mSweepAngle; mCount = (int) (interpolatedTime * Float. parseFloat (mText);} else {mSweepAnglePer = mSweepAngle; mCount = Integer. parseInt (mText) ;}postinvalidate ();}}}

Activity Code:

Public class MainActivity extends Activity {private CircleBarTwoSider circleBar; private CircleBar circleBar2; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); circleBar = (CircleBarTwoSider) findViewById (R. id. circle); circleBar. setSweepAngle (120); // sets the angle circleBar. setText ("27000"); circleBar. setOnClickListener (new OnClickListener () {@ Override public void onClick (View view) {circleBar. startCustomAnimation () ;}}); circleBar2 = (CircleBar) findViewById (R. id. circle2); circleBar2.setSweepAngle (120); circleBar2.setText ("500"); circleBar2.setOnClickListener (new OnClickListener () {@ Override public void onClick (View view) {circleBar2.startCustomAnimation ();}});}}

Project: https://github.com/hloong/CricleBarDemo