阴阳字进度条

描述

        进度条上有文字提示，已达到的部分显示一种颜色，未达到的部分显示另一种颜色。如果一个字处于交界处，那么该字左边显示一种颜色，右边显示一种颜色（阴阳字）。具体效果如下：

思路

        一共有两种颜色的文字，因此需要两个textview——一个是正常显示的textview(即上图中文字为蓝色的部分)，一个是进度的textview(即上图中文字为白色的部分)。除了文字颜色与背景外，两个textview应该完全一样。

        当进度改变时，截取进度textview的一部分，并将截取的部分转换成bitmap，再设置到最上层的imageview上即可。

        使用帧布局，最下层放进度textview，中间一层为正常textview，最上层为ImageView。

示例

代码如下

public class DemoView extends FrameLayout {    private static final int ORIENTATION_HORIZONTAL = 2;    private static final int ORIENTATION_VERTICAL = 1;    private float progress;    private int mOrientation;    private int mProgressTextColor;    private Drawable mProgressBg;    private ImageView mProgressImage;    private Bitmap progressBitmap, srcBitmap, bitmap;    private Canvas canvas;    public DemoView(Context context) {        this(context, null, 0);    }    public DemoView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public DemoView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DemoView);        mProgressTextColor = array.getColor(R.styleable.DemoView_progressTextColor, Color.GRAY);        mProgressBg = array.getDrawable(R.styleable.DemoView_progressBg);        mOrientation = array.getInt(R.styleable.DemoView_orientation, ORIENTATION_HORIZONTAL);        progress = array.getFloat(R.styleable.DemoView_progress, 0);        progress = Math.max(Math.min(progress, 100), 0);//[0,100]        array.recycle();        init(attrs);    }    public void setText(String text) {        TextView v1 = (TextView) getChildAt(0);        v1.setText(text);        updateProgressBitmap(v1);        TextView v2 = (TextView) getChildAt(1);        v2.setText(text);    }    private void init(AttributeSet attrs) {        mProgressImage = new ImageView(getContext());        final TextView progressTextView = new TextView(getContext(), attrs);        progressTextView.setTextColor(mProgressTextColor);        progressTextView.setBackgroundDrawable(mProgressBg);        final TextView srcView = new TextView(getContext(), attrs);        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);        addView(progressTextView, lp);        addView(srcView, lp);        addView(mProgressImage, lp);        post(new Runnable() {            @Override            public void run() {                progressBitmap = updateProgressBitmap(progressTextView);                srcBitmap = updateProgressBitmap(srcView);                bitmap = Bitmap.createBitmap(progressBitmap.getWidth(), progressBitmap.getHeight(), progressBitmap.getConfig());                canvas = new Canvas(bitmap);                setProgress(progress);            }        });    }    private Bitmap createProgressBitmap() {        clearCanvas(canvas);        //截取内容        switch (mOrientation) {            case ORIENTATION_HORIZONTAL:                float right = progressBitmap.getWidth() * progress / 100;                canvas.drawBitmap(progressBitmap, new Rect(0, 0, (int) (right), progressBitmap.getHeight()), new Rect(0, 0, (int) (right), progressBitmap.getHeight()), null);                canvas.drawBitmap(srcBitmap, new Rect((int) right, 0, srcBitmap.getWidth(), srcBitmap.getHeight()), new Rect((int) right, 0, srcBitmap.getWidth(), srcBitmap.getHeight()), null);                break;            default:                float bottom = progressBitmap.getHeight() * progress / 100;                canvas.drawBitmap(progressBitmap, new Rect(0, 0, progressBitmap.getWidth(), (int) (bottom)), new Rect(0, 0, progressBitmap.getWidth(), (int) (bottom)), null);                canvas.drawBitmap(srcBitmap, new Rect(0, (int) (bottom), srcBitmap.getWidth(), srcBitmap.getHeight()), new Rect(0, (int) (bottom), srcBitmap.getWidth(), srcBitmap.getHeight()), null);                break;        }        return bitmap;    }    /**     * 清除指定canvas上的内容，防止本次绘制的内容影响下次绘制     */    private void clearCanvas(Canvas canvas) {        if (canvas != null)            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);    }    private Bitmap updateProgressBitmap(TextView v1) {        v1.setVisibility(VISIBLE);        v1.setDrawingCacheEnabled(true);        Bitmap bitmap = v1.getDrawingCache();        v1.setVisibility(INVISIBLE);        return bitmap;    }    public void setProgress(float progress) {        if (progress >= 0 && progress <= 100) {            progress = formatProgress(progress);            this.progress = progress;            mProgressImage.setImageBitmap(createProgressBitmap());        }    }    private float formatProgress(float progress) {        DecimalFormat format = (DecimalFormat) DecimalFormat.getInstance();        format.applyPattern("##.##");        return Float.parseFloat(format.format(progress));    }    public float getProgress() {        return progress;    }    public void setProgressTextColor(int color) {        this.mProgressTextColor = color;        TextView view = (TextView) getChildAt(0);        view.setTextColor(color);        updateProgressBitmap((TextView) getChildAt(0));    }    public void setTextColor(int color) {        TextView view = (TextView) getChildAt(1);        view.setTextColor(color);        updateProgressBitmap(view);    }}

属性声明如下：

    <declare-styleable name="DemoView">        <attr name="orientation" format="enum">            <enum name="vertical" value="1" />            <enum name="horizontal" value="2" />        </attr>        <attr name="progressBg" format="reference|color" />        <attr name="progressTextColor" format="color" />        <attr name="progress" format="integer" />    </declare-styleable>

说明

        见代码。

        文字的显示可以使用textview的一切属性。