首页 > 系统 > Android > 正文

Android自定义水平渐变进度条

2019-10-22 18:27:04
字体:
来源:转载
供稿:网友

先看进度条的效果:

Android水平渐变进度条,Android渐变进度条,Android水平进度条

具体实现:

新建类,继承自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); //根据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,透明度还是会生效,两者效果叠加,效果是这样:

Android水平渐变进度条,Android渐变进度条,Android水平进度条

加上之后,Paint 第二次设置 setColor (白色无透明)和 setShader,只让 setShader 生效,进度条才会达到满意的效果;

用法:

Java代码中:

 customizedProgressBar.setMaxCount(100); integrity = dataCount/TOTAL_COUNT *100; //根据自己情况来初始化完整度 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表