关闭

自定义卫星菜单CustomArcMenu

标签: ArcMenu
339人阅读 评论(0) 收藏 举报
分类:

现在这种效果的开源项目,确实蛮多的。SatelliteMenu,ARCMenu都是。

下面是我自己仿照他们写的:

先交代一下具体步骤:

自定义卫星菜单:

1,自定义属性 

    a,自定义attr属性 

    b,xml布局文件中引用

    c,CustomArcMenu中获取自定义属性值

2,onMesure测量自控件的大小 

3,onLayout 布置自控件。

4,添加点击事件,添加主按钮与子菜单的按钮动画效果 

    a,主按钮的旋转动画

    b,子菜单的旋转和平移动画 

 5,添加子菜单的点击事件

展示效果图:点击主按钮,子按钮弹射出去并且呈弧形展示,再次点击主按钮,子菜单按钮返回主按钮位置并消失,点击子菜单按钮,被点击子菜单按钮放大并消失

其他子菜单按钮缩小消失。下图是点击展开后的效果。



下面是具体的代码实现:

1,自定义属性 

    a,自定义attr属性 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <attr name="position">
        <enum name="left_top" value="0"></enum>
        <enum name="left_bottom" value="1"></enum>
        <enum name="right_top" value="2"></enum>
        <enum name="right_bottom" value="3"></enum>
    </attr>
    
    <attr name="radius" format="dimension"></attr>
    
    <declare-styleable name="CustomArcMenu">
        <attr name="position"/>
        <attr name="radius"/>
    </declare-styleable>
    
</resources>

    b,xml布局文件中引用

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:wang="http://schemas.android.com/apk/res/com.wang.demo_android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <ListView 
        android:id="@+id/lv_content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></ListView>
    
    <com.wang.demo_android.view.CustomArcMenu
        android:id="@+id/custom_arcmenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        wang:radius="140dp"
        wang:position="left_bottom">
        
        <ImageView 
            android:id="@+id/arc_main"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:padding="5dp"
            android:src="@drawable/main"/>
        
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tag="search"
            android:src="@drawable/ic_search"/>
                
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tag="camera"
            android:src="@drawable/ic_camera"/>
                        
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tag="notifaction"
            android:src="@drawable/ic_notifaction"/>
                                
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tag="music"
            android:src="@drawable/ic_music"/>
    </com.wang.demo_android.view.CustomArcMenu> 
    
</FrameLayout>

    c,CustomArcMenu中获取自定义属性值

    public CustomArcMenu(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

        TypedArray array = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.CustomArcMenu, 0, defStyleRes);
        int position = array.getInt(R.styleable.CustomArcMenu_position, POS_RIGHTT_BOTTOM);
        switch (position) {
            case POS_LEFT_TOP:
                mPosition = POSITION.LEFT_TOP;
                break;
            case POS_LEFT_BOTTOM:
                mPosition = POSITION.LEFT_BOTTOM;
                break;
            case POS_RIGHT_TOP:
                mPosition = POSITION.RIGHT_TOP;
                break;
            case POS_RIGHTT_BOTTOM:
                mPosition = POSITION.RIGHT_BOTTOM;
                break;
        }
        // 设置半径的默认值:100dp
        mRadius = (int) array.getDimension(R.styleable.CustomArcMenu_radius, (int) TypedValue
                .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources()
                        .getDisplayMetrics()));

        Log.i(tag, "positon:" + mPosition + " radius:" + mRadius);

        array.recycle();// 回收

    }

