实现并不难，重要的是思想，是思想，是思想。重要的事情说三遍。
对于这种不均匀的刻度我们一定要有个想法，分段设置进度。
聊完思想咱们来看看代码，先是定义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图的人了
那谁不要盯着我的胡渣看
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
