Android如何自定义view实现半圆环效果

小编给大家分享一下Android如何自定义view实现半圆环效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体内容如下

1.自定义属性

<declare-styleable name="SemicircleView">        <attr name="radius" fORMat="dimension" />        <attr name="strokeWidth" format="dimension" />        <attr name="bgArcColor" format="color" />        <attr name="usedArcColor" format="color" />        <attr name="usedTextSize" format="dimension" />        <attr name="usedPercentTextSize" format="dimension" />        <attr name="percentTextSize" format="dimension" /></declare-styleable>

2.自定义View

package com.anhuitelecom.share.activity.view;import android.content.Context;import android.content.res.TypedArray;import android.graphics.canvas;import android.graphics.Paint;import android.graphics.Paint.FontMetrics;import android.graphics.Rect;import android.graphics.RectF;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.view.View;import com.anhuitelecom.share.activity.R;public class SemicircleView extends View{     //线圆弧画笔    private Paint mLineArcPaint;    //背景圆弧画笔    private Paint mBackgroudArcPaint;    //已使用圆弧画笔    private Paint mUsedArcPaint;    //已使用以及流量文字画笔    private Paint mUsedTxtPaint;    //已使用百分比文字画笔    private Paint mUsedPercentTxtPaint;    //百分号画笔    private Paint mPercentTxtPaint;    //最外层圆弧线颜色    private int mLineArcColor;    //背景圆环颜色    private int mBackgroundArcColor;    //已使用圆弧颜色    private int mUsedArcColor;    //圆弧半径    private float mArcRadius;    //外线大半径    private float mLineRadius;    //圆弧宽度    private float mArcStrokeWidth;    // 圆心x坐标    private int mXCenter;    // 圆心y坐标    private int mYCenter;    //已使用百分比    private float mProgress=0;    //动画展示弧度    private float mShowProgress;    private Context mContext;    //已使用和总流量    private String mUserdAndAll;    private float mUsedTextSize;    private float mUsedPercentTextSize;    private float mPercentTextSize;    private float mUsedPercentTxtHeight;    //private CircleThread    private Handler circleHandler = new Handler(){        public void handleMessage(Message msg) {            super.handleMessage(msg);            if(msg.what == 1){                float temp = (Float)msg.obj;                setShowProgress(temp);            }        };    };    public SemicircleView(Context context) {        this(context, null);    }    public SemicircleView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public SemicircleView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        mContext = context;        // 获取自定义的属性        initAttrs(context, attrs);        initVariable();    }    private void initAttrs(Context context, AttributeSet attrs) {        TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,                R.styleable.SemicircleView, 0, 0);        mLineRadius = typeArray.getDimension(R.styleable.SemicircleView_radius, 120);        mArcStrokeWidth = typeArray.getDimension(R.styleable.SemicircleView_strokeWidth, 12);        mBackgroundArcColor = typeArray.getColor(R.styleable.SemicircleView_bgArcColor, 0xFFFFFFFF);        mUsedArcColor = typeArray.getColor(R.styleable.SemicircleView_usedArcColor, 0xFFFF3D3B);        mUsedTextSize = typeArray.getDimension(R.styleable.SemicircleView_usedTextSize, 14);        mUsedPercentTextSize = typeArray.getDimension(R.styleable.SemicircleView_usedPercentTextSize, 52);        mPercentTextSize = typeArray.getDimension(R.styleable.SemicircleView_percentTextSize, 16);        typeArray.recycle();    }    private void initVariable() {        //初始化一些值        mLineRadius = mLineRadius + mArcStrokeWidth / 2;        mArcRadius = mLineRadius-1.8f*mArcStrokeWidth;        mLineArcColor = 0x33FFFFFF;        mUserdAndAll = "0M/0M";        //外层线圆弧画笔设置        mLineArcPaint = new Paint();        mLineArcPaint.setAntiAlias(true);        mLineArcPaint.setColor(mLineArcColor);        mLineArcPaint.setStyle(Paint.Style.STROKE);        mLineArcPaint.setStrokeWidth(1);        mLineArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形        //背景圆弧画笔设置        mBackgroudArcPaint = new Paint();        mBackgroudArcPaint.setAntiAlias(true);        mBackgroudArcPaint.setColor(mBackgroundArcColor);        mBackgroudArcPaint.setStyle(Paint.Style.STROKE);        mBackgroudArcPaint.setStrokeWidth(mArcStrokeWidth);        mBackgroudArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形        //已使用多少圆环画笔设置        mUsedArcPaint = new Paint();        mUsedArcPaint.setAntiAlias(true);        mUsedArcPaint.setColor(mUsedArcColor);        mUsedArcPaint.setStyle(Paint.Style.STROKE);        mUsedArcPaint.setStrokeWidth(mArcStrokeWidth);        mUsedArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形        mUsedTxtPaint  = new Paint();        mUsedTxtPaint.setAntiAlias(true);        mUsedTxtPaint.setStyle(Paint.Style.FILL);        mUsedTxtPaint.setColor(0x80FFFFFF);        mUsedTxtPaint.setTextSize(mUsedTextSize);        //百分比数字画笔        mUsedPercentTxtPaint  = new Paint();        mUsedPercentTxtPaint.setAntiAlias(true);        mUsedPercentTxtPaint.setStyle(Paint.Style.FILL);        mUsedPercentTxtPaint.setColor(0xFFFFFFFF);        mUsedPercentTxtPaint.setTextSize(mUsedPercentTextSize);        //百分号画笔        mPercentTxtPaint  = new Paint();        mPercentTxtPaint.setAntiAlias(true);        mPercentTxtPaint.setStyle(Paint.Style.FILL);        mPercentTxtPaint.setColor(0xFFFFFFFF);        mPercentTxtPaint.setTextSize(mPercentTextSize);        //获取字体高度        FontMetrics fm = mUsedPercentTxtPaint.getFontMetrics();        mUsedPercentTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);    }    @Override    protected void onDraw(Canvas canvas) {        // TODO Auto-generated method stub        super.onDraw(canvas);        mXCenter = getWidth() / 2;        mYCenter = getHeight() / 2;        RectF lineOval = new RectF();        lineOval.left = (mXCenter - mLineRadius);        lineOval.top = (mYCenter - mLineRadius);        lineOval.right = mLineRadius * 2 + (mXCenter - mLineRadius);        lineOval.bottom = mLineRadius * 2 + (mYCenter - mLineRadius);        RectF oval = new RectF();        oval.left = (mXCenter - mArcRadius);        oval.top = (mYCenter - mArcRadius);        oval.right = mArcRadius * 2 + (mXCenter - mArcRadius);        oval.bottom = mArcRadius * 2 + (mYCenter - mArcRadius);        //绘制最外面圆弧线        canvas.drawArc(lineOval, -225, 270, false, mLineArcPaint);        //绘制背景圆弧        canvas.drawArc(oval, -225, 270, false, mBackgroudArcPaint);        //绘制已使用圆弧        float mShowDegree = mShowProgress/100*270;        canvas.drawArc(oval, -225, mShowDegree, false, mUsedArcPaint);        //已使用文字        Rect usedRect = new Rect();        String usedStr = "已使用";        mUsedTxtPaint.getTextBounds(usedStr, 0, usedStr.length(), usedRect);        int usedX = mXCenter - usedRect.width() / 2;        canvas.drawText(usedStr, usedX, mYCenter-mArcRadius*0.6f, mUsedTxtPaint);        //已使用和总流量        Rect ua_rect = new Rect();        mUsedTxtPaint.getTextBounds(mUserdAndAll, 0, mUserdAndAll.length(), ua_rect);        int uaX = mXCenter - ua_rect.width() / 2;        canvas.drawText(mUserdAndAll, uaX, mYCenter+mArcRadius*0.6f, mUsedTxtPaint);        //百分比数字        String progressStr = (int)mShowProgress+"";        String percentStr = "%";        float usedPercentWidth = mUsedPercentTxtPaint.measureText(progressStr, 0, progressStr.length());        float percentWidth = mPercentTxtPaint.measureText(percentStr, 0, percentStr.length());        float upX = mXCenter-(usedPercentWidth + percentWidth)/2;        canvas.drawText(progressStr, upX, mYCenter+mUsedPercentTxtHeight/3, mUsedPercentTxtPaint);        float pX = upX + usedPercentWidth;        canvas.drawText(percentStr, pX, mYCenter+mUsedPercentTxtHeight/3, mPercentTxtPaint);    }    private void setShowProgress(float progress){        this.mShowProgress = progress;        postInvalidate();    }    public void setProgress(float progress) {        mProgress = progress;        new Thread(new CircleThread()).start();    }    public void setUsedArcColor(int usedArcColor) {        this.mUsedArcColor = usedArcColor;        if(mUsedArcPaint!=null){            mUsedArcPaint.setColor(mUsedArcColor);        }    }    public void setUsedAndAll(String usedAndAll) {        this.mUserdAndAll = usedAndAll;    }    public static int dp2px(Context context, float dipValue) {        final float scale = context.getResources().getDisplayMetrics().density;        return (int) (dipValue * scale + 0.5f);    }    public static int sp2px(Context context, float spValue) {        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;        return (int) (spValue * fontScale + 0.5f);    }    public static int px2sp(Context context, float pxValue) {        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;        return (int) (pxValue / fontScale + 0.5f);    }    private class CircleThread implements Runnable{        int m=0;        float i=0;        @Override        public void run() {            // TODO Auto-generated method stub            while(!Thread.currentThread().isInterrupted()){                try {                    Thread.sleep(30);                    m++;                    Message msg = new Message();                    msg.what = 1;                    if(i < mProgress){                        i += m;                        msg.obj = i;                        circleHandler.sendMessage(msg);                    }else{                        i = mProgress;                        msg.obj = i;                        circleHandler.sendMessage(msg);                        return;                    }                } catch (InterruptedException e) {                    // TODO Auto-generated catch block                    e.printStackTrace();                }            }        }    }}

外部调用

<com.view.SemicircleView   android:id="@+id/semicircleView"   android:layout_width="215dp"   android:layout_height="215dp"   android:layout_gravity="center_horizontal"   android:layout_marginTop="30dp"   halfArc:bgArcColor="#ffffff"   halfArc:percentTextSize="16sp"   halfArc:radius="100dp"   halfArc:strokeWidth="11dp"   halfArc:usedArcColor="#FF3D3B"   halfArc:usedPercentTextSize="52sp"   halfArc:usedTextSize="14sp" />

semicircleView.setUsedAndAll("170M/200M");semicircleView.setProgress(81);

实现效果图

以上是“Android如何自定义view实现半圆环效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！