2,onMesure测量自控件的大小 

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int count = getChildCount();
        for (int i = 0; i < count; i++) {
            // 测量child
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

3,onLayout 布置自控件。

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        if (changed) {
            // 定位主菜单按钮
            layoutMainButton();
            // 定位子菜单按钮
            layoutMenuItem();

        }

    }

    /**
     * 定位子菜单按钮
     */
    private void layoutMenuItem() {
        int count = getChildCount();
        for (int i = 0; i < count - 1; i++) {
            View child = getChildAt(i + 1);
            int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
            int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
            // 右上和右下位置
            if (mPosition == POSITION.RIGHT_TOP || mPosition == POSITION.RIGHT_BOTTOM) {
                cl = getMeasuredWidth() - cl - child.getMeasuredWidth();
            }
            // 左下和右下位置
            if (mPosition == POSITION.LEFT_BOTTOM || mPosition == POSITION.RIGHT_BOTTOM) {
                ct = getMeasuredHeight() - ct - child.getMeasuredHeight();
            }

            child.layout(cl, ct, cl + child.getMeasuredWidth(), ct + child.getMeasuredHeight());
            child.setVisibility(View.GONE);
        }

    }

    /**
     * 定位主菜单按钮
     * 
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    private void layoutMainButton() {
        mMainButton = getChildAt(0);
        if (mMainButton == null) {
            return;
        }
        mMainButton.setOnClickListener(this);
        int l = 0;
        int t = 0;
        int width = mMainButton.getMeasuredWidth();
        int height = mMainButton.getMeasuredHeight();
        if (mPosition == POSITION.LEFT_BOTTOM || mPosition == POSITION.RIGHT_BOTTOM) {
            t = getMeasuredHeight() - height;
        }
        if (mPosition == POSITION.RIGHT_TOP || mPosition == POSITION.RIGHT_BOTTOM) {
            l = getMeasuredWidth() - width;
        }
        mMainButton.layout(l, t, l + width, t + height);
    }

4,添加点击事件,添加主按钮与子菜单的按钮动画效果 

    a,主按钮的旋转动画

    @Override
    public void onClick(View v) {
        rotateMainButton(v, 0f, 360f, 300);
        toggleMenu(300);
    }

    /**
     * 启动主按钮的动画效果
     */
    private void rotateMainButton(View v, float start, float end, int duration) {
        RotateAnimation rotateAnim = new RotateAnimation(start, end, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnim.setDuration(duration);
        rotateAnim.setFillAfter(true);
        v.startAnimation(rotateAnim);
    }

    b,子菜单的旋转和平移动画 

    /**
     * 启动子菜单的动画
     */
    public void toggleMenu(int duration) {
        int count = getChildCount();
        for (int i = 0; i < count - 1; i++) {
            final View child = getChildAt(i + 1);
            child.setVisibility(View.VISIBLE);

            int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
            int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
            int xFlag = 1;
            int yFlag = 1;

            if (mPosition == POSITION.LEFT_TOP || mPosition == POSITION.LEFT_BOTTOM) {
                xFlag = -1;
            }
            if (mPosition == POSITION.LEFT_TOP || mPosition == POSITION.RIGHT_TOP) {
                yFlag = -1;
            }
            AnimationSet animSet = new AnimationSet(true);
            // 平移动画
            TranslateAnimation translateAnim = null;
            if (mCurrentStatus == STATUS.CLOSE) {
                translateAnim = new TranslateAnimation(xFlag * cl, 0, yFlag * ct, 0);
                child.setClickable(true);
                child.setFocusable(true);
            } else {
                translateAnim = new TranslateAnimation(0, xFlag * cl, 0, yFlag * ct);
                child.setClickable(false);
                child.setFocusable(false);
            }
            translateAnim.setDuration(duration);
            translateAnim.setFillAfter(true);
            // 使得动画具有较明显的先后循序
            translateAnim.setStartOffset(i * 100 / count);
            translateAnim.setAnimationListener(new Animation.AnimationListener() {

                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    if (mCurrentStatus == STATUS.CLOSE) {
                        child.setVisibility(View.GONE);
                    }
                }
            });
            // 旋转动画
            RotateAnimation rotateAnim = new RotateAnimation(0, 720f, Animation.RELATIVE_TO_SELF,
                    0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rotateAnim.setDuration(duration);
            rotateAnim.setFillAfter(true);

            animSet.addAnimation(rotateAnim);
            animSet.addAnimation(translateAnim);
            // 开始动画
            child.startAnimation(animSet);

            final int pos = i + 1;
            child.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    if (mOnMenuItemClickListener != null) {
                        mOnMenuItemClickListener.OnClick(v, pos);
                    }
                    // 子菜单按钮的点击事件
                    menuItemAnim(pos);
                    // 改变状态
                    changeStatus();
                }
            });
        }
        changeStatus();
    }

 5,添加子菜单的点击事件

    /**
     * 添加item的点击动画
     * 
     * @param pos
     */
    private void menuItemAnim(int pos) {
        int count = getChildCount();
        for (int i = 0; i < count-1; i++) {
            View child = getChildAt(i + 1);
            if ((i + 1) == pos) {
                child.startAnimation(getScaleBig(300));
            } else {
                child.startAnimation(getScaleSmall(300));
            }
            
            child.setClickable(false);
            child.setFocusable(false);
        }
    }

    /**
     * 返回一个缩小的动画
     * 
     * @return
     */
    private Animation getScaleSmall(int duration) {
        AnimationSet animSet = new AnimationSet(true);
        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0f, 1.0f, 0, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnim.setDuration(duration);
        scaleAnim.setFillAfter(true);
        
        AlphaAnimation alphaAnim = new AlphaAnimation(1.0f, 0f);
        alphaAnim.setDuration(duration);
        alphaAnim.setFillAfter(true);
        
        animSet.addAnimation(alphaAnim);
        animSet.addAnimation(scaleAnim);
        animSet.setFillAfter(true);
        return animSet;
    }

    private Animation getScaleBig(int duration) {
        AnimationSet animSet = new AnimationSet(true);
        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f, Animation.RELATIVE_TO_SELF,
                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnim.setDuration(duration);
        //scaleAnim.setFillAfter(true);
        
        AlphaAnimation alphaAnim = new AlphaAnimation(1.0f, 0f);
        alphaAnim.setDuration(duration);
        //alphaAnim.setFillAfter(true);
        
        animSet.addAnimation(alphaAnim);
        animSet.addAnimation(scaleAnim);
        animSet.setFillAfter(true);
        return animSet;
    }

    /**
     * 改变当前的状态
     */
    private void changeStatus() {
        mCurrentStatus = mCurrentStatus == STATUS.CLOSE ? STATUS.OPEN : STATUS.CLOSE;
    }
注意item个数一定要大于等于三个,否则会有异常

类的下载






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28972次
    • 积分:1225
    • 等级:
    • 排名:千里之外
    • 原创:97篇
    • 转载:5篇
    • 译文:0篇
    • 评论:1条
    最新评论