美文网首页
圆盘形菜单

圆盘形菜单

作者: i冰点 | 来源:发表于2016-08-07 17:49 被阅读202次

项目中需要定义一个圆盘形选择菜单,效果如下图:


圆盘形菜单

1、自定义View

思路是

1、定义一个类存储每一个Item的信息,:
    class Item {
        //图片
        Bitmap bitmap;
        //每个Item旋转的角度
        float angle;
        //图片中心点,x坐标
        float x;
        //图片中心点,y坐标
        float y;
        String id;
        ...
    }
2、通过代码传入基本的信息,初始化Items,包括角度、X、Y坐标、bitmap和其他的信息
求Item中心点坐标

通过三角函数值,得到x、y坐标:

x=pointX + (float) (radius * Math.cos(item.angle * Math.PI / 180))

代码如下:

    private void setUpItems() {
        ...
        //第一个Item默认是0°
        int angle = 0;
        //每个Item间距相同的度数= 360 / itemCount
        degreeDelta = 360 / itemCount;
        //初始化每个Item
        for (int index = 0; index < itemCount; index++) {
            Item item = new Item();
            item.angle = angle;
            item.x = pointX + (float) (radius * Math.cos(item.angle * Math.PI / 180));
            item.y = pointY + (float) (radius * Math.sin(item.angle * Math.PI / 180));
            item.bitmap = resizeImage(ImageLoader.getInstance().loadImageSync(selectItems.get(index).getQue_img(), options));
            ...
            items.add(item);
            angle += degreeDelta;
        }
          
    }

x、y都在以radius 为半径的圆A上,其中圆A的中心点是pointX 、pointY (位于屏幕中心)

3、draw

移动画布,即坐标系到屏幕的中心,

    @Override
    public void onDraw(Canvas canvas) {
        ...
        canvas.translate(getMeasuredWidth()/2,getMeasuredHeight()/2);
        for (int index = 0; index < itemCount; index++) {
            ...
            canvas.drawBitmap(items.get(index).bitmap, items.get(index).x - bitmap.getWidth() / 2,
                    items.get(index).y - bitmap.getHeight() / 2, null);
        }
    }
4、为View添加动画

继承Animation,在动画执行的过程中,动态改变角度、x、y值


    class MyAnimation extends Animation {
        ...
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            //每次执行动画,运行0.5°
            float angle = items.get(0).angle += 0.5;
            for (int index = 0; index < itemCount; index++) {
                Item item = items.get(index);
                item.angle = angle;
                item.x = pointX + (float) (radius * Math.cos(item.angle * Math.PI / 180));
                item.y = pointY + (float) (radius * Math.sin(item.angle * Math.PI / 180));
                angle += degreeDelta;
                angle = angle % 360;
            }
            postInvalidate();
        }
    }
5、在触摸事件ACTION_UP发生时,判断该点是否在Item内,如果在Item内,则产生点击事件

怎么判断一个点是否在一个圆内呢?
可以通过坐标差的平方根与半径进行对比,小于半径在圆内

判断 是否在Item内
    /**
     * 确定触摸事件(ACTION_UP)发生的位置是否在,item(小圆圈)内
     * @param x
     * @param y
     */
    private void confirmPointPosition(float x, float y) {
        ...
        for (int index = 0; index < itemCount; index++) {
            float imgCenterX = items.get(index).x;
            float imgCenterY = items.get(index).y;
            if (items.get(index).bitmap == null) {
                break;
            }
            float imgCircle = items.get(index).bitmap.getWidth();
            double r = Math.sqrt(Math.pow(x - imgCenterX, 2) + Math.pow(y - imgCenterY, 2));
            if (r <= imgCircle / 2) {
                ...
                listener.onClick(typeId, typeName, ageId);
            }
        }
    }

代码:RorateCircleDemo

2、自定义ViewGroup

自定义ViewGroup
  • 将菜单项添加到ViewGroup:初始化item view,绑定数据
  • 测量:先测量自身大小,再测量item view大小
  • 布局:计算每个item的left、top的位置

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="defaultMenuLayout" format="reference"/>
    <declare-styleable name="CircleMenuLayout">
        <attr name="item_layout" format="reference"/>
    </declare-styleable>
