前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android自定义水平渐变进度条

Android自定义水平渐变进度条

作者头像
砸漏
发布2020-10-22 10:11:21
7020
发布2020-10-22 10:11:21
举报
文章被收录于专栏:恩蓝脚本

先看进度条的效果:

具体实现:

新建类,继承自View,在onDraw中进行绘制:

代码语言:javascript
复制
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); //根据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);
}
}

其中用到的一些资源文件如下:

代码语言:javascript
复制
<!--自定义进度条背景颜色-- 
<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代码中:

代码语言:javascript
复制
customizedProgressBar.setMaxCount(100);
integrity = dataCount/TOTAL_COUNT *100; //根据自己情况来初始化完整度
customizedProgressBar.setCurrentCount((int) integrity);
mTvtDataIntegrity.setText("完整度" + (int) integrity +"%");      

xml文件中(不需要文字显示也可以):

代码语言:javascript
复制
<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 

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档