Custom圆环

传承者（Inheritors）打造共同进步生态圈！！！
转载：http://blog.youkuaiyun.com/lmj623565791/article/details/24529807

三段论：
写属性，自定义View（解析，画图各种操作），调用

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="firstColor" format="color"/>
    <attr name="secondColor" format="color"/>
    <attr name="circleWidth" format="dimension"/>
    <attr name="dotCount" format="integer"/>
    <attr name="splitSize" format="integer"/>
    <attr name="bg" format="reference"/>

    <declare-styleable name="CustomVolumControlBar">
        <attr name="firstColor"/>
        <attr name="secondColor"/>
        <attr name="circleWidth"/>
        <attr name="dotCount"/>
        <attr name="splitSize"/>
        <attr name="bg"/>
    </declare-styleable>
</resources>

自定义view

public class CustomViewVolumControlBar extends View {

    private int mFristColor;//第一个圈的颜色
    private int mSecondColor;//第二个圈的颜色
    private int mSplitSize;//每个块的间隙
    private int mCount;//个数
    private int mCirclWidth;//圈的宽度
    private Bitmap mImage;//中间图片
    private Rect mRect;
    private Paint mPaint;
    private  int mCurrentCount = 3;//当前个数
    public CustomViewVolumControlBar(Context context) {
        this(context, null);
    }
    public CustomViewVolumControlBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public CustomViewVolumControlBar(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 type = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyleAttr, 0);

        int indexCount = type.getIndexCount();
        for (int i = 0; i < indexCount; i++){
            int attr = type.getIndex(i);
            switch (attr) {
                case R.styleable.CustomVolumControlBar_firstColor:
                    mFristColor = type.getColor(attr, Color.GREEN);
                    break;
                case R.styleable.CustomVolumControlBar_secondColor:
                    mSecondColor = type.getColor(attr, Color.CYAN);
                    break;
                case R.styleable.CustomVolumControlBar_splitSize:
                    mSplitSize = type.getInt(attr, 20);
                    break;
                case R.styleable.CustomVolumControlBar_circleWidth:
                    mCirclWidth = type.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomVolumControlBar_dotCount:
                    mCount = type.getInt(attr, 20);
                    break;
                case R.styleable.CustomVolumControlBar_bg:
                    mImage = BitmapFactory.decodeResource(getResources(), type.getResourceId(attr, 0));
                    break;
            }
        }
        type.recycle();
        mRect = new Rect();
        mPaint = new Paint();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setAntiAlias(true);//消除锯齿
        mPaint.setStrokeWidth(mCirclWidth);//设置圆环的宽度
        mPaint.setStrokeCap(Paint.Cap.ROUND);//定义线段圆头
        mPaint.setStyle(Paint.Style.STROKE);//设置空心

        int center = getWidth()/ 2;//获得圆心的x坐标
        int radius = center - mCirclWidth/2;//半径
        /**
         * 画小长快
         */
        drawOval(canvas, center, radius);
        /**
         * 计算内切正方形的位置,内圆的
         */
        int relRadius = radius - mCirclWidth/2;
        /**
         * 内切正方形距离 顶部
         *
         */
        //边长的一半edge
         float  edge = (float) (Math.sqrt(2)*1.0f/2*relRadius);

        /*********************内容包裹部分 start **********************************/
        mRect.left =mRect.top = (int)(relRadius-edge ) +mCirclWidth;
        /**
         * 内切正方形的距离顶部
         */
        mRect.right = mRect.bottom = (int) (mRect.left +edge*2);

        /**
         * 如果图片较小，那么根据图片的尺寸放置到正中心
         */
        if(mImage.getWidth() <edge*2){
            mRect.left = (int)(mRect.left +edge - mImage.getWidth()*1.0f/2);
            mRect.top = (int) (mRect.top +edge - mImage.getHeight()*1.0f/2);
            mRect.right = mRect.left +mImage.getWidth();
            mRect.bottom = mRect.top +mImage.getHeight();

        }
        /*********************内容包裹部分 end **********************************/
        //绘图
        canvas.drawBitmap(mImage,null,mRect,mPaint);

    }
    private void drawOval(Canvas canvas, int center, int radius) {
        /**
         * 根据需要画个数以及计算每个长快所占的比例
         *
         */
       float itemSize = (360*1.0f - mCount*mSplitSize)/ mCount;

        //用于圆弧定义的形状和大小
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);

        mPaint.setColor(mFristColor);//设置圆环的颜色
        //根据进度画圆弧
        for (int i = 0; i < mCount; i++) {
            canvas.drawArc(oval,i*(itemSize+mSplitSize),itemSize,false,mPaint);
        }

        mPaint.setColor(mSecondColor);//设置圆环的颜色

        //根据进度画圆弧
        for (int i = 0; i < mCurrentCount; i++) {
            canvas.drawArc(oval,i*(itemSize+mSplitSize),itemSize,false,mPaint);
        }

    }

    private  int xDown,xUp;
    /**
     * 当数量+1
     */

    public void up(){
        mCurrentCount++;
     //   postInvalidate();------>内部调用的是postInvalidateDelayed(0);方法
        postInvalidateDelayed(3000);//延迟三秒
    }

    /***
     * 当前数量-1
     */
public void down(){
    mCurrentCount--;
    postInvalidateDelayed(0);

 //   invalidate();
}


    /*********************事件监听的处理部分 start **********************************/
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                xDown = (int) event.getY();
                break;
            case MotionEvent.ACTION_UP:
                xUp = (int)event.getY();
                if (xUp > xDown)// 下滑
                {
                    down();
                } else
                {
                    up();
                }
                break;
        }
        return true;
    }


    /*********************事件监听的处理部分 end **********************************/
}

调用view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:xxl="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#55ffffff"
    android:orientation="vertical">
<com.example.administrator.testapplication.CustomViewVolumControlBar
    android:layout_width="200dp"
    android:layout_height="200dp"
    xxl:bg="@mipmap/customize"
    xxl:firstColor="#252420"
    xxl:secondColor="#FDFDFD"
    xxl:circleWidth="12dp"
    xxl:dotCount="20"
    xxl:splitSize="25"
    >
</com.example.administrator.testapplication.CustomViewVolumControlBar>
    <com.example.administrator.testapplication.CustomViewVolumControlBar
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        xxl:bg="@mipmap/icon"
        xxl:firstColor="#00ff00"
        xxl:secondColor="#ff0000"
        xxl:circleWidth="10dp"
        xxl:dotCount="10"
        xxl:splitSize="15"
        >
    </com.example.administrator.testapplication.CustomViewVolumControlBar>


    <com.example.administrator.testapplication.CustomViewVolumControlBar
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="bottom"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="20dp"
        xxl:bg="@mipmap/icon_qq_small"
        xxl:firstColor="#adc6e5"
        xxl:secondColor="#0362db"
        xxl:circleWidth="10dp"
        xxl:dotCount="8"
        xxl:splitSize="25"
        >
    </com.example.administrator.testapplication.CustomViewVolumControlBar>


</LinearLayout>

效果如下