自定义展开菜单

        在android开发中应该都自定过进度条，举个个简单的例子，通过重写view 的onDraw方法可以得到一个简单的进度条：

    重写onDraw方法

        mPaint.setColor(Color.parseColor("#888888"));
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawArc(rectF,0,mDegree,true,mPaint);

  通过线程的mDegree变化可以得到一个简单的进度条

 

  上面是一个简单的进度条，通过不断重绘制作出的效果，再看看下面的

   

  这个控件是通过类似进度条的加载效果来展示出菜单，下面是通过进度条的方式山寨的一个类似控件：

    

   这个控件其实不难，要注意的就是icon的绘制和一些位置的计算。下面是代码：

package com.example.arze.momentview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import java.lang.ref.WeakReference;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by arze on 2015/12/13.
 */
public class DrawProgressView extends View {

    private Paint mPaint = new Paint();

    //保存第一圈的icon
    private List<Drawable> mFirstDrawableList = new ArrayList<>();
    //保存第二圈的icon
    private List<Drawable> mSecondDrawableList = new ArrayList<>();
    //最内部的icon
    private Drawable mMainIcon;
    // 监听
    private OnDrawClickListener mOnDrawClickListener;
    // 一些默认常量
    private static final int DEFAULT_INNER = 60;
    private static final int DEFAULT_FIRST_WIDTH = 80;
    private static final int DEFAULT_SECOND_WIDTH = 80;
    private static final int DEFAULT_FIRST_COLOR = Color.parseColor("#cacaca");
    private static final int DEFAULT_SECOND_COLOR = Color.parseColor("#888888");
    private static final int DEFAULT_INNER_COLOR = Color.parseColor("#000000");
    private static final int DEFAULT_DEGREE = 1;


    //控件的长宽
    private int mWidth;
    private int mHeight;
    //内部圆的半径
    private int mInnerCir;
    //控件的中心点
    private Point mCenterPoint;
    //第一圈的宽度
    private int mFirstWidth;
    //第一圈的位置
    private RectF mFirstRectF;
    //第二圈的宽度
    private int mSecondWidth;
    //第二圈的位置
    private RectF mSecondRectF;
    //第一圈的颜色
    private int mFirstColor;
    // 第二圈的颜色
    private int mSecondColor;
    //内部圆的颜色
    private int mInnerColor;
    //内部圆的位置
    private RectF mInnerRectF;

    //展开第一圈
    private boolean isFirst = false;
    //展开第二圈
    private boolean isSecond = false;
    //展开完第一圈并显示
    private boolean isFirstShow = false;
    //展开完第二圈并显示
    private boolean isSencondShow = false;
    //回收第一圈
    private boolean isEndFirst = false;
    //回收第二圈
    private boolean isEndSecond = false;
    // 展开第一圈是否完成
    private boolean isStartFirstStop = true;
    //展开第二圈是否完成
    private boolean isStartSecondStop = true;
    //回收第一圈是否完成
    private boolean isEndFirstStop = true;
    //回收第二圈是否完成
    private boolean isEndSecondStop = true;

    //一些角度属性
    private float mDegree = 1;
    private float mFirstDrawDegree = 0;
    private float mSecondDrawDegree = 0;

    /**
     * 接口用来设置点击事件
     */
    public interface OnDrawClickListener {
        void onClick(View view, int position, boolean isFirst, boolean isSecond, boolean isCenter);
    }

    public void setOnDrawClickListener(OnDrawClickListener listener) {
        mOnDrawClickListener = listener;
    }


