带进度边框的自定义TextView

下文中有些Progress笔误写成了Process。就不改了

效果图：

继承TextView进行自定义View。并增加几个自定义的属性。
- 进度条的颜色
- 进度条背景颜色
- 进度条宽度

values下面新建一个attrs.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="ProgressView">            <attr name="backgroundColor" format="color"/>          <attr name="progressColor" format="color"/>          <attr name="progressWidth" format="dimension"></attr>      </declare-styleable>   </resources>    

然后获取属性：

        TypedArray mTypedArray=context.obtainStyledAttributes(attrs,R.styleable.ProgressView);        progressColor=mTypedArray.getColor(R.attr.progressColor, Color.GREEN);        backgroundColor=mTypedArray.getColor(R.attr.backgroundColor, Color.TRANSPARENT);        progressWidth=mTypedArray.getDimension(R.attr.progressWidth, 5);

在layout的XML中使用

    <com.example.processtextview.ProcessTextView         android:id="@+id/myTextView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world"        custom:backgroundColor ="@color/whitesmoke"         custom:progressColor ="@color/orange"          custom:progressWidth ="4dp"        />

2.
在原有的基础上，在TextView的矩形边框处，绘制4根线作为进度条的背景。
然后根据Process来绘制进度。

示例代码：

ProcessTextView

