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添加一个自定义样式。

android:layout_width="match_parent"

android:layout_height="3dp"

android:max="500"

android:progressDrawable="@drawable/progressbar_star_style"

style="@style/Widget.AppCompat.ProgressBar.Horizontal"

/>```

*注意：进度条需要设置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，如果代码哪里写得不好可以给我指正一下，大家一起成长进步！