最近项目开发有个需求，其实就是平常使用的百分比进度条，这个功能网上有很多资料，不多说，我下面说的这个功能是在原有的基础上给百分比文本添加背景图标，效果图如下：
网上找到的资料都是只有百分比文本或者背景图标都是自定义view写死的，不符合项目需求，所以我自己研究并写了一个，（为了方便大家测试使用，该文章内容我尽量不截图，完全纯代码）
自定义ImageTextProgressBar
/**
* @date 2018/8/22
* @describe 百分比+背景图标进度条
* 背景图片请严格使用不留空白的切图，否则影响体验，如果非要使用(可能美工不给你切图)你也可以修改代码调整
* @e-mail:[email protected]
*/
public class ImageTextProgressBar extends RelativeLayout {
private static final String TAG = "ImageTextProgressBar";
//文本背景图
private Drawable textBackground;
//百分比文字颜色
private int textColor;
//百分比文字大小
private int textSize = 15;
//百分比文字内容
private String textContent;
//进度条自定义背景，背景图片请严格使用不留空白的切图
private Drawable progressDrawable;
//进度条当前进度progress
private int progress;
private int MAX = 100;
private View mView;
private ProgressBar mProgressBar;
private TextView mTextView;
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public ImageTextProgressBar(Context context) {
this(context, null, 0);
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public ImageTextProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public ImageTextProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ImageTextProgressBar);
textBackground = a.getDrawable(R.styleable.ImageTextProgressBar_itpbTextBackground);
textColor = a.getColor(R.styleable.ImageTextProgressBar_itpbTextColor, Color.WHITE);
textSize = a.getDimensionPixelSize(R.styleable.ImageTextProgressBar_itpbTextSize, textSize);
textContent = a.getString(R.styleable.ImageTextProgressBar_itpbTextContent);
progressDrawable = a.getDrawable(R.styleable.ImageTextProgressBar_itpbProgressDrawable);
progress = a.getInteger(R.styleable.ImageTextProgressBar_itpbProgress, 0);
a.recycle();
initView();
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
private void initView() {
if (mView == null) {
mView = LayoutInflater.from(getContext()).inflate(R.layout.image_text_pb, null);
mProgressBar = (ProgressBar) mView.findViewById(R.id.pb_progressbar);
mTextView = (TextView) mView.findViewById(R.id.pb_precent);
if (textBackground != null) {
mTextView.setBackground(textBackground);
}
//设置文本
mTextView.setTextColor(textColor);
mTextView.setTextSize(textSize);
mTextView.setText(textContent);
//进度条
setProgress(progress);
if (progressDrawable != null) {
mProgressBar.setProgressDrawable(progressDrawable);
}
addView(mView);
}
}
//该段为核心代码
public void setProgress(final int precent) {
if (precent < 0 || precent > MAX) {
return;
}
ViewTreeObserver vto2 = mProgressBar.getViewTreeObserver();
vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
public void onGlobalLayout() {
mProgressBar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
int width = mProgressBar.getWidth();
int tvWidth = mTextView.getMeasuredWidth();
mProgressBar.setProgress(precent);
mTextView.setText(precent + "%");
float offsetX = (float) (mProgressBar.getProgress() * 1.0 / mProgressBar.getMax() * width);
int maxOffset = width - tvWidth;
int minOffset = tvWidth / 2;
//防止背景图片移出屏幕外，所以加此判断
if (offsetX < minOffset) {
offsetX = 0;
} else if (offsetX >= minOffset && offsetX <= maxOffset) {
offsetX -= tvWidth / 2;
} else if (offsetX > maxOffset) {
offsetX = maxOffset;
}
mTextView.setTranslationX(offsetX);
}
});
}
public int getProgress() {
return mProgressBar.getProgress();
}
public static int dpToPx(int dp, Context context) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}
}布局文件
image_text_pb.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/pb_progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_centerVertical="true"
android:max="100"
android:progress="0"
android:progressDrawable="@drawable/progress_drawable"/>
<TextView
android:id="@+id/pb_precent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@mipmap/love"
android:gravity="center"
android:text="0%"
android:textColor="@android:color/white"
android:textSize="12sp"/>
</RelativeLayout> 自定义进度条的背景色 progressbar_color.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景 gradient是渐变,corners定义的是圆角 -->
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dp" />
<solid android:color="#9a9a9a" />
</shape>
</item>
<!-- 进度条 -->
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dp" />
<solid android:color="#E34f4f" />
</shape>
</clip>
</item>
</layer-list>自定义属性
<declare-styleable name="ImageTextProgressBar">
<attr name="itpbTextBackground" format="reference"/>
<attr name="itpbTextColor" format="color"/>
<attr name="itpbTextSize" format="dimension"/>
<attr name="itpbTextContent" format="string"/>
<attr name="itpbProgressDrawable" format="reference"/>
<attr name="itpbProgress" format="integer"/>
</declare-styleable>textview背景图textbackground.xml或者直接使用图片都行
背景图片请严格使用不留空白的切图，否则影响体验，如果非要使用(可能美工不给你切图)你也可以修改代码调整
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#E34F4F"/>
<corners android:radius="5dp"/>
<size
android:width="40dp"
android:height="6dp"/>
</shape>最终效果图：
到此所有代码已经粘贴完毕。
个人感觉还有些瑕疵，但是不影响使用，各位朋友们可以测试使用，并且可以随时提出问题，共同学习。
谢谢大家！！！玩的开心！！！