Android Browser学习十快捷菜单模块: PieMenu的实现

最新推荐文章于 2024-03-16 09:54:35 发布

weixin_33694172

最新推荐文章于 2024-03-16 09:54:35 发布

阅读量214

点赞数

文章标签： javascript 移动开发 python ViewUI

原文链接：https://my.oschina.net/sfshine/blog/213546

版权

2019独角兽企业重金招聘Python工程师标准>>>

今天分享一下PieMenu的实现, 可以理解为在一个Framelayout上绘制一个PieMenu: 代码在PieMenu.java中

其添加到窗口的代码在 PieControlBase中

  protected void attachToContainer(FrameLayout container) {
        if (mPie == null) {
            mPie = new PieMenu(mActivity);
            LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT);
            mPie.setLayoutParams(lp);
            populateMenu();//添加pieitem
            mPie.setController(this);
        }
        container.addView(mPie);
    }

我们知道这个PieMenu是当用户按住屏幕边缘的时候出现的, 也就是是说应该在Touch的时候show了PieMenu:

看他的Action_down的时候:

if (MotionEvent.ACTION_DOWN == action) {//用户按下屏幕
            if ((x > getWidth() - mSlop) || (x < mSlop)) {//判断发现需要显示PieMenu, 于是执行show
                setCenter((int) x, (int) y); //设置pie的位置
                show(true);
                return true;//返回true表示将来的move 和up事件都用这个view来处理不用dispatch和intercept了.
            }
        }

通过show函数就可以把整个Menu显示出来了:

/**
     * guaranteed has center set
     * @param show
     * 显示piemenu
     */
    private void show(boolean show) {
        mOpen = show;
        if (mOpen) {
            if (mController != null) {
                boolean changed = mController.onOpen();
            }
            layoutPie();
        }
        if (!show) {
            mCurrentItem = null;
            mPieView = null;
        }
        invalidate();
    }

layoutPie会遍历每个item把他绘制到指定的位置, 可以看到核心是使用 path把每个扇形绘制出来的.

private void layoutPie() {//绘制每个pieitem的位置
        float emptyangle = (float) Math.PI / 16;//空白间隙
        int rgap = 2;
        int inner = mRadius + rgap;
        int outer = mRadius + mRadiusInc - rgap;
        int radius = mRadius;
        int gap = 1;
        for (int i = 0; i < mLevels; i++) {
            int level = i + 1;
            float sweep = (float) (Math.PI - 2 * emptyangle) / mCounts[level];//每个pieitem占用的度数 ,总的度数是pi/2 
            float angle = emptyangle + sweep / 2;//为了使 piememu上下对称
            for (PieItem item : mItems) {
                if (item.getLevel() == level) {
                    View view = item.getView();
                    view.measure(view.getLayoutParams().width,
                            view.getLayoutParams().height);
                    int w = view.getMeasuredWidth();//计算其宽度和高度
                    int h = view.getMeasuredHeight();
                    int r = inner + (outer - inner) * 2 / 3;//扇形的半径
                    int x = (int) (r * Math.sin(angle));//使用三角函数 计算其x y的位置 
                    int y = mCenter.y - (int) (r * Math.cos(angle)) - h / 2;
                    if (onTheLeft()) {//如果是在左边
                        x = mCenter.x + x - w / 2;
                    } else {
                        x = mCenter.x - x - w / 2;
                    }
                    view.layout(x, y, x + w, y + h); //设置区位置
                    float itemstart = angle - sweep / 2;
                    Path slice = makeSlice(getDegrees(itemstart) - gap,
                            getDegrees(itemstart + sweep) + gap,
                            outer, inner, mCenter); //绘制扇形
                    item.setGeometry(itemstart, sweep, inner, outer, slice);
                    angle += sweep; //下一个扇形在这个扇形的下一个位置
                }
            }
            inner += mRadiusInc;
            outer += mRadiusInc;
        }
    }

然后就是onDraw进行绘制每个扇形了:

  @Override
    protected void onDraw(Canvas canvas) {
        if (mOpen) {
            int state;
            if (mUseBackground) {
                int w = mBackground.getIntrinsicWidth();
                int h = mBackground.getIntrinsicHeight();
                int left = mCenter.x - w;
                int top = mCenter.y - h / 2;
                mBackground.setBounds(left, top, left + w, top + h);
                state = canvas.save();
                if (onTheLeft()) {
                    canvas.scale(-1, 1);//翻转
                }
                mBackground.draw(canvas);
                canvas.restoreToCount(state);
            }
            for (PieItem item : mItems) {//遍历每一个item将其绘制
                Paint p = item.isSelected() ? mSelectedPaint : mNormalPaint; //选择选择的画笔还是normal画笔?
                state = canvas.save();
                if (onTheLeft()) {//如果点击的在左边
                    canvas.scale(-1, 1);
                }
                drawPath(canvas, item.getPath(), p);
                canvas.restoreToCount(state);//绘制完了回到以前的状态绘制item
                drawItem(canvas, item);
            }
            if (mPieView != null) {//绘制piemenu的sbumenu 比如tab的缩略图
                mPieView.draw(canvas);
            }
        }
    }

然后是Move事件了, 在Movel事件的时候会判断用户手指落在哪里了,然后设置那个扇形为选中, 绘制不再赘述

else if (MotionEvent.ACTION_MOVE == action) {
            boolean handled = false;
            PointF polar = getPolar(x, y);//根据xy 求出点击的那个扇面.
            int maxr = mRadius + mLevels * mRadiusInc + 50;
            if (mPieView != null) {
                handled = mPieView.onTouchEvent(evt);
            }
            if (handled) {
                invalidate();
                return false;
            }
            if (polar.y > maxr) {//可能没有选中, 就恢复以前的状态
                deselect();
                show(false);
                evt.setAction(MotionEvent.ACTION_DOWN);
                if (getParent() != null) {
                    ((ViewGroup) getParent()).dispatchTouchEvent(evt);
                }
                return false;
            }
            PieItem item = findItem(polar);//根据给定的点 求出点击的那个扇面.
            if (mCurrentItem != item) {
                onEnter(item);
                if ((item != null) && item.isPieView()) {//类型tab, 含有二级的pieview, 就展现那个listview或者其他
                    int cx = item.getView().getLeft() + (onTheLeft()
                            ? item.getView().getWidth() : 0);
                    int cy = item.getView().getTop();
                    mPieView = item.getPieView();
                    layoutPieView(mPieView, cx, cy,
                            (item.getStartAngle() + item.getSweep()) / 2);
                }
                invalidate();
            }
        }

在用户放开手的时候也就是Up的时候会通知controller 选中了哪个扇形: , 绘制不再赘述

else if (MotionEvent.ACTION_UP == action) {
            if (mOpen) {//在手放开的时候如果piemenu在显示那么就开始执行相应的点击操作, 并恢复touch前的状态
                boolean handled = false;
                if (mPieView != null) {
                    handled = mPieView.onTouchEvent(evt);
                }
                PieItem item = mCurrentItem;
                deselect();//取消选中
                show(false);//关闭menu
                if (!handled && (item != null)) {
                    item.getView().performClick();//相应相关item的点击事件
                }
                return true;
            }
        }

完全自绘的viewgroup, 对我们学习还是帮助很大的.Framelayout只是提供了一个"舞台"而已, 所有的绘制和事件处理都是我们自己实现的, 对于一些复杂的需求, 我们可以这样实现.

转载于:https://my.oschina.net/sfshine/blog/213546