Android custom circle progress and display percentage example control (implemented in pure code), android percent

Android custom circle progress and display percentage example control (implemented in pure code), android percent
First of all, I would like to thank the company for giving me free time to stabilize my technology and allow me to constantly explore and research. I am very grateful here.
Let's take a look at the effect without talking about the implementation function.
This is a brand new control for the last horizontal color progress bar, theoretical implementation principle
1. Analysis Control: this control is basically a circle embedded circle;

2. Progress calculation: in fact, it is a second-year mathematics problem: current progress/total number = percentage;

3. Intermediate time: Hehe, purely flickering, not explained (current time ).

The gap between theory and practice is always too far, not nonsense, not boast, post code:

Package com. spring. progressview; import java. text. simpleDateFormat; import java. util. date; import android. annotation. suppressLint; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. paint. align; import android. graphics. paint. style; import android. graphics. rect; import android. graphics. rectF; import android. util. attributeSet; import android. view. view;/***** circle progress control * @ author spring sky * Email: vipa1888@163.com *: http://download.csdn.net/detail/vipa1888/7637905 */public class RoundProgressView extends View {/** Color value at the periphery */private int mOutRoundColor = Color. argb (60,255,255,255);/** Color value of the center circle */private int mCenterRoundColor = Color. argb (255,255,255,255);/** progress Color */private int mProgressRoundColor = Color. argb (255,255,255,255);/** progress background Color */private int mProgressRoundBgColor = Color. argb (100,255,255,255);/** progress bar width */private int mProgressWidth = 5; private int [] colors = {Color. WHITE, Color. RED};/*** font Color */private int mTextColor = Color. rgb (118,181, 66); private float mPencentTextSize = 65; private int mWidth, mHeight; private int mPaddingX; private float mProgress = 0.5f; private float mMax = 1.0f; /*** time display format */private SimpleDateFormat mDateFormat = new SimpleDateFormat ("HH: mm: ss. S "); private Paint mPaint = new Paint (); public RoundProgressView (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); init ();} public RoundProgressView (Context context, AttributeSet attrs) {super (context, attrs); init () ;}public RoundProgressView (Context context) {super (context); init ();} public void init () {}@ SuppressLint ("DrawAllocation") @ Overrideprotected void onDraw (Canvas canvas) {super. onDraw (canvas); mWidth = getWidth (); mHeight = getHeight (); if (mWidth> mHeight) {mPaddingX = (mWidth-mHeight)/2; mWidth = mHeight ;} mPaint. setAntiAlias (true); // eliminate the Sawtooth mPaint. setStyle (Style. FILL); mPaint. setColor (mOutRoundColor); RectF oval = new RectF (new Rect (mPaddingX, 0, mWidth + mPaddingX, mHeight); canvas. drawArc (oval, 0,360, true, mPaint); int halfWidth = mWidth/6; mPaint. setColor (mProgressRoundBgColor); mPaint. setStrokeWidth (mProgressWidth); mPaint. setStyle (Style. STROKE); oval = new RectF (new Rect (halfWidth + mPaddingX, halfWidth, halfWidth * 5 + mPaddingX, halfWidth * 5); canvas. drawArc (oval, 0,360, false, mPaint); mPaint. setColor (mProgressRoundColor); canvas. drawArc (oval, 90,360 * mProgress/mMax, false, mPaint); halfWidth = mWidth/4; mPaint. setStyle (Style. FILL); mPaint. setColor (mCenterRoundColor); oval = new RectF (new Rect (halfWidth + mPaddingX, halfWidth, halfWidth * 3 + mPaddingX, halfWidth * 3); canvas. drawArc (oval, 0,360, false, mPaint); mPaint. reset (); mPaint. setTextSize (mPencentTextSize); mPaint. setColor (mTextColor); mPaint. setStyle (Style. FILL); mPaint. setTextAlign (Align. CENTER); String number = (int) (mProgress * 100/mMax) + ""; canvas. drawText (number, mWidth/2 + mPaddingX, mHeight/2 + mPencentTextSize/3, mPaint); float textWidth = mPaint. measureText (number); mPaint. setTextSize (mPencentTextSize/2); canvas. drawText ("%", mWidth/2 + mPaddingX + textWidth/2 + 5, mHeight/2-mPencentTextSize/8, mPaint); mPaint. setTextSize (mPencentTextSize/2); canvas. drawText (mDateFormat. format (new Date (System. currentTimeMillis (), mWidth/2 + mPaddingX, mHeight/2 + halfWidth/4*3, mPaint);} public void setMax (float mMax) {this. mMax = mMax;} public void setProgress (float mProgress) {this. mProgress = mProgress; invalidate ();} public float getMax () {return mMax;} public float getProgress () {return mProgress ;}}

Although there are only less than 200 lines of code, I have to briefly describe some basic functions.
1. Color. argb (60,255,255,255); this is to get a Color and set its transparency. The first parameter is transparency, 0 ~ 255, other RGB, huh, don't explain, do it yourself.
2. The following two methods are very important for the paint brush method.

MPaint. setStyle (Style. STROKE); // This is the original hollow display.

MPaint. setStrokeWidth (mProgressWidth); // This is the width of the hollow outermost layer.
For example, drawArc draws a circle, so we set the above two methods to draw a hollow circle, and the trajectory width of the circle is mProgressWidth.
3. When you draw a circle, you must control the start and end degrees.
4. If you do not understand anything, please learn more about the methods and APIs of Canvas and painting. I am very grateful for this.


I also hope to provide you with some ideas for the purpose of writing this blog. I hope you can share all the good controls. I am very grateful.

All right, there must be a lot of people asking for a Demo after posting the blog. To prevent spider crawlers from being lost, please refer to the notes on the code for the address.
Reprinted please indicate the author Source: Spring sky.

Ask which Daniel knows how the circle around the play button is implemented when playing a sound in the android mi chat. The control is based on the speech loading progress.

Although it is not clear what you want to do, it should not be displayed when you directly jump to the target page in oncreate and call finish. What you need to know. If you have game development experience, move to mobile
 
What is the control that changes between the left and right sides of the android desktop when sliding between the left and right sides? How to implement it? Images are available on both left and right sides.

This is called an indicator designed to mark the number of desktops on the left and right. Now, there are two desktops on the right and right of your desktop, many third-party desktops, for example, you can set whether to display the go desktop and hide it if you do not like it.

The Code is as follows:
Android ViewPagerIndicator
======================================

Paging indicator widgets that are compatible with the 'viewpager' from
[Android Support Library] [2] to improve discoverability of content.

Try out the sample application [on the Android Market] [10].

! [ViewPagerIndicator Sample Screenshots] [9]

These widgets can also be used in conjunction with [ActionBarSherlock] [3]!

Usage
=====

* For a working implementation of this project see the 'sample/'Folder .*

1. Include one of the widgets in your view. This shoshould usually be placed
Adjacent to the 'viewpager' it represents.

<Com. viewpagerindicator. TitlePageIndicator
Android: id = "@ + id/titles"
Android: layout_height = "wrap_content"
Android: layout_width = "fill_parent"/>

2. In your 'oncreate' method (or 'oncreateview' for a fragment), bind
Indicator to the 'viewpager '.

// Set the pager with an adapter
ViewPager pager = (ViewPager) findViewById (R. id. pager );
Pager. setAdapter (new TestAdapter (getSupportFragmentManager ()));

// Bind the title indicator to the adapter
TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById (R. id. titles );
TitleIndicator. setViewPager (pager );

3. * (Optional) * If you use an 'onpagechangelistener 'with your view pager
You shoshould... the remaining full text>