    public DrawProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);

    }

    public DrawProgressView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public DrawProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    /**
     * 一些属性的初始化，xml属性的获取
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        mMainIcon = getResources().getDrawable(R.drawable.main_icon);
        mFirstDrawableList.add(getResources().getDrawable(R.drawable.first_icon_0));
        mFirstDrawableList.add(getResources().getDrawable(R.drawable.first_icon_1));
        mFirstDrawableList.add(getResources().getDrawable(R.drawable.first_icon_2));
        mSecondDrawableList.add(getResources().getDrawable(R.drawable.second_icon_0));
        mSecondDrawableList.add(getResources().getDrawable(R.drawable.second_icon_1));
        mSecondDrawableList.add(getResources().getDrawable(R.drawable.second_icon_2));
        mSecondDrawableList.add(getResources().getDrawable(R.drawable.second_icon_3));

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DrawView);
        if (null != array) {
            mFirstWidth = (int) array.getDimension(R.styleable.DrawView_first_width, DEFAULT_FIRST_WIDTH);
            mFirstColor = array.getColor(R.styleable.DrawView_first_color, DEFAULT_FIRST_COLOR);
            mSecondWidth = (int) array.getDimension(R.styleable.DrawView_second_width, DEFAULT_SECOND_WIDTH);
            mSecondColor = array.getColor(R.styleable.DrawView_second_color, DEFAULT_SECOND_COLOR);
            mInnerCir = (int) array.getDimension(R.styleable.DrawView_inner_cir, DEFAULT_INNER);
            mInnerColor = array.getColor(R.styleable.DrawView_inner_color, DEFAULT_INNER_COLOR);
            mDegree = array.getInteger(R.styleable.DrawView_degree, DEFAULT_DEGREE);
            array.recycle();
        }

    }

    /**
     * 重写onMeasure
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //要绘制的长和宽为
        mWidth = mHeight = mInnerCir * 2 + mFirstWidth * 2 + mSecondWidth * 2;
        setMeasuredDimension(mWidth, mHeight);
        //中心点
        mCenterPoint = new Point(mWidth / 2, mHeight / 2);
        //位置的获取
        mInnerRectF = new RectF(
                mCenterPoint.x - mInnerCir,
                mCenterPoint.y - mInnerCir,
                mCenterPoint.x + mInnerCir,
                mCenterPoint.y + mInnerCir);
        mFirstRectF = new RectF(mCenterPoint.x - mInnerCir - mFirstWidth / 2,
                mCenterPoint.y - mInnerCir - mFirstWidth / 2,
                mCenterPoint.x + mInnerCir + mFirstWidth / 2,
                mCenterPoint.y + mInnerCir + mFirstWidth / 2);
        mSecondRectF = new RectF(mCenterPoint.x - mInnerCir - mFirstWidth - mSecondWidth / 2,
                mCenterPoint.y - mInnerCir - mFirstWidth - mSecondWidth / 2,
                mCenterPoint.x + mInnerCir + mFirstWidth + mSecondWidth / 2,
                mCenterPoint.y + mInnerCir + mFirstWidth + mSecondWidth / 2);


    }

    /**
     * 通过角度，宽度，icon在画布的特定位置绘制出icon
     *
     * @param canvas
     * @param degree
     * @param width
     * @param drawable
     */

    private void drawDrawable(Canvas canvas, float degree, int width, Drawable drawable) {
        int x = (int) (Math.cos(degree / 180 * Math.PI) * width);
        int y = (int) (Math.sin(degree / 180 * Math.PI) * width);
        Point point = new Point(mCenterPoint.x + x, mCenterPoint.y + y);
        drawable.setBounds(
                point.x - drawable.getIntrinsicWidth() / 2,
                point.y - drawable.getIntrinsicHeight() / 2,
                point.x + drawable.getIntrinsicWidth() / 2,
                point.y + drawable.getIntrinsicHeight() / 2);
        drawable.draw(canvas);
    }

    /**
     * 重写onDraw
     *
     * @param canvas
     */

    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setColor(mInnerColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawOval(mInnerRectF, mPaint);
        drawDrawable(canvas, 0, 0, mMainIcon);
        mPaint.setStrokeWidth(mFirstWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        //判断是否正在展开第一圈
        if (isFirst) {
            mPaint.setColor(mFirstColor);
            canvas.drawArc(mFirstRectF, 0, mFirstDrawDegree, false, mPaint);
            //要绘制的icon中心点到控件中心点的距离
            int width = mInnerCir + mFirstWidth / 2;
            //如果角度mFirstDrawDegree > 50开始绘制第一个icon下面相同
            if (mFirstDrawDegree > 50) {
                float degree = mFirstDrawDegree - 20;
                drawDrawable(canvas, degree, width, mFirstDrawableList.get(0));
            }

            if (mFirstDrawDegree > 170) {
                float degree = mFirstDrawDegree - 20 - 120;
                drawDrawable(canvas, degree, width, mFirstDrawableList.get(1));
            }

            if (mFirstDrawDegree > 290) {
                float degree = mFirstDrawDegree - 20 - 120 * 2;
                drawDrawable(canvas, degree, width, mFirstDrawableList.get(2));
            }
        }
        if (isSecond) {
            mPaint.setColor(mSecondColor);
            canvas.drawArc(mSecondRectF, 0, mSecondDrawDegree, false, mPaint);
            int width = mInnerCir + mFirstWidth + mSecondWidth / 2;
            if (mSecondDrawDegree > 20) {
                float degree = mSecondDrawDegree - 20;
                drawDrawable(canvas, degree, width, mSecondDrawableList.get(0));
            }
            if (mSecondDrawDegree > 110) {
                float degree = mSecondDrawDegree - 20 - 90;
                drawDrawable(canvas, degree, width, mSecondDrawableList.get(1));
            }
            if (mSecondDrawDegree > 200) {
                float degree = mSecondDrawDegree - 20 - 90 * 2;
                drawDrawable(canvas, degree, width, mSecondDrawableList.get(2));
            }
            if (mSecondDrawDegree > 290) {
                float degree = mSecondDrawDegree - 20 - 90 * 3;
                drawDrawable(canvas, degree, width, mSecondDrawableList.get(3));
            }
        }
        //在回收的时候，要判断后控件在什么时候消失就行了
        if (isEndFirst) {
            float firstEndDegree = 360 - mFirstDrawDegree;
            mPaint.setColor(mFirstColor);
            canvas.drawArc(mFirstRectF, 0, firstEndDegree, false, mPaint);
            int width = mInnerCir + mFirstWidth / 2;
            float mMenu1Degree = 30 - mFirstDrawDegree;
            float mMenu2Degree = 150 - mFirstDrawDegree;
            float mMenu0Degree = 270 - mFirstDrawDegree;
            if (mFirstDrawDegree < 30) {
                drawDrawable(canvas, mMenu1Degree, width, mFirstDrawableList.get(0));
                drawDrawable(canvas, mMenu2Degree, width, mFirstDrawableList.get(2));
                drawDrawable(canvas, mMenu0Degree, width, mFirstDrawableList.get(1));
            } else if (mFirstDrawDegree < 150) {
                drawDrawable(canvas, mMenu2Degree, width, mFirstDrawableList.get(2));
                drawDrawable(canvas, mMenu0Degree, width, mFirstDrawableList.get(1));
            } else if (mFirstDrawDegree < 270) {
                drawDrawable(canvas, mMenu0Degree, width, mFirstDrawableList.get(1));
            }
        }
        if (isEndSecond) {
            float secondEndDegree = 360 - mSecondDrawDegree;
            mPaint.setColor(mSecondColor);
            int width = mInnerCir + mFirstWidth + mSecondWidth / 2;
            canvas.drawArc(mSecondRectF, 0, secondEndDegree, false, mPaint);
            float mMenu3Degree = 0 - mSecondDrawDegree;
            float mMenu4Degree = 270 - mSecondDrawDegree;
            float mMenu5Degree = 180 - mSecondDrawDegree;
            float mMenu6Degree = 90 - mSecondDrawDegree;
            if (mSecondDrawDegree < 90) {
                drawDrawable(canvas, mMenu4Degree, width, mSecondDrawableList.get(1));
                drawDrawable(canvas, mMenu5Degree, width, mSecondDrawableList.get(2));
                drawDrawable(canvas, mMenu6Degree, width, mSecondDrawableList.get(3));
            } else if (mSecondDrawDegree < 180) {
                drawDrawable(canvas, mMenu4Degree, width, mSecondDrawableList.get(1));
                drawDrawable(canvas, mMenu5Degree, width, mSecondDrawableList.get(2));
            } else if (mSecondDrawDegree < 270) {
                drawDrawable(canvas, mMenu4Degree, width, mSecondDrawableList.get(1));
            }


        }

    }

    /**
     * 展开第一圈
     */

    public void startFirst() {
        if (isStartFirstStop) {
            isStartFirstStop = false;
            isFirst = true;
            isEndFirst = false;
            mFirstDrawDegree = 0;
            new MyFirstThread(this).start();
        }
    }

    /**
     * 展开第二圈
     */

    public void startSecond() {
        if (isStartSecondStop) {
            isStartSecondStop = false;
            isSecond = true;
            isEndSecond = false;
            mSecondDrawDegree = 0;
            if (isFirstShow())
                new MySecondThread(this).start();
        }
    }

    /**
     * 回收第一圈
     */

    public void endFirst() {
        if (isEndFirstStop) {
            isEndFirstStop = false;
            isFirst = false;
            isEndFirst = true;
            mFirstDrawDegree = 0;
            new MyFirstThreadEnd(this).start();
        }
    }

    /**
     * 回收第二圈
     */


    public void endSecond() {
        if (isEndSecondStop) {
            isEndSecondStop = false;
            isSecond = false;
            isEndSecond = true;
            mSecondDrawDegree = 0;
            new MySecondThreadEnd(this).start();
        }

    }

    /**
     * 判断点击事件
     *
     * @param event
     * @return
     */

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                int x = (int) event.getX();
                int y = (int) event.getY();
                if (isFirstShow) {
                    for (int i = 0; i < mFirstDrawableList.size(); i++) {
                        //因为在绘制icon的过程中已经将icon在控件的位置setBounds了，所以可以根据这个来判断
                        if (mFirstDrawableList.get(i).getBounds().contains(x, y)) {
                            if (null != mOnDrawClickListener)
                                //控件的位置是从绘制的第一个控件逆时针开始算，下同
                                mOnDrawClickListener.onClick(this, i, true, false, false);
                        }
                    }
                }
                if (isSencondShow) {
                    for (int i = 0; i < mSecondDrawableList.size(); i++) {
                        if (mSecondDrawableList.get(i).getBounds().contains(x, y)) {
                            if (null != mOnDrawClickListener)
                                mOnDrawClickListener.onClick(this, i, false, true, false);
                        }
                    }
                }
                //判断是否在内圆，点击的点和中心点的距离是否小于或者等于半径
                int r = (int) Math.sqrt(Math.pow(x - mCenterPoint.x, 2) + Math.pow(y - mCenterPoint.y, 2));
                if (r <= mInnerCir) {
                    if (null != mOnDrawClickListener)
                    mOnDrawClickListener.onClick(this, 0, false, false, true);
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return super.onTouchEvent(event);
    }

    /**
     * 展开第一圈的角度变化线程
     */
    private class MyFirstThread extends Thread {
        private WeakReference<DrawProgressView> mTarget;

        public MyFirstThread(DrawProgressView view) {
            mTarget = new WeakReference<DrawProgressView>(view);
        }

        @Override
        public void run() {
            while (!interrupted()) {
                if (null == mTarget.get())
                    break;
                if (410 == mTarget.get().mFirstDrawDegree) {
                    break;
                }
                if (180 < mTarget.get().mFirstDrawDegree) {
                    try {
                        sleep(3);
                        mTarget.get().mFirstDrawDegree += mTarget.get().mDegree;
                        mTarget.get().postInvalidate();
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }

                } else {
                    try {
                        sleep(5);
                        mTarget.get().mFirstDrawDegree += mTarget.get().mDegree;
                        mTarget.get().postInvalidate();
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
            isFirstShow = true;
            isStartFirstStop = true;
        }
    }

    /**
     * 展开第二圈的角度变化线程
     */

    private class MySecondThread extends Thread {
        private WeakReference<DrawProgressView> mTarget;

        public MySecondThread(DrawProgressView view) {
            mTarget = new WeakReference<DrawProgressView>(view);
        }

        @Override
        public void run() {
            while (!interrupted()) {
                if (null == mTarget.get())
                    break;
                if (380 == mTarget.get().mSecondDrawDegree)
                    break;
                if (180 < mTarget.get().mSecondDrawDegree) {
                    try {
                        sleep(5);
                        mTarget.get().mSecondDrawDegree += mTarget.get().mDegree;
                        mTarget.get().postInvalidate();
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }

                } else {
                    try {
                        sleep(10);
                        mTarget.get().mSecondDrawDegree += mTarget.get().mDegree;
                        mTarget.get().postInvalidate();
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
            isSencondShow = true;
            isStartSecondStop = true;
        }
    }

    /**
     * 回收第一圈的角度变化线程
     */

    private class MyFirstThreadEnd extends Thread {
        private WeakReference<DrawProgressView> mTarget;

        public MyFirstThreadEnd(DrawProgressView view) {
            mTarget = new WeakReference<DrawProgressView>(view);
        }

        @Override
        public void run() {
            while (!interrupted()) {
                if (null == mTarget.get())
                    break;
                if (360 == mTarget.get().mFirstDrawDegree) {
                    break;
                }
                try {
                    sleep(5);
                    mTarget.get().mFirstDrawDegree += mTarget.get().mDegree;
                    mTarget.get().postInvalidate();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            isFirstShow = false;
            isEndFirstStop = true;
        }
    }

    /**
     * 回收第二圈的角度变化线程
     */

    private class MySecondThreadEnd extends Thread {
        private WeakReference<DrawProgressView> mTarget;

        public MySecondThreadEnd(DrawProgressView view) {
            mTarget = new WeakReference<DrawProgressView>(view);
        }

        @Override
        public void run() {
            while (!interrupted()) {
                if (null == mTarget.get())
                    break;
                if (360 == mTarget.get().mSecondDrawDegree) {
                    break;
                }
                try {
                    sleep(8);
                    mTarget.get().mSecondDrawDegree += mTarget.get().mDegree;
                    mTarget.get().postInvalidate();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            isSencondShow = false;
            isEndSecondStop = true;
        }
    }

    public boolean isSencondShow() {
        return isSencondShow;
    }

    public boolean isFirstShow() {
        return isFirstShow;
    }
}

   加上一些属性的定义：

<resources>
    <declare-styleable name="DrawView">
        <attr name="inner_cir" format="dimension" />
        <attr name="first_width" format="dimension" />
        <attr name="second_width" format="dimension" />
        <attr name="first_color" format="color" />
        <attr name="second_color" format="color" />
        <attr name="inner_color" format="color"/>
        <attr name="degree" format="integer"/>
    </declare-styleable>
</resources>

   其实效果挺不错的，理解了是通过不断重绘得出的代码应该没什么难度，可以考虑icon不固定让动态添加icon，然后计算角度就可以了。

  下面是Activity的代码

package com.example.arze.momentview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;


public class MainActivity extends AppCompatActivity implements DrawProgressView.OnDrawClickListener {
    DrawProgressView drawProgressView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawProgressView = ((DrawProgressView) findViewById(R.id.drawProgressView));
        drawProgressView.setOnDrawClickListener(this);
    }


    @Override
    public void onClick(View view, int position, boolean isFirst, boolean isSecond, boolean isCenter) {

        DrawProgressView drawProgressView = (DrawProgressView) view;
        if (isCenter) {
            if (drawProgressView.isSencondShow()) {
                drawProgressView.endSecond();
            }
            if (drawProgressView.isFirstShow()) {
                drawProgressView.endFirst();
            } else {
                drawProgressView.startFirst();
            }
        }

        if (isFirst) {
            if (1 == position) {
                if (drawProgressView.isSencondShow())
                    drawProgressView.endSecond();
                else
                    drawProgressView.startSecond();
            }
        }

    }
}