自定义卫星菜单CustomArcMenu

最新推荐文章于 2017-03-28 10:48:01 发布
最新推荐文章于 2017-03-28 10:48:01 发布
阅读量667 收藏
点赞数
分类专栏： Android自定义控件 文章标签： ArcMenu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangsongbin893603021/article/details/49907919
版权

现在这种效果的开源项目，确实蛮多的。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个数一定要大于等于三个，否则会有异常

类的下载






小松鼠_莲鹿
关注
专栏目录
卫星菜单实现源码
01-21
本源码实现了一个简单的卫星菜单，作为属性动画的实践。
Satellite_Menu（卫星菜单）
10-27
android-satellite-menu实现点击主按钮，会弹出多个围绕着主按钮排列的子按钮，从而形成一个卫星弹出式菜单。子按钮弹出和消失的动画效果都很棒。这种弹出式菜单按钮应用在Path2.0中。
两种方法实现卫星式菜单
haopengfei91的博客
07-19 305
Animator属性动画 Animation补间动画
一个自定义卫星菜单控件及其使用,仿arcmenu
resonLei的博客
03-28 800
PopMenuView一个简单的卫星菜单控件效果图使用方法配置: 在你的项目的gradle里面添加如下信息： allprojects { repositories { ... //some code maven { url 'https://jitpack.io' } //添加这条信息 } } 在你的module的gradle里面添加依赖： depen
Android实现自定义的卫星式菜单(弧形菜单)详解
01-05
2.自定义ViewGroup来实现卫星式菜单View （1）自定义属性  a. 在attrs.xml中定义属性  b. 在布局中使用自定义属性  c. 在自定义View中读取布局文件中的自定义属性 （2）onMeasure 测量 child 即测量主按钮...
自定义控件卫星菜单
09-28
本教程将深入探讨如何在Android中创建一个自定义的卫星菜单控件。卫星菜单通常是指在点击某个中心按钮后，从中心点向外辐射状展开的一系列子菜单项。这种设计模式常见于导航或者选项展示，具有强烈的视觉效果和交互...
Android 自定义组件卫星菜单的实现
01-05
卫星菜单 ArcMenu 相信大家接触安卓,从新手到入门的过渡,就应该会了解到卫星菜单、抽屉、Xutils、Coolmenu、一些大神封装好的一些组件。这些组件在 Github 上面很容易搜得到，但是有时候打开会发现看不懂里面的...
WPF自定义多级菜单功能
08-06
采用wpf自定义控件，自定义布局，实现后台动态添加多级菜单功能，菜单构成是一级菜单上层小图片，下层菜单名。二级菜单是左侧小图片，右侧是菜单名称。一级和二级菜单有默认背景图片和选中后的图片。点击一级菜单...
js实现自定义右键菜单
11-20
本文实例为大家分享了js实现右键菜单的具体代码，供大家参考，具体内容如下 原理： 1.屏蔽默认的右键菜单 2.点击右键获取位置，让自定义菜单到点击位置上 3.点击左键，自定义菜单消失 代码如下 <!DOCTYPE html> ...
自定义ViewPagerIndicator
平缓而扎实的前进吧。
05-14 764
ViewPagerIndicator是一个开源的类，非常灵活。比如可以实现如下结果：        自己试着自定义了一下，实现类似的结果！ package com.wang.demo_viewpagerindictor.view; import java.util.List; import android.content.Context; import android.content
Android Xfermode类似于刮刮卡效果
平缓而扎实的前进吧。
04-12 710
今天这个项目的名称叫做擦掉乌云你会发现生活的美好！额，不闷骚了！其实就是底层发一张美女的图片，再覆盖一层灰色（模拟乌云），同时触摸监听，使手指触摸的地方的那一层灰色消失（类似于乌云被擦掉了）；ok，我们看一下效果图。不满意请上别处！ 就是类似的效果！代码熟悉后图片你可以随便换哈！ 要实现这种效果，我们用到了Xfermode这个类！对于这个的应用，官方的案例给了很好的说明！ 我
模仿微信的界面实现
平缓而扎实的前进吧。
04-27 687
看了一位大神的博客，发现他有模仿微信界面实现，我决定向大神看齐！继续努力。 因为我不会制作动画，所以只能图片加说明了： 1，标题栏下面是是一个ViewPager，适配器里面的item是一个个Fragment，这个比较简单 2，ViewPager下面是一排自定义的按钮控件（继承View)，随着ViewPager的滑动，字体的透明度会有一个渐变的效果，就像微信界面一样！      我们先自定
折叠式侧滑菜单
平缓而扎实的前进吧。
05-14 620
1，利用canvas.concat(Matric);使得图片折叠 2，利用Canvas.clipRect(...);截取需要的部分 3，利用Paint.setShaper（LinearGradient）；绘制阴影 4，与DrawerLayout与SlidingPanelLayout结合，形成折叠式侧滑菜单 package com.wang.simple_foldinglayout.view
自定义view（视频音量调控）
平缓而扎实的前进吧。
12-03 585
用手机看视频，调节音量时会出现一个小图标，如图：         向上滑动时，白点数目会增多（声音会变大），向下滑动时白点数目会减少（声音会变小），我尝试着自己做了一个（有图示效果，当没加声音效果）下面是我的实例分析：          主要是自定义view的四部曲 加上触摸监听：          1，自定义属性          2，从构造方法中获取自定义属性
Android自定义字体变色控件
平缓而扎实的前进吧。
05-12 583
随着ViewPager的滑动，标题栏字体的颜色逐渐由黑变红，效果如下图：（如果对你有帮助，麻烦写下评论，这对我是一种激励！）        这里主要用到的是，canvas.clipRect(left, 0, right, mHeight);这个方法，截取我们需要显示的部分， 所以要达到上面的效果，文本描绘了两次，黑色文本与红色文本，只不过左边的标题截取了黑色文本的钱半部和红色文本的后半部组合
侧滑菜单
平缓而扎实的前进吧。
04-27 479
侧滑菜单，现在已是每个app的标配了，特使qq做出新意。 在这里整理了三个侧滑菜单！下面是效果图： 第一种，内容跟菜单一起滑动。 第二种，菜单滑动，内容不动。 第三种：内容滑动，菜单不动。 其实三种策划菜单的实现都是继承了HorizontalScrollView实现的， 第一种侧滑菜单的实现代码： package com.wang.demo_slidingmenu.vie
Android BitmapShader 实现圆角图形，或圆图
平缓而扎实的前进吧。
04-11 468
今天我们要用ImageView的继承类来实现这个效果，依然属于自定义范畴！ 既然是自定义，那我们就来复习一下自定义的基本步骤吧： 1，自定义属性 2，在构造方法中获取自定义属性值 3，重写onMeasure方法，调整布局 4，重写onDraw方法绘图。 首先我们先看一下效果图吧，如果觉得效果图很臭，那就没有看下去的必要了！ 到了这里，我就不废话了！开始附上我的代码了！ 一，
自定义控件实现锁屏效果！
平缓而扎实的前进吧。
04-27 456
现在很多app多具有滑动解锁的功能！多以就是这自己写了一个，先来看一下效果图 具体实现是先自定义了一个GestureLockView继承View，即我用看到的圆圈；在自定义一个GestureLockViewLayout继承RelativeLayout用于存放我们自定义的GestureLockView 下面是自定义GestureLockView的代码： package com.wang
Android自定义View实现卫星菜单教程与代码详解
本文档深入探讨了如何在Android开发中实现卫星菜单效果，利用自定义View进行定制。作者结合了自己的学习经历，参考了《android群英传》、鸿洋大神和wing大神的文章，通过实践创建了一个自定义的View，并将其分享出来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值