</resources>

style.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        ...
        <item name="defaultMenuLayout">@style/defaultCircleMenuLayoutStyle</item>
    </style>
    <style name="defaultCircleMenuLayoutStyle">
        <item name="item_layout">@layout/default_layout_circle_item</item>
    </style>
</resources>
public class CircleMenuLayout extends ViewGroup {

    private int menuItemLayoutId= R.layout.default_layout_circle_item;

    private int[] items=new int[]{R.mipmap.circle_item_1,R.mipmap.circle_item_2,R.mipmap.circle_item_3,R.mipmap.circle_item_4
            ,R.mipmap.circle_item_5,R.mipmap.circle_item_6};

    private int itemCount;
    private double startAngle;
    private double swapAngle;
    private int radius;
    private float itemRadio=0.25f;
    private float paddingRadio=0.05f;

    public CircleMenuLayout(Context context) {
        this(context,null);
    }

    public CircleMenuLayout(Context context, AttributeSet attrs) {
        this(context, attrs,R.attr.defaultMenuLayout);
    }

    public CircleMenuLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.CircleMenuLayout,defStyleAttr,0);
        menuItemLayoutId=typedArray.getResourceId(R.styleable.CircleMenuLayout_item_layout,R.layout.default_layout_circle_item);
        typedArray.recycle();
        setPadding(0,0,0,0);

        init();
    }

    private void init() {
        itemCount=items.length;
        startAngle=0;
        swapAngle=360/itemCount;
        buildMenuItems();
    }

    //将菜单项添加到ViewGroup
    private void buildMenuItems() {
        for (int i=0;i<itemCount;i++){
            View itemView=inflaterMenuView(i);
            initMenuView(itemView,i);
            addView(itemView);
        }
    }

    private void initMenuView(View itemView, final int position) {
        ImageView img= (ImageView) itemView.findViewById(R.id.img);
        img.setImageResource(items[position]);
    }

    private View inflaterMenuView(final int position) {
        LayoutInflater inflater=LayoutInflater.from(getContext());
        View view=inflater.inflate(menuItemLayoutId,this,false);
        view.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(),"item : "+position,Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureSelf(widthMeasureSpec,heightMeasureSpec);
        measureMenuItems();
    }

    /**
     * 调用measure方法测量每个子view
     */
    private void measureMenuItems() {
        radius=Math.max(getMeasuredWidth(),getMeasuredHeight());
        int childCount=getChildCount();
        int specMode=MeasureSpec.EXACTLY;
        int specSize= (int) (radius*itemRadio);
        for (int i=0;i<childCount;i++){
            View child=getChildAt(i);
            if (child.getVisibility()==GONE){
                continue;
            }
            int measureSpec=-1;
            measureSpec=MeasureSpec.makeMeasureSpec(specSize,specMode);
            child.measure(measureSpec,measureSpec);
        }

    }

    /**
     * 如果是精确模式,大小是宽高的最小值
     * 如果是最大模式,大小是背景或屏幕的宽
     */
    private void measureSelf(int widthMeasureSpec, int heightMeasureSpec) {
        int reqWidth=0;
        int reqHeight=0;
        int widthSize=MeasureSpec.getSize(widthMeasureSpec);
        int widthMode=MeasureSpec.getMode(widthMeasureSpec);
        int heightSize=MeasureSpec.getSize(heightMeasureSpec);
        int heightMode=MeasureSpec.getMode(heightMeasureSpec);

        if (widthMode!=MeasureSpec.EXACTLY || heightMode!=MeasureSpec.EXACTLY){
            reqWidth=getSuggestedMinimumWidth();
            reqWidth=reqWidth==0?getDefaultWidth():reqWidth;
            reqHeight=getSuggestedMinimumHeight();
            reqHeight=reqHeight==0?getDefaultWidth():reqHeight;
        }else {
            reqWidth=reqHeight=Math.min(widthSize,heightSize);
        }
        setMeasuredDimension(reqWidth,reqHeight);
    }

    private int getDefaultWidth() {
        return getResources().getDisplayMetrics().widthPixels;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount=getChildCount();
        int padding= (int) (radius*paddingRadio);
        int left=0;
        int top=0;
        for (int i=0;i<childCount;i++){
            View child=getChildAt(i);
            if (child.getVisibility()==GONE){
                continue;
            }
            int itemSize=Math.max(child.getMeasuredWidth(),child.getMeasuredHeight());
            startAngle%=360;

            left= (int) (radius/2+(radius/2-padding-itemSize/2)*Math.cos(Math.toRadians(startAngle)))-itemSize/2;
            top= (int) (radius/2+(radius/2-padding-itemSize/2)*Math.sin(Math.toRadians(startAngle)))-itemSize/2;
            child.layout(left,top,left+itemSize,top+itemSize);
            startAngle+=swapAngle;
        }
    }
}

