Android 自定义 view（斜线进度条）

效果如下：

代码：

自定义的 view 的代码：

package cn.sumile.percentlayout;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.Path;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

public class PercentTextLayout extends View {
 private String mText;

 public String getText() {
 return mText;
 }

 public void setText(String mText) {
 this.mText = mText;
 postInvalidate();
 }

 public int getDefaultPercent() {
 return mDefaultPercent;
 }

 public void setDefaultPercent(int mDefaultPercent) {
 this.mDefaultPercent = mDefaultPercent;
 postInvalidate();
 }

 public int getBackColorDefault() {
 return mBackColorDefault;
 }

 public void setBackColorDefault(int mBackColorDefault) {
 this.mBackColorDefault = mBackColorDefault;
 }

 public int getBackColor() {
 return mBackColor;
 }

 public void setBackColor(int mBackColor) {
 this.mBackColor = mBackColor;
 }

 public int getTextColor() {
 return mTextColor;
 }

 public void setTextColor(int mTextColor) {
 this.mTextColor = mTextColor;
 }

 public int getTextSize() {
 return mTextSize;
 }

 public void setTextSize(int mTextSize) {
 this.mTextSize = mTextSize;
 }

 public int getTextAlignLeft() {
 return mTextAlignLeft;
 }

 public void setTextAlignLeft(int mTextAlignLeft) {
 this.mTextAlignLeft = mTextAlignLeft;
 }

 private int mDefaultPercent;
 private int mBackColorDefault;
 private int mBackColor;
 private int mTextColor;
 private int mTextSize;
 private Rect mBound;
 private int mTextAlignLeft;

 public PercentTextLayout(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 initView(context, attrs, defStyleAttr);
 }

 /**
 * @param context
 * 上下文对象
 * @param attrs
 * 参数
 * @param defStyleAttr
 */
 private void initView(Context context, AttributeSet attrs, int defStyleAttr) {
 TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PercentText, defStyleAttr, 0);
 int n = a.getIndexCount();
 for (int i = 0; i < n; i++) {
 int attr = a.getIndex(i);
 switch (attr) {
 case R.styleable.PercentText_backColor:
 mBackColor = a.getColor(attr, Color.GRAY);
 break;
 case R.styleable.PercentText_backColorDefault:
 mBackColorDefault = a.getColor(attr, Color.WHITE);
 break;
 case R.styleable.PercentText_defaultPercent:
 mDefaultPercent = a.getInt(attr, 50);
 break;
 case R.styleable.PercentText_text:
 mText = a.getString(attr);
 break;
 case R.styleable.PercentText_textSize:
 mTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
 break;
 case R.styleable.PercentText_textColor:
 mTextColor = a.getColor(attr, Color.BLACK);
 break;
 case R.styleable.PercentText_alignLeft:
 mTextAlignLeft = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
 break;
 }
 }
 a.recycle();
 }

 public PercentTextLayout(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public PercentTextLayout(Context context) {
 this(context, null);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 // 绘制背景
 Paint paint = new Paint();
 paint.setColor(mBackColorDefault);
 canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
 // 测量字体
 mBound = new Rect();
 paint.getTextBounds(mText, 0, mText.length(), mBound);
 // 绘制已完成的进度
 Path path = new Path();
 path.moveTo(0, 0);
 if (mDefaultPercent < 0) {
 mDefaultPercent = 0;
 }
 if (mDefaultPercent > 100) {
 mDefaultPercent = 100;
 }
 if (mDefaultPercent >= 2 && mDefaultPercent <= 98) {
 // point2
 int p1_width = (mDefaultPercent + 2) * getWidth() / 100;
 path.lineTo(p1_width, 0);
 // point3
 int p3_width = (mDefaultPercent - 2) * getWidth() / 100;
 path.lineTo(p3_width, getHeight());
 } else if (mDefaultPercent < 2) {
 int p1_width = (mDefaultPercent) * getWidth() / 100;
 path.lineTo(p1_width, 0);
 } else if (mDefaultPercent > 98) {
 // point2
 path.lineTo(getWidth(), 0);
 // point3
 int p3_width = (mDefaultPercent) * getWidth() / 100;
 path.lineTo(p3_width, getHeight());
 }
 // point4
 path.lineTo(0, getHeight());
 path.close();
 paint.setColor(mBackColor);
 canvas.drawPath(path, paint);
 // 绘制文字
 paint.setColor(mTextColor);
 paint.setTextSize(mTextSize);
 paint.setStrokeWidth(3);
 FontMetricsInt fontMetrics = paint.getFontMetricsInt();
 // paint2.setTextSize(20);
 int baseline = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
 canvas.drawText(mText, mTextAlignLeft, baseline, paint);
 invalidate();
 }
}

定义属性的代码

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <declare-styleable name="PercentText">
 <attr name="text" format="string"></attr>//要显示的文字
 <attr name="backColorDefault" format="color"></attr>//默认背景颜色，也就是没有完成的颜色
 <attr name="backColor" format="color"></attr>//完成后的颜色
 <attr name="defaultPercent" format="integer"></attr>//默认进度
 <attr name="textSize" format="dimension"></attr>//文字大小
 <attr name="textColor" format="color"></attr>//文字颜色
 <attr name="alignLeft" format="dimension"></attr>//文字相对于左面的边距
 </declare-styleable>

</resources>

注意事项

在 xml 中使用时注意加上这一句，要加在头上（cn.sumile.percentlayout 这个替换为你的 package）：

xmlns:pt="http://schemas.android.com/apk/res/cn.sumile.percentlayout"

xmlns:pt 里面的 pt 字符可以替换为任意字符，但是这里写什么，下面就得怎么写：

pt:defaultPercent="70"//这里前面就是用了 pt

xml 文件中进行使用

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:pt="http://schemas.android.com/apk/res/cn.sumile.percentlayout"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="cn.sumile.percentlayout.MainActivity"
 tools:ignore="MergeRootFrame" >

 <cn.sumile.percentlayout.PercentTextLayout
 android:id="@+id/ptl"
 android:layout_width="500dip"
 android:layout_height="50dip"
 android:layout_marginLeft="50dip"
 android:layout_marginRight="50dip"
 android:layout_marginTop="50dip"
 pt:alignLeft="20dip"
 pt:backColor="@android:color/holo_green_light"
 pt:backColorDefault="@android:color/darker_gray"
 pt:defaultPercent="70"
 pt:text="点个赞！"
 pt:textColor="@android:color/white"
 pt:textSize="20sp" />

</FrameLayout>

测试代码下载

￥有帮助么？打赏一下~