progress = 200.png
progress = 500.png
之前在做一个app中，发现IOS有一个ASProgressPopUpView的第三方控件满足需求的效果。可能因为我人比较懒，所以也没去详细地找出android是否有具体的一个第三方框架可以做到这样的一个效果。我自己具体分析了一下，发现做一个这样的自定义View好像并不难，也算是本人第一个小小的自定义View。在一个师兄提醒和android开发艺术探索第三章View的滑动的启发下就写下了这个原理其实很简单的自定义ProgressBar。
下面讲讲原理，其实就是利用了android的简单属性Margin，使ProgressBar上面的TextView可以按比例滑动。这个偏移量值也很好的算出来：
offset = progressbar的progress * 1f / progressbar的Max * progressbar的长度；原理很简单，通过这样小小的计算，你就会感觉到ProgressBar上面的控件好像按着比例跟着ProgressBar一起在移动。下面我们讲讲如何具体地用代码实现这个View。
首先，我们要给android自带的ProgressBar添加一个自定义样式。
<ProgressBar
android:layout_width="match_parent"
android:layout_height="3dp"
android:max="500"
android:progressDrawable="@drawable/progressbar_star_style"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
/>```
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background">
<shape>
<solid android:color="#A7A7A7"/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip android:gravity="left">
<shape>
<solid android:color="#17b1f7"/>
</shape>
</clip>
</item>
</layer-list>
*注意：进度条需要设置clip的android：gravity="left"，不然进度条可能会默认居中显示。*
写好所需要的样式，就可以进入java代码的编写。
public class StarBar extends LinearLayout {
//设置的进度
private int progress = 0;
private String creditText;
//显示文字的方框
private LinearLayout llStarBarCredit;
private TextView tvStarBarCredit;
//进度条
private ProgressBar pbStarBar;
private LinearLayout llStarBarText;
//指向进度条进度的小三角形
private ImageView ivStarBarTriangle;
//进度条最大值
private int maxProgress = 500;
//进度条长度
private int starBarWidth;
//屏幕宽度
private int screenWidth;
//进度条离两边的距离
private int marginWidth;
//设置文字方框的宽度
private int llStarBarCreditWidth = 90;
//偏移量
private float offset;
public StarBar(Context context) {
this(context, null);
}
public StarBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public StarBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
//设置ProgressBar的progress
public void setProgress(int progress) {
pbStarBar.setProgress(progress);
//获取progress在进度条的相应长度
offset = progress * 1f / maxProgress * starBarWidth;
LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
LayoutParams triangleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
//判断当进度条滑到最右边的时候，上面显示文字的方框会移动到超过屏幕的地方，这里要分两种情况考虑
if(screenWidth - (marginWidth + (int) offset - (int) diptopx(10)) >
(int) diptopx(llStarBarCreditWidth)) {
layoutParams.setMargins(marginWidth + (int) offset - (int) diptopx(10), 0, 0, 0);
}else{
layoutParams.setMargins(screenWidth - (int) diptopx(llStarBarCreditWidth), 0, 0, 0);
}
//设置显示文字方框的宽度，这里最好设置方框的宽度，因为调用这方法的时候onMeasure还没完成测量
layoutParams.width = (int)diptopx(llStarBarCreditWidth);
layoutParams.height = (int)diptopx(20);
llStarBarCredit.setLayoutParams(layoutParams);
triangleParams.setMargins(marginWidth + (int) offset - (int) diptopx(5), (int) diptopx(-3), 0, 0);
ivStarBarTriangle.setLayoutParams(triangleParams);
}
//设置TextView里面的文字
public void setCreditText(String creditText){
this.creditText = creditText;
tvStarBarCredit.setText(creditText);
}
//初始化
private void init(Context context) {
View contentView =LayoutInflater.from(context).inflate(R.layout.asprogressbar,null);
LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
llStarBarCredit = (LinearLayout)contentView.findViewById(R.id.layout_xinyong);
tvStarBarCredit = (TextView)contentView.findViewById(R.id.tv_startInfo_xinYong);
pbStarBar = (ProgressBar) contentView.findViewById(R.id.sb_seetBar);
llStarBarText = (LinearLayout) contentView.findViewById(R.id.ll_starbar_text);
ivStarBarTriangle = (ImageView) contentView.findViewById(R.id.iv_star_triangle);
setStarBarWidth(pbStarBar);
setStarText();
contentView.setLayoutParams(params);
addView(contentView);
}
private void setStarBarWidth(View view) {
LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
WindowManager wm = (WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);
//获取屏幕宽度
screenWidth = wm.getDefaultDisplay().getWidth();
//设置进度条离屏幕两边的距离
marginWidth = screenWidth / 16;
params.setMargins(marginWidth, 0, marginWidth, 0);
params.height = 6;
starBarWidth = screenWidth - (marginWidth * 2);
view.setLayoutParams(params);
}
private void setStarText(){
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(marginWidth + (int) offset, (int) diptopx(15), 0, (int) diptopx(5));
llStarBarText.setLayoutParams(layoutParams);
}
}```
很明显，我是分成三大部分去写这样一个View，第一部分就是ProgressBar以上的部分，是一个LinearLayout，而LinearLayout里面有个TextView和一个图片为三角形的ImageView。第二部分是一个是一个ProgressBar。而第一、第三部分都是按着第二部分的ProgressBar算出的偏移量setMargin来达到滑到的目的。
用的时候只需要在xml中定义这个控件即可：
使用.png
这是一个原理很简单但实现效果不错的自定义View，也是我自己的第一个自定义View，如果代码哪里写得不好可以给我指正一下，大家一起成长进步！
网友评论