Android中自定義進(jìn)度條詳解
Android原生控件只有橫向進(jìn)度條一種，而且沒法變換樣式，比如原生rom的樣子
很丑是吧，當(dāng)偉大的產(chǎn)品設(shè)計(jì)要求更換前背景，甚至縱向，甚至圓弧狀的，咋辦，比如：
ok，我們開始吧：
一）變換前背景
先來看看progressbar的屬性：
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:layout_toRightOf="@+id/progressBarV"
android:indeterminate="false"
android:padding="2dip"
android:progress="50" />
根據(jù)style="?android:attr/progressBarStyleHorizontal"，我們找到源碼中的style.xml
<style name="Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
</style>
看到：
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
木有，繼續(xù)發(fā)掘源碼，找到drawable下面的progress_horizontal.xml，這就是我們今天的主角了：
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有
把這個(gè)文件復(fù)制到自己工程下的drawable，就可以隨心所欲的修改shape的屬性，漸變，圓角等等
那么怎么放一個(gè)圖片進(jìn)去呢，ok，新建progress_horizontal1.xml：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
</layer-list>
在android:drawable中指定你處理好的圖片
然后回到布局中：
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/progressBar"
android:layout_margin="5dip"
android:layout_toRightOf="@+id/progressBarV"
android:background="@drawable/progress_bg"
android:indeterminate="false"
android:indeterminateOnly="false"
android:maxHeight="20dip"
android:minHeight="20dip"
android:padding="2dip"
android:progress="50"
android:progressDrawable="@drawable/progress_horizontal1" />
android:background="@drawable/progress_bg"指定背景
android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1
ok，搞定
注意看，四角還是有圓倒角的，貌似是系統(tǒng)自己加上去的，總之我的圖片里面是沒有做這個(gè)倒角處理的
二）縱向進(jìn)度條
還是得從源碼入手，看回progress_horizontal.xml
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
為什么shape外面要包一層clip呢，官方文檔解釋是clipdrawable是可以自我復(fù)制的，來看看定義
<?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:clipOrientation=["horizontal" | "vertical"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"] />
android:clipOrientation有兩個(gè)屬性，默認(rèn)為horizontal
android:gravity有兩個(gè)屬性，默認(rèn)為left
那我們試試改成vertical和bottom會有什么效果，新建一個(gè)progress_vertical.xml，把源碼progress_horizontal.xml的內(nèi)容復(fù)制過來，這里去掉了secondaryProgress，修改了clip，shape的漸變中心centerY改為centerX
<item android:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity = "bottom">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerX="0.75"
android:endColor="#ffffcb00"
android:angle="90"
/>
</shape>
</clip>
</item>
布局中android:progressDrawable="@drawable/progress_vertical"
ok，搞定，就是這么簡單：
三）弧形bar
這個(gè)也許算不上是進(jìn)度條，用的也不多，最多也就儀表盤用用，不然誰會把進(jìn)度條整成圓弧的呢。好吧這個(gè)可不是改改源碼就能搞定的，看代碼：
public class Arcs extends View {
private Paint mArcPaint;
private Paint mArcBGPaint;
private RectF mOval;
private float mSweep = 0;
private int mSpeedMax = 200;
private int mThreshold = 100;
private int mIncSpeedValue = 0;
private int mCurrentSpeedValue = 0;
private float mCenterX;
private float mCenterY;
private float mSpeedArcWidth;
private final float SPEED_VALUE_INC = 2;
..........
}
首先是一堆成員變量，兩個(gè)Paint用來畫圓弧一個(gè)前景一個(gè)背景，一個(gè)RectF圓弧就畫在上面，然后是一些控制參數(shù)比如sweep圓弧掃過的角度，xy坐標(biāo)等等。
mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(mSpeedArcWidth);
// mPaint.setStrokeCap(Paint.Cap.ROUND);
mArcPaint.setColor(0xff81ccd6);
BlurMaskFilter mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
mArcPaint.setMaskFilter(mBlur);
mArcBGPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcBGPaint.setStyle(Paint.Style.STROKE);
mArcBGPaint.setStrokeWidth(mSpeedArcWidth+8);
mArcBGPaint.setColor(0xff171717);
BlurMaskFilter mBGBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
mArcBGPaint.setMaskFilter(mBGBlur);
設(shè)置兩個(gè)畫筆，顏色，寬度，樣式等等，BlurMaskFilter筆是邊緣模糊效果，有幾種，可以自己嘗試。
@Override
protected void onSizeChanged(int w, int h, int ow, int oh) {
super.onSizeChanged(w, h, ow, oh);
Log.i("onSizeChanged w", w+"");
Log.i("onSizeChanged h", h+"");
mCenterX = w * 0.5f; // remember the center of the screen
mCenterY = h - mSpeedArcWidth;
mOval = new RectF(mCenterX - mCenterY, mSpeedArcWidth, mCenterX + mCenterY, mCenterY * 2);
}
重寫父類View的onSizeChanged，為的是自己根據(jù)布局中的大小做居中處理
@Override
protected void onDraw(Canvas canvas) {
drawSpeed(canvas);
calcSpeed();
}
private void drawSpeed(Canvas canvas) {
canvas.drawArc(mOval, 179, 181, false, mArcBGPaint);
mSweep = (float) mIncSpeedValue / mSpeedMax * 180;
if (mIncSpeedValue > mThreshold) {
mArcPaint.setColor(0xFFFF0000);
}
else {
mArcPaint.setColor(0xFF00B0F0);
}
canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);
}
private void calcSpeed() {
if (mIncSpeedValue < mCurrentSpeedValue) {
mIncSpeedValue += SPEED_VALUE_INC;
if (mIncSpeedValue > mCurrentSpeedValue) {
mIncSpeedValue = mCurrentSpeedValue;
}
invalidate();
}
else if (mIncSpeedValue > mCurrentSpeedValue) {
mIncSpeedValue -= SPEED_VALUE_INC;
if (mIncSpeedValue < mCurrentSpeedValue) {
mIncSpeedValue = mCurrentSpeedValue;
}
invalidate();
}
}
重寫onDraw以便重繪canvas
drawSpeed里面
通過計(jì)算mSweep = (float) mIncSpeedValue / mSpeedMax * 180;
然后canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);
會根據(jù)mSweep的變化，畫出相應(yīng)長度的弧度來
根據(jù)與閾值的對比，還可以設(shè)定不同的 顏色：
if (mIncSpeedValue > mThreshold) {
mArcPaint.setColor(0xFFFF0000);
}
else {
mArcPaint.setColor(0xFF00B0F0);
}
calcSpeed通過一個(gè)步進(jìn)來控制增量或減量，以使弧度自然過渡，減少跳躍
ok，大功告成。
- Android 七種進(jìn)度條的樣式
- android自定義進(jìn)度條漸變色View的實(shí)例代碼
- Android中實(shí)現(xiàn)Webview頂部帶進(jìn)度條的方法
- Android文件下載進(jìn)度條的實(shí)現(xiàn)代碼
- Android編程之ProgressBar圓形進(jìn)度條顏色設(shè)置方法
- android ListView和ProgressBar(進(jìn)度條控件)的使用方法
- Android實(shí)現(xiàn)進(jìn)度條（ProgressBar）的功能與用法
- 實(shí)例詳解Android自定義ProgressDialog進(jìn)度條對話框的實(shí)現(xiàn)
- android中實(shí)現(xiàn)OkHttp下載文件并帶進(jìn)度條
- Android自定義View實(shí)現(xiàn)進(jìn)度條動畫
相關(guān)文章
這篇文章主要給大家介紹了Android獲取文字高度的三種方法，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Android富文本實(shí)現(xiàn)的幾種方式匯總
由于項(xiàng)目中需要使用到富文本顯示和編輯,索性整理下,這篇文章主要給大家介紹了關(guān)于Android富文本實(shí)現(xiàn)的幾種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Activity作為Android四大組件之一，他的啟動絕對沒有那么簡單。這里涉及到了系統(tǒng)服務(wù)進(jìn)程,啟動過程細(xì)節(jié)很多，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2022-12-12
Android編程實(shí)現(xiàn)網(wǎng)絡(luò)圖片查看器和網(wǎng)頁源碼查看器實(shí)例
這篇文章主要介紹了Android編程實(shí)現(xiàn)網(wǎng)絡(luò)圖片查看器和網(wǎng)頁源碼查看器,結(jié)合實(shí)例形式分析了Android針對網(wǎng)絡(luò)圖片及網(wǎng)頁的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-01-01
Android實(shí)現(xiàn)復(fù)制Assets文件到SD卡
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)復(fù)制Assets文件到SD卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Android垃圾回收機(jī)制及程序優(yōu)化System.gc
這篇文章主要介紹了Android垃圾回收機(jī)制及程序優(yōu)化System.gc的相關(guān)資料,需要的朋友可以參考下2016-01-01
Android 自定義組件成JAR包的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 自定義組件成JAR包的實(shí)現(xiàn)方法的相關(guān)資料,偶爾會用到這樣的功能，如果你自己自定義的組件很好，需要的朋友可以參考下2016-11-11
Android pull解析xml的實(shí)現(xiàn)方法
這篇文章主要介紹了Android pull解析xml的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，謝謝大家對本站的支持！需要的朋友可以參考下2017-10-10
Android動畫之補(bǔ)間動畫(Tween Animation)實(shí)例詳解
這篇文章主要介紹了Android動畫之補(bǔ)間動畫(Tween Animation)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android補(bǔ)間動畫的定義,原理,注意事項(xiàng)與相關(guān)使用技巧,需要的朋友可以參考下2016-01-01
解析Android游戲中獲取電話狀態(tài)進(jìn)行游戲暫停或繼續(xù)的解決方法
本篇文章是對在Android游戲中獲取電話狀態(tài)進(jìn)行游戲暫?；蚶^續(xù)的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05