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

来源：互联网发布：2017淘宝店还能赚钱吗编辑：程序博客网时间：2024/04/29 23:53

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

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

聊完思想咱们来看看代码，先是定义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图的人了那谁不要盯着我的胡渣看

0 0