Android 不均匀刻度的ProgressBar,渐变背景色的ProgressBar

实现并不难，重要的是思想，是思想，是思想。重要的事情说三遍。

对于这种不均匀的刻度我们一定要有个想法，分段设置进度。

聊完思想咱们来看看代码，先是定义dialog的进度条颜色

在draw里创建xml文件，代码如下

这里是重写系统的背景进度条颜色,所以id不能改

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        >
        <clip>
            <shape android:shape="rectangle">
                <size
                    android:width="100dp"
                    android:height="5dp"
                    />
                <corners android:radius="5dp"/>
                <gradient
                    android:centerColor="#E5E5E5"
                    android:endColor="#E5E5E5"
                    android:startColor="#E5E5E5"/>
            </shape>
        </clip>
    </item>
    <item
        android:id="@android:id/progress"
        >
        <clip>
            <shape android:shape="rectangle">
                <size
                    android:width="100dp"
                    android:height="5dp"
                    />
                <corners android:radius="5dp"/>
                <gradient
                    android:centerColor="#f9630c"
                    android:endColor="#f7132a"
                    android:startColor="#f1b616"/>
            </shape>
        </clip>
    </item>
</layer-list>

组合控件MyProgressBar的布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="0"
                android:textSize="12dp"
                />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:text="200"
                android:textSize="12dp"

                />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:text="500"
                android:textSize="12dp"

                />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:text="1000"
                android:textSize="12dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="5000"
                android:textSize="12dp"
                />
        </LinearLayout>

        <ProgressBar
            android:id="@+id/progressBar1"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/progress_bar"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            >

            <TextView
                android:id="@+id/progress_vip1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:text="VIP1"
                android:textSize="12dp"
                />

            <TextView
                android:id="@+id/progress_vip2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:text="VIP2"
                android:textSize="12dp"
                />

            <TextView
                android:id="@+id/progress_vip3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="4"
                android:text="VIP3"
                android:textSize="12dp"
                />

            <TextView
                android:id="@+id/progress_vip4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="5"
                android:text="VIP4"
                android:textSize="12dp"
                />

            <TextView
                android:id="@+id/progress_vip5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="VIP5"
                android:textSize="12dp"
                />
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

public class MyProgressBar extends FrameLayout {

    private ProgressBar mProgressBar;
    private TextView mVip5;
    private TextView mVip4;
    private TextView mVip3;
    private TextView mVip2;
    private TextView mVip1;
    public String vip = "";

    public MyProgressBar(Context context) {
        this(context, null);
    }

    public MyProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View inflate = View.inflate(context, R.layout.progressbar, null);
        addView(inflate);
        mProgressBar = (ProgressBar) inflate.findViewById(R.id.progressBar1);
        mVip1 = (TextView) inflate.findViewById(R.id.progress_vip1);
        mVip2 = (TextView) inflate.findViewById(R.id.progress_vip2);
        mVip3 = (TextView) inflate.findViewById(R.id.progress_vip3);
        mVip4 = (TextView) inflate.findViewById(R.id.progress_vip4);
        mVip5 = (TextView) inflate.findViewById(R.id.progress_vip5);
    }

    public void setProgress(final int progress) {
        new Thread() {
            @Override
            public void run() {
                /*
                看我们的布局里的文字的间距
                一共是2+3+4+5 = 14
                为了方便设置
                所以我们这里最大进度设为1400
                */
                mProgressBar.setMax(1400);
                
                int p = 0;
                /*
                当进度在区间[0,200),[200-500)内时,因为权重为2,3
                 200/2 = 1400/14;所以直接 进度 p=progress
                */
                if (progress >= 0 && progress < 200) {
                    vip = "VIP1";
                    p = progress;
                } else if (progress >= 200 && progress < 500) {
                    vip = "VIP2";
                    p = progress;
                /*
                当进度在区间[500,1000)内时,因为权重为4,为中间的刻度有500个单位
                这里的p就需要计算了.
                最简单的计算方法,把间距权重总数当成1400,那么[500,1000)之间的刻度就为400
                    400/500=0.8;
                    p = 0.8*progress+?;
                    当progress为500时,p也为500;代入可得
                    ?=100;
               当然你也可以把两个端点代入求值
                */  
                    
                } else if (progress >= 500 && progress < 1000) {
                    vip = "VIP3";
                    p = (int) (0.8 * progress + 100);
                } else if (progress >= 1000 && progress < 5000) {
                    vip = "VIP4";
                    //同上
                    p = (int) (0.125 * progress + 775);
                } else if (progress >= 5000) {
                    vip = "VIP5";
                    p = 1400;
                }
                //设置当前积分的vip等级,修改ui只能在主线程
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        selectVipLevel(vip);
                    }
                });
                //给进度条设置动画效果
                for (int i = 0; i <= 20; i++) {
                    int index = (int) (i / 20.0 * p);
                    SystemClock.sleep(40);
                    mProgressBar.setProgress(index);
                }

            }
        }.start();
    }

    Handler mHandler = new Handler();

    public void selectVipLevel(String level) {
        TextView textView = null;
        switch (level) {
            case "VIP1":
                textView = mVip1;
                break;
            case "VIP2":
                textView = mVip2;
                break;
            case "VIP3":
                textView = mVip3;
                break;
            case "VIP4":
                textView = mVip4;
                break;
            case "VIP5":
                textView = mVip5;
                break;
        }

        mVip1.setTextColor(Color.rgb(51, 51, 51));
        mVip2.setTextColor(Color.rgb(51, 51, 51));
        mVip3.setTextColor(Color.rgb(51, 51, 51));
        mVip4.setTextColor(Color.rgb(51, 51, 51));
        mVip5.setTextColor(Color.rgb(51, 51, 51));
        if (textView != null) {
            textView.setTextColor(Color.RED);
        }
    }
}

使用也很简单在布局里

<charview.com.myprogressbar.MyProgressBar
    android:id="@+id/pb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

在引用的类中

MyProgressBar pb = (MyProgressBar) findViewById(R.id.pb);
pb.setProgress(4000);

写完这篇博客,本宝宝也是会做gif图的人了那谁不要盯着我的胡渣看