使用适配器,将变化隔离出去
因为每个菜单项都是一个view,可以将加载菜单项的布局、始化菜单项、绑定数据的工作通过adapter分离出去;在CircleMenuLayout 中,仅仅实现测量和布局就行。


public class CircleMenuLayout extends ViewGroup {

    private ListAdapter mAdapter;
    AdapterDataSetObserver mDataSetObserver;

    ...

    public void setAdapter(ListAdapter adapter){
        if (mAdapter != null && mDataSetObserver != null) {
            mAdapter.unregisterDataSetObserver(mDataSetObserver);
        }
        if (adapter!= null){
            this.mAdapter=adapter;
            mDataSetObserver = new AdapterDataSetObserver();
            mAdapter.registerDataSetObserver(mDataSetObserver);
            buildMenuItems();
            requestLayout();
        }
    }

    @Override
    protected void onAttachedToWindow() {
        if (mAdapter!=null){
            buildMenuItems();
        }
        super.onAttachedToWindow();
    }

    private void buildMenuItems() {

        int itemCount=mAdapter.getCount();
        startAngle=0;
        if (itemCount>0){
            swapAngle=360/itemCount;
        }
        for (int i=0;i<itemCount;i++){
            View itemView=mAdapter.getView(i,null,null);
            addView(itemView);
        }
    }

    ...

    private class AdapterDataSetObserver extends DataSetObserver {
        @Override
        public void onChanged() {
            buildMenuItems();
            requestLayout();
        }
        @Override
        public void onInvalidated() {
            buildMenuItems();
            requestLayout();
        }
    }
}

参考:android 源码设计模式

相关文章

  • 圆盘形菜单

    项目中需要定义一个圆盘形选择菜单,效果如下图: 1、自定义View 思路是 1、定义一个类存储每一个Item的信息...

  • 圆盘

    我记得夜里做了一个有趣的梦,但是醒来后怎么也想不起来,我真希望这世上有一个可以记录梦境的机器,这样我就可以把它们保...

  • 每天多懂一点,生活更多彩一些

    亚马逊分级菜单可无延时浏览,利用了子菜单垂线为边,主菜单focus为顶点做三角形的算法。 多看美国公司创业的产品,...

  • 味道

    长方盘形、大圆、中圆、小圆盘形 桌上红的白的绿的黄的, 色彩饱满,热气腾腾, 闭上眼, 轻吸一口气 鲜香从鼻尖窜进...

  • 圆盘梦境

    古语云:日有所思,夜有所梦。平日里闪过脑海的零碎片段,到了夜里,便开始铺展开来,漫无边际。 对于大多数人而言,...

  • 手绘圆盘

  • 黑色圆盘

    “你能描绘它的样子吗?” “一个黑色圆盘,高速旋转着。” “它浮在空中吗?” “它是一种存在。” “它会跟着你的视...

  • 圆盘锯

    课程时间:2020.7.7 课程阶段:《大机械师》 课程主题:《圆盘锯》 课程目标 *学习和认识锯齿的作用 *进一...

  • 开心圆盘

    豆豆昨天晚饭前,他说想吃葡萄,我说:好的,去洗手吧。 他说没有出去,不洗手。 我说,洗手后吃吧。 他马上不高兴了,...

  • 手绘圆盘

    线描艺术是中华民族传统绘画艺术中一种最能代表中国审美意象的样式有着十分悠久的历史和丰富多彩的流派传承,它的发展几乎...

网友评论

      本文标题:圆盘形菜单

      本文链接:https://www.haomeiwen.com/subject/esulsttx.html