Android自定义view(斜线进度条)

无简介

效果如下:

PercentText

代码:

自定义的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中使用时注意加上这一句,要加在头上(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” />

[dl href=‘http://pan.baidu.com/s/1gd4gfv1’]测试代码下载[/dl]

-------------本文结束  感谢您的阅读-------------
下次一定