package com.example.processtextview;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.Style;import android.graphics.Path;import android.util.AttributeSet;import android.util.TypedValue;import android.widget.TextView;public class ProcessTextView extends TextView {    private int progressColor;    private int backgroundColor;    private float progressWidth;    private double progress = 0;    private final Paint progressPaint;    private final Paint backgroundPaint;    private Canvas canvas;    private int canvasWidth, canvasHight;    public ProcessTextView(Context context) {        this(context, null);    }    public ProcessTextView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ProcessTextView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        TypedArray mTypedArray = context.obtainStyledAttributes(attrs,                R.styleable.ProcessTextView);        try {            progressColor = mTypedArray.getColor(                    R.styleable.ProcessTextView_progressColor, Color.GREEN);            backgroundColor = mTypedArray.getColor(                    R.styleable.ProcessTextView_backgroundColor,                    Color.TRANSPARENT);            progressWidth = mTypedArray.getDimension(                    R.styleable.ProcessTextView_progressWidth, 5);        } finally {            mTypedArray.recycle();        }        backgroundPaint = new Paint();        backgroundPaint.setColor(backgroundColor);        backgroundPaint.setStrokeWidth(progressWidth);        backgroundPaint.setAntiAlias(true);        backgroundPaint.setStyle(Style.STROKE);        progressPaint = new Paint();        progressPaint.setColor(progressColor);        progressPaint.setStrokeWidth(progressWidth);        progressPaint.setAntiAlias(true);        progressPaint.setStyle(Style.STROKE);        // 把内边距设为进度条宽度，防止遮盖文字        this.setPadding((int) progressWidth, (int) progressWidth,                (int) progressWidth, (int) progressWidth);    }    @Override    protected void onDraw(Canvas canvas) {        this.canvas = canvas;        super.onDraw(canvas);        this.canvasWidth = canvas.getWidth();        this.canvasHight = canvas.getHeight();        drawBackgroundProcess();        drawProcess();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // TODO Auto-generated method stub        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    protected void drawBackgroundProcess() {        Path backgroundPath = new Path();        backgroundPath.moveTo(0, progressWidth / 2);        backgroundPath.lineTo(canvasWidth - progressWidth / 2,                progressWidth / 2);        backgroundPath.lineTo(canvasWidth - progressWidth / 2, canvasHight                - progressWidth / 2);        backgroundPath.lineTo(progressWidth / 2, canvasHight                - progressWidth / 2);        backgroundPath.lineTo(progressWidth / 2, 0);        canvas.drawPath(backgroundPath, backgroundPaint);    }    protected void drawProcess() {        if(this.progress<0) return;        if(this.progress>100) this.progress=100;         Path processPath = new Path();        processPath.moveTo(0, progressWidth / 2);        //根据不同情况来设定path        if (this.progress <= (50 * canvasWidth) / (canvasWidth + canvasHight)) {// 只需要画顶边            processPath.lineTo((float) ((canvasWidth + canvasHight)*this.progress/50),                progressWidth / 2);        } else if (this.progress > (50 * canvasWidth)                / (canvasWidth + canvasHight)                && this.progress <= 50) {//画到右边            processPath.lineTo(canvasWidth - progressWidth / 2,                    progressWidth / 2);            processPath.lineTo(canvasWidth - progressWidth / 2, (float) ((canvasWidth + canvasHight)*this.progress/50-canvasWidth));        } else if (this.progress > 50                && this.progress <= 50 + (50 * canvasWidth)                        / (canvasWidth + canvasHight)) {//画到底边            processPath.lineTo(canvasWidth - progressWidth / 2,                    progressWidth / 2);            processPath.lineTo(canvasWidth - progressWidth / 2, canvasHight                    - progressWidth / 2);            processPath.lineTo((float) (2*canvasWidth+canvasHight-(canvasWidth + canvasHight)*this.progress/50), canvasHight                    - progressWidth / 2);        } else {//画到左边            processPath.lineTo(canvasWidth - progressWidth / 2,                    progressWidth / 2);            processPath.lineTo(canvasWidth - progressWidth / 2, canvasHight                    - progressWidth / 2);            processPath.lineTo(progressWidth / 2, canvasHight                    - progressWidth / 2);            processPath.lineTo(progressWidth / 2, (float) (2*canvasWidth+2*canvasHight-(canvasWidth + canvasHight)*this.progress/50));        }        canvas.drawPath(processPath, progressPaint);    }    // Setter And Getter    public int getProgressColor() {        return progressColor;    }    public void setProgressColor(int progressColor) {        this.progressColor = progressColor;    }    public int getBackgroundColor() {        return backgroundColor;    }    public void setBackgroundColor(int backgroundColor) {        this.backgroundColor = backgroundColor;    }    public float getProgressWidth() {        return progressWidth;    }    public void setProgressWidth(float progressWidth) {        this.progressWidth = progressWidth;    }    public double getProgress() {        return progress;    }    public void setProgress(double progress) {        this.progress = progress;        this.postInvalidate();    }    // Util Method below    public static int convertDpToPx(float dp, Context context) {        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,                context.getResources().getDisplayMetrics());    }}

MainActivity

package com.example.processtextview;import android.os.Bundle;import android.os.Handler;import android.app.Activity;import android.util.Log;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;public class MainActivity extends Activity {    Handler mHandler =new Handler();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        final ProcessTextView processView=(ProcessTextView) findViewById(R.id.myTextView);        Button bt=(Button)findViewById(R.id.button1);        bt.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                Thread back=new Thread(new Runnable() {                    @Override                    public void run() {                        int i=0;                        while(i<100){                            try {                                Thread.sleep(100);                            } catch (InterruptedException e) {                                // TODO Auto-generated catch block                                e.printStackTrace();                            }                            processView.setProgress(i++);                            Log.e("WhatEver", "Process:"+i);                        }                    }                });                back.start();            }        });    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }}

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:custom="http://schemas.android.com/apk/res/com.example.processtextview"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <!--android:padding="4dip" -->       <com.example.processtextview.ProcessTextView         android:id="@+id/myTextView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:text="@string/hello_world"         android:textSize="20sp"        custom:backgroundColor ="@color/whitesmoke"         custom:progressColor ="@color/orange"          custom:progressWidth ="4dip"        />    <Button        android:id="@+id/button1"        style="?android:attr/buttonStyleSmall"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignLeft="@+id/myTextView"        android:layout_alignParentBottom="true"        android:layout_marginBottom="32dp"        android:layout_marginLeft="74dp"        android:text="Start" /></RelativeLayout>

后记：

1，如果想做一个可以应用在任意矩形View组件上的进度条，比如Button，ImageView等。则可以换一个思路，再做一个单独的View来绘制进度条和进度条背景。而在构造函数中将需要包围进度条的组件传递进去。虽然操作麻烦点，但是可以很好地适用与各种组件。比如点击按钮后产生进度加载的效果。

2，如果组件的图形上不是一个矩形，而是一个比如带圆角矩形，或者圆形。这个绘制还是继承比较好一点，然后根据它绘制圆角的方式，在外围追加一个进度条。