Android自定義水平漸變進度條
更新時間：2017年09月27日 14:09:08 作者：hust_twj
這篇文章主要為大家詳細介紹了Android自定義水平漸變進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下
先看進度條的效果：
具體實現(xiàn)：
新建類，繼承自View，在onDraw中進行繪制：
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
*
* 自定義 進度條
* Created by wenjing.tang on 2017/8/7.
*/
public class CustomizedProgressBar extends View {
private float maxCount = 100; //進度條最大值
private float currentCount; //進度條當前值
// private Paint mPaint ;
private int mWidth,mHeight;
private Context mContext;
public CustomizedProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
public CustomizedProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context);
}
public CustomizedProgressBar(Context context) {
super(context);
initView(context);
}
private void initView(Context context) {
mContext=context;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint mPaint = new Paint();
mPaint.setAntiAlias(true);
int round = mHeight/2; //半徑
mPaint.setColor(getResources().getColor(R.color.white_alpha)); //設置邊框背景顏色
RectF rectBg = new RectF(0, 0, mWidth, mHeight);
canvas.drawRoundRect(rectBg, round, round, mPaint);//繪制 最外面的大 圓角矩形，背景為白色
float section = currentCount/maxCount; //進度條的比例
RectF rectProgressBg = new RectF(0, 0, mWidth*section, mHeight);
Log.e("CustomizedProgressBar", currentCount+"");
Log.e("CustomizedProgressBar", section+"");
//Paint設置setColor(白色無透明)和setShader，只讓setShader生效；不然前面setColor設置了透明度，透明度會生效，和setShader效果疊加
mPaint.setColor(getResources().getColor(R.color.white));
mPaint.setShader(getLinearGradient());
canvas.drawRoundRect(rectProgressBg, round, round, mPaint); //最左邊的圓角矩形
if (maxCount != currentCount){ //如果不是100%，繪制第三段矩形
RectF rectProgressBg2 = new RectF(mWidth*section-round, 0, mWidth*section, mHeight);
mPaint.setShader(getLinearGradient());
canvas.drawRect(rectProgressBg2, mPaint);
}
}
private LinearGradient linearGradient;
private LinearGradient getLinearGradient(){
if(linearGradient==null){
linearGradient = new LinearGradient(0, 0, getWidth(), mHeight, new int[]{mContext.getResources().getColor(R.color.progress_color_1),
mContext.getResources().getColor(R.color.progress_color_2)}, null, Shader.TileMode.CLAMP); //根據(jù)R文件中的id獲取到color
}
return linearGradient;
}
private int dipToPx(int dip) {
float scale = getContext().getResources().getDisplayMetrics().density;
return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
}
/***
* 設置最大的進度值
* @param maxCount 最大的進度值
*/
public void setMaxCount(float maxCount) {
this.maxCount = maxCount;
}
/***
* 設置當前的進度值
* @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(18);
} else {
mHeight = heightSpecSize;
}
setMeasuredDimension(mWidth, mHeight);
}
}
其中用到的一些資源文件如下：
<!--自定義進度條背景顏色--> <color name="white_alpha">#0c000000</color> <!--自定義進度條漸變顏色--> <color name="progress_color_1">#ff916b</color> <color name="progress_color_2">#ffa94c</color>
要注意的是，在上面Java代碼中，mPaint.setColor(getResources().getColor(R.color.white));這行很重要，因為進度條總共有三層，第一層是最外面的背景，第二層是進度，第三層如果不是100%才繪制，由于第一層背景有透明度，所以setColor設置了透明度，但雖然setShader，透明度還是會生效，兩者效果疊加，效果是這樣：
加上之后，Paint 第二次設置 setColor (白色無透明)和 setShader，只讓 setShader 生效，進度條才會達到滿意的效果；
用法：
Java代碼中：
customizedProgressBar.setMaxCount(100);
integrity = dataCount/TOTAL_COUNT *100; //根據(jù)自己情況來初始化完整度
customizedProgressBar.setCurrentCount((int) integrity);
mTvtDataIntegrity.setText("完整度" + (int) integrity +"%");
xml文件中（不需要文字顯示也可以）：
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="18dp"
android:layout_marginStart="66dp"
android:layout_marginEnd="66dp"
android:layout_centerVertical="true">
<com.text.widget.CustomizedProgressBar
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/tv_data_integrity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
tools:text="完整度35%"
android:textSize="10sp"
android:layout_centerInParent="true"/>
</RelativeLayout>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解Android 檢測權(quán)限的三種寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了flutter 微信聊天輸入框功能實現(xiàn),本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了詳解Android 視頻播放時停止后臺運行的方法的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了Android如何實現(xiàn)掃描和生成二維碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Android時間對話框TimePickerDialog詳解
這篇文章主要為大家詳細介紹了Android時間對話框TimePickerDialog的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
flutter實現(xiàn)更新彈窗內(nèi)容例子(親測有效)
Flutter是一款移動應用程序SDK，包含框架、widget和工具，這篇文章給大家介紹flutter實現(xiàn)更新彈窗內(nèi)容例子，親測可以使用，需要的朋友參考下吧2021-04-04
Flutter加載圖片流程之ImageProvider源碼示例解析
這篇文章主要為大家介紹了Flutter加載圖片流程之ImageProvider源碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
Android ExpandableListView用法示例詳解
ExpandableListView 是 Android 中一個非常實用的列表控件,它可以幫助我們實現(xiàn)具有分組功能的列表展示,通過本文的介紹,你應該已經(jīng)掌握了 ExpandableListView 的基本用法,感興趣的朋友跟隨小編一起看看吧2025-02-02
本篇內(nèi)容主要給大家講解了Android Webview攔截ajax請求的詳細講解，需要的朋友一起來學習一下。2017-11-11
Android調(diào)用系統(tǒng)拍照裁剪圖片模糊的解決方法
這篇文章主要為大家詳細介紹了Android調(diào)用系統(tǒng)拍照裁剪圖片模糊的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01