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，透明度还是会生效，两者效果叠加，效果是这样：

加上之后，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>

方式二（xml 设置 ProgressBar 背景）

该方式可以很简单地实现上述功能。如下为xml 中 的ProgressBar：

    <ProgressBar
        android:id="@+id/pb"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:layout_marginStart="100dp"
        android:layout_marginTop="100dp"
        android:onClick="switchOrSeekBar"
        android:progressDrawable="@drawable/bg_progress"
        android:progress="50"/>

其中， android:progressDrawable对应的 bg_progress布局为：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--背景效果(灰色)-->
    <item android:id="@android:id/background">

        <shape>
            <corners android:radius="40dp" />
            <solid android:color="#0c000000"/>
        </shape>

    </item>

    <!--第一进度条背景（渐变），clip：裁剪进度条右侧部分-->
    <item android:id="@android:id/progress">

        <clip>
            <shape>
                <corners android:radius="40dp" />
                <gradient
                    android:angle="180"
                    android:endColor="#ff916b"
                    android:startColor="#ffa94c" />
            </shape>
        </clip>
    </item>

</layer-list>

利用layer-list，对两层背景进行叠加；同时，还需要使用clip标签，该标签会默认裁剪掉渐变进度条右侧部分。看使用该方法得到的进度条如下：

方式三：ClipDrawable

利用 ClipDrawable 也可以实现该进度条，不明白的可以参考：ClipDrawable 使用。
具体就是使用一个 100% 进度的背景，在不同进度下通过 setLevel() 来改变进度值。