Progress bar for android custom ssview gradient

Recently in the company, the project was not very busy. I occasionally saw a middleware platform asking for help in CSDN. I asked for a custom gradient progress bar. I looked at the progress bar and felt pretty, let's try to implement a custom view. Let's talk nonsense first!


This custom view is completely out of the progress view that comes with android, and does not use an image, which can better reduce the coupling of program code!

I will post the code below to explain the Implementation ideas!

Package com. spring. progressview; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. linearGradient; import android. graphics. matrix; import android. graphics. paint; import android. graphics. rectF; import android. graphics. shader; import android. util. attributeSet; import android. view. view;/*** custom progress bar * @ author spring sky * Email: vipa1888@163.co M * Creation Time: 3:28:51 */public class SpringProgressView extends View {/** segment Color */private static final int [] SECTION_COLORS = {Color. GREEN, Color. YELLOW, Color. RED};/** maximum progress bar */private float maxCount;/** current progress bar value */private float currentCount;/** Paint brush */private Paint mPaint; private int mWidth, mHeight; public SpringProgressView (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defSt YleAttr); initView (context);} public SpringProgressView (Context context, AttributeSet attrs) {super (context, attrs); initView (context);} public SpringProgressView (Context context) {super (context); initView (context);} private void initView (Context context) {}@ Overrideprotected void onDraw (Canvas canvas) {super. onDraw (canvas); mPaint = new Paint (); mPaint. setAntiAlias (true); int round = mHeight/2; System. out. Println ("max =" + maxCount + "current =" + currentCount); mPaint. setColor (Color. rgb (71, 76, 80); RectF rectBg = new RectF (0, 0, mWidth, mHeight); canvas. drawRoundRect (rectBg, round, round, mPaint); mPaint. setColor (Color. BLACK); RectF rectBlackBg = new RectF (2, 2, mWidth-2, mHeight-2); canvas. drawRoundRect (rectBlackBg, round, round, mPaint); float section = currentCount/maxCount; RectF rectProgressBg = new Rec TF (3, 3, (mWidth-3) * section, mHeight-3); if (section <= 1.0f/3.0f) {if (section! = 0.0f) {mPaint. setColor (SECTION_COLORS [0]);} else {mPaint. setColor (Color. TRANSPARENT) ;}} else {int count = (section <= 1.0f/3.0f * 2 )? 2: 3; int [] colors = new int [count]; System. arraycopy (SECTION_COLORS, 0, colors, 0, count); float [] positions = new float [count]; if (count = 2) {positions [0] = 0.0f; positions [1] = 1.0f-positions [0];} else {positions [0] = 0.0f; positions [1] = (maxCount/3)/currentCount; positions [2] = 1.0f-positions [0] * 2;} positions [positions. length-1] = 1.0f; LinearGradient shader = new LinearGradient (3, 3, (mWidth-3) * secti On, mHeight-3, colors, null, Shader. tileMode. MIRROR); mPaint. setShader (shader);} canvas. drawRoundRect (rectProgressBg, round, round, mPaint);} private int dipToPx (int dip) {float scale = getContext (). getResources (). getDisplayMetrics (). density; return (int) (dip * scale + 0.5f * (dip> = 0? 1:-1);}/***** set the maximum progress value * @ param maxCount */public void setMaxCount (float maxCount) {this. maxCount = maxCount;}/***** set the current progress value * @ param currentCount */public void setCurrentCount (float currentCount) {this. currentCount = currentCount> maxCount? MaxCount: currentCount; invalidate ();} public float getMaxCount () {return maxCount;} public float getCurrentCount () {return currentCount;} @ Overrideprotected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {int widthSpecMode = MeasureSpec. getMode (widthMeasureSpec); int widthSpecSize = MeasureSpec. getSize (widthMeasureSpec); int heightSpecMode = MeasureSpec. getMode (heightMeasureSpec); int heightSpecSize = MeasureSpec. getSize (heightMeasureSpec); if (widthSpecMode = MeasureSpec. EXACTLY | widthSpecMode = MeasureSpec. AT_MOST) {mWidth = widthSpecSize;} else {mWidth = 0;} if (heightSpecMode = MeasureSpec. AT_MOST | heightSpecMode = MeasureSpec. UNSPECIFIED) {mHeight = dipToPx (15);} else {mHeight = heightSpecSize;} setMeasuredDimension (mWidth, mHeight );}}

The above code is all the core code of the control.
Specific ideas:
1. The progress bar is actually the ratio of the maximum and minimum values. The ratio is the current value/maximum value;
2. For the custom rounded corner problem, as long as the drawRoundRect of the Canvar canvas is used;
3. gradient color: LinearGradient object rendering. The specific rendering ratio must be calculated by yourself. Currently, my program provides color rendering in 3. The specific rules are as follows:
(1) When the progress bar is less than 1/3 of the maximum value, a color is provided.
(2) When the maximum value exceeds 1/3, it determines whether to exceed 2/3. If the maximum value is exceeded, three colors are used. Otherwise, two colors are used, because each of the three colors occupies 1/3 of the total progress bar, this is a problem with junior high school data. Let's draw a picture by yourself!
4. how to place the progress bar on a background with a rounded corner, which is to draw two rounded rectangles: the first is the background, the second is the object of the progress bar, and how long is the object of the Second Progress, it is the length of the current currentCount/maxCount * Custom View;

Others, there are no technical difficulties. The most important thing to do with this custom control is to understand the Implementation ideas based on people's needs. The specific code resume is on the train of thought, otherwise, they will only talk on paper! If you don't understand it, you need to draw more pictures. The specific step-by-step computation will take a long time and you will be able to "practice" it!

The following is a demo: SpringProgressDemo