android自定義進(jìn)度條漸變色View的實(shí)例代碼
最近在公司,項(xiàng)目不是很忙了,偶爾看見(jiàn)一個(gè)兄臺(tái)在CSDN求助,幫忙要一個(gè)自定義的漸變色進(jìn)度條,我當(dāng)時(shí)看了一下進(jìn)度條,感覺(jué)挺漂亮的,就嘗試的去自定義view實(shí)現(xiàn)了一個(gè),廢話不說(shuō),先上圖吧!
這個(gè)自定義的view,完全脫離了android自帶的ProgressView,并且沒(méi)使用一張圖片,這樣就能更好的降低程序代碼上的耦合性!
下面我貼出代碼 ,大概講解一下實(shí)現(xiàn)思路吧!
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;
/***
* 自定義進(jìn)度條
* @author spring sky
* Email:vipa1888@163.com
* 創(chuàng)建時(shí)間:2014-1-6下午3:28:51
*/
public class SpringProgressView extends View {
/**分段顏色*/
private static final int[] SECTION_COLORS = {Color.GREEN,Color.YELLOW,Color.RED};
/**進(jìn)度條最大值*/
private float maxCount;
/**進(jìn)度條當(dāng)前值*/
private float currentCount;
/**畫(huà)筆*/
private Paint mPaint;
private int mWidth,mHeight;
public SpringProgressView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
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) {
}
@Override
protected 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 RectF(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)*section, 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));
}
/***
* 設(shè)置最大的進(jìn)度值
* @param maxCount
*/
public void setMaxCount(float maxCount) {
this.maxCount = maxCount;
}
/***
* 設(shè)置當(dāng)前的進(jìn)度值
* @param currentCount
*/
public void setCurrentCount(float currentCount) {
this.currentCount = currentCount > maxCount ? maxCount : currentCount;
invalidate();
}
public float getMaxCount() {
return maxCount;
}
public float getCurrentCount() {
return currentCount;
}
@Override
protected 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);
}
}
以上代碼就是該控件的全部核心代碼了
具體思路:
1.進(jìn)度條,其實(shí)就是一個(gè)最大值和最小值的比例值,這個(gè)比例就是 當(dāng)前值/最大值;
2.自定義的圓角問(wèn)題,只要還是用到了Canvar的畫(huà)板的drawRoundRect ;
3.漸變色:LinearGradient對(duì)象渲染,具體渲染的比例要自己計(jì)算,目前我的程序提供3中顏色渲染,具體規(guī)則是:
(1)當(dāng)進(jìn)度條占最大值的三分之一以下,則提供一種顏色
(2)當(dāng)最大值超過(guò)三分之一話,就區(qū)分是否超過(guò)三分之二,如果超過(guò)則用三種,否則用兩種顏色,因?yàn)槿N顏色各占總進(jìn)度條的三分之一,這是一個(gè)初中數(shù)據(jù)的問(wèn)題,自己慢慢畫(huà)圖吧!
4.怎么把進(jìn)度條放在一個(gè)有圓角背景的上面,這個(gè)就是繪制兩個(gè)圓角長(zhǎng)方形:第一個(gè)作為背景,第二個(gè)作為進(jìn)度條的實(shí)體,具體第二個(gè)進(jìn)度的實(shí)體占多長(zhǎng),就是當(dāng)前 currentCount/maxCount*自定義View的長(zhǎng)度 ;
其他的,沒(méi)啥技術(shù)難點(diǎn)了,做這種自定義控件,最重要的是,自定要根據(jù)人家的效果圖,看懂實(shí)現(xiàn)思路,具體代碼簡(jiǎn)歷在思路上的,否則只會(huì)紙上談兵!如果看不懂,就要多畫(huà)圖,具體的一步步計(jì)算,天長(zhǎng)地久,也就能“練”出來(lái)了!
下面提供一個(gè)demo下載地址:http://xiazai.jb51.net/201401/yuanma/SpringProgressDemo(jb51.net).zip
相關(guān)文章
Android編程設(shè)計(jì)模式之原型模式實(shí)例詳解
這篇文章主要介紹了Android編程設(shè)計(jì)模式之原型模式,結(jié)合實(shí)例形式詳細(xì)分析了Android設(shè)計(jì)模式之原型模式的概念、原理、定義、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12Android實(shí)現(xiàn)網(wǎng)絡(luò)多線程斷點(diǎn)續(xù)傳下載實(shí)例
本示例介紹在Android平臺(tái)下通過(guò)HTTP協(xié)議實(shí)現(xiàn)斷點(diǎn)續(xù)傳下載。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-10-10Android中Retrofit庫(kù)的高級(jí)使用與原理
在 Android 開(kāi)發(fā)中,網(wǎng)絡(luò)請(qǐng)求是一個(gè)極為關(guān)鍵的部分,Retrofit 作為一個(gè)強(qiáng)大的網(wǎng)絡(luò)請(qǐng)求庫(kù),能夠簡(jiǎn)化開(kāi)發(fā)流程,提供高效的網(wǎng)絡(luò)請(qǐng)求能力,本文將深入介紹 Retrofit 的高級(jí)使用與原理,幫助讀者更全面地理解和應(yīng)用這一庫(kù),需要的朋友可以參考下2023-08-0821天學(xué)習(xí)android開(kāi)發(fā)教程之MediaPlayer
21天學(xué)習(xí)android開(kāi)發(fā)教程之MediaPlayer,MediaPlayer可以播放音頻和視頻,操作相對(duì)簡(jiǎn)單,感興趣的小伙伴們可以參考一下2016-02-02超實(shí)用的android網(wǎng)絡(luò)工具類(lèi)
這篇文章主要為大家詳細(xì)介紹了超實(shí)用的android網(wǎng)絡(luò)工具類(lèi),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Android軟件啟動(dòng)動(dòng)畫(huà)及動(dòng)畫(huà)結(jié)束后跳轉(zhuǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了Android軟件啟動(dòng)動(dòng)畫(huà)及動(dòng)畫(huà)結(jié)束后跳轉(zhuǎn)的實(shí)現(xiàn)方法,實(shí)例分析了Android圖片播放及定時(shí)器的相關(guān)使用技巧,非常具有使用價(jià)值,需要的朋友可以參考下2015-10-10Android studio配置國(guó)內(nèi)鏡像源的實(shí)現(xiàn)
這篇文章主要介紹了Android studio配置國(guó)內(nèi)鏡像源的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11