登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

『Android自定义View实战』自定义弧形旋转菜单栏——卫星菜单 [复制链接]

2019-6-4 16:38
Android小Y 阅读:155 评论:0 赞:0
Tag:  

概述

现在很多App会在入口比较浅的页面添加一些快捷操作入口,一方面是为了方便用户操作,一方面是为了提高产品一些关键入口的使用率,让用户能够在浏览信息流的过程中能快速切换至其他一些功能页面。例如豆瓣的首页 (右下角红框选中部分):

图片描述

本文将仿照这种菜单效果进行实现,最?#25307;?#26524;如下:

图片描述

需要定制的特性

1.菜单展开半径

2.设置菜单主按钮Icon

3.设置菜单子项的各个Icon

4.展开和收缩的动画时长

5.所有菜单按钮的宽高

6.是否在展开收缩的同时旋转主按钮

:理论上可以设置无数个菜单项,但是会出现重叠情况(空间有限),这种情况得自行调整按钮数量和宽高。

实现思路

可以看到这个菜单是由多个按钮组合而成,所以可以考虑用ViewGroup来作为载体,其中的子View再通过属性动画进?#20449;?#21512;达成效果,而各个菜单项的弹出角度可以针对90°来进行弧度平分,再通过三角函数得到最?#29031;?#24320;的目标坐标,关键要注意View的宽高边距的计算,否则可能会出现超出边界的情况。

1)初始化基本框架

由于菜单是由多个按钮叠加在一个平面,所以可以考虑采用继承FrameLayout,然后根据设置的Icon资源Id的数量来作为按钮的数量进行初始化,代码如下:


    List<ImageView> mImgViews = new ArrayList<>();
    List<Integer> mMenuItemResIds = new ArrayList<>();

    /**
     * 初始化主按钮
     * @param context
     */
    private void initMenuView(Context context) {
        mMenuIv = new ImageView(context);
        mMenuIv.setImageResource(mMenuResId);
        FrameLayout.LayoutParams params = new LayoutParams(mMenuWidth, mMenuWidth);
        params.bottomMargin = mMenuItemWidth / 2;
        params.rightMargin = mMenuItemWidth / 2;
        params.gravity = Gravity.BOTTOM | Gravity.RIGHT;
        addView(mMenuIv, params);
        mMenuIv.setOnClickListener(this);
    }

    /**
     * 初始化菜单子项按钮
     * @param context
     */
    private void initMenuItemViews(Context context) {
        mImgViews.clear();
        for (int index = 0; index < mMenuItemResIds.size(); index++) {
ImageView menuItem = new ImageView(context);
menuItem.setImageResource(mMenuItemResIds.get(index));
FrameLayout.LayoutParams params = new LayoutParams(mMenuItemWidth, mMenuItemWidth);
params.bottomMargin = mMenuItemWidth / 2;
params.rightMargin = mMenuItemWidth / 2;
params.gravity = Gravity.BOTTOM | Gravity.RIGHT;
menuItem.setTag(index);
menuItem.setOnClickListener(this);
addView(menuItem, params);
menuItem.setScaleX(0f);
menuItem.setScaleY(0f);

mImgViews.add(menuItem);
        }
    }

可以看到都设置在了父容器的右下角,且设置了margin值,这是由于我们点击菜单瞬间有放大双倍的效果,所以这里需要为其边缘腾出一点空间,否则处于边缘的菜单项放大时,会有部分被切掉影响观感,记得为每个子项设置Tag(这里设置为下标),后面触发点击?#24405;?#26102;会用到。

2)展开菜单

前面说过了,主要是根据平分弧度的思路来计算,从效果图中可以看出,我们的整个展开角度是90°,那么每个菜单项的角度应该是90°/(菜单的数量-1),计算出这个角度有什么作用呢?可以先通过下图帮忙理解:

图片描述

可以看到,要做弹出动画,就需要计算出弹出的横向距离和纵向距离,刚才计算出来的角度在这就派上用场啦,利用三角函数可以得到:

tranX = 弹出半径sin(90 i / (count - 1));
tranY = 弹出半径cos(90 i / (count - 1));

再结合?#35813;鞫群?#22823;小的变化,代码如下:

    /**
     * 菜单展开动画
     */
    private void startOpenAnim() {
        int count = mMenuItemResIds.size();
        List<Animator> animators = new ArrayList<>();
        for (int i = 0; i < count; i++) {
int tranX = -(int) (mRadius * Math.sin(Math.toRadians(90 * i / (count - 1))));
int tranY = -(int) (mRadius * Math.cos(Math.toRadians(90 * i / (count - 1))));
ObjectAnimator animatorX = ObjectAnimator.ofFloat(mImgViews.get(i), "translationX", 0f, tranX);
ObjectAnimator animatorY = ObjectAnimator.ofFloat(mImgViews.get(i), "translationY", 0f, tranY);
ObjectAnimator alpha = ObjectAnimator.ofFloat(mImgViews.get(i), "alpha", 0, 1);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(mImgViews.get(i), "scaleX", 0.1f, 1);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(mImgViews.get(i), "scaleY", 0.1f, 1);

animators.add(animatorX);
animators.add(animatorY);
animators.add(alpha);
animators.add(scaleX);
animators.add(scaleY);
        }
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(mDuration);
        animatorSet.playTogether(animators);
        animatorSet.start();
    }

3)收回菜单

上一步已经理解了如何展开菜单,回收菜单自然就容易多了,没错,就是反其道而行之:

    /**
     * 菜单收回动画
     */
    private void startCloseAnim() {
        int count = mMenuItemResIds.size();
        List<Animator> animators = new ArrayList<>();
        for (int i = 0; i < count; i++) {
int tranX = -(int) (mRadius * Math.sin(Math.toRadians(90 * i / (count - 1))));
int tranY = -(int) (mRadius * Math.cos(Math.toRadians(90 * i / (count - 1))));
ObjectAnimator animatorX = ObjectAnimator.ofFloat(mImgViews.get(i), "translationX", tranX, 0f);
ObjectAnimator animatorY = ObjectAnimator.ofFloat(mImgViews.get(i), "translationY", tranY, 0f);
ObjectAnimator alpha = ObjectAnimator.ofFloat(mImgViews.get(i), "alpha", 1, 0);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(mImgViews.get(i), "scaleX", 1, 0.3f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(mImgViews.get(i), "scaleY", 1, 0.3f);

animators.add(animatorX);
animators.add(animatorY);
animators.add(alpha);
animators.add(scaleX);
animators.add(scaleY);
        }
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(mDuration);
        animatorSet.playTogether(animators);
        animatorSet.start();
    }

其实主要就是在做位移动画的时候,从tranX和tranY位移到0,回到原来的位置。

4)菜单子项点击动画

以上完成了菜单的展开和收缩,基本的模样已经出来了,还可以为其子项添加一些点击效果,让整个View更为生动,代码如下:

    /**
     * 菜单子项点击动画
     *
     * @param index 子项下标
     */
    private void startClickItemAnim(int index) {
        int count = mMenuItemResIds.size();
        List<Animator> animators = new ArrayList<>();
        //当前被点击按钮放大且逐渐变?#35813;鰨?#36896;成消散效果
        ObjectAnimator clickItemAlpha = ObjectAnimator.ofFloat(mImgViews.get(index), "alpha", 1, 0);
        ObjectAnimator clickItemScaleX = ObjectAnimator.ofFloat(mImgViews.get(index), "scaleX", 1, 2);
        ObjectAnimator clickItemScaleY = ObjectAnimator.ofFloat(mImgViews.get(index), "scaleY", 1, 2);
        animators.add(clickItemAlpha);
        animators.add(clickItemScaleX);
        animators.add(clickItemScaleY);

        for (int i = 0; i < count; i++) {
if (index == i) {
    //过?#35828;?#21069;被点击的子项
    continue;
}
//其他选项缩小且变?#35813;?ObjectAnimator alpha = ObjectAnimator.ofFloat(mImgViews.get(i), "alpha", 1, 0);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(mImgViews.get(i), "scaleX", 1, 0.1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(mImgViews.get(i), "scaleY", 1, 0.1f);
animators.add(alpha);
animators.add(scaleX);
animators.add(scaleY);
        }
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(500);
        animatorSet.playTogether(animators);
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {

}

@Override
public void onAnimationEnd(Animator animator) {
    //点击动画结束之后要将所有子项归位
    resetItems();
}

@Override
public void onAnimationCancel(Animator animator) {

}

@Override
public void onAnimationRepeat(Animator animator) {

}
        });
    }

首先传进来一个index?#38382;?#20854;实就是之前我们在初始化的时候为每个子View设置的Tag,在?#30475;蝟nClick的时候,通过 view.getTag() 获取到对应的下标,传进来之后,循环遍历所有子View,根据这个下标来判断当前点击的是哪个菜单项,将其做放大消散的动画效果,其他菜单项则单纯消散即可。
并且这里注意,要在动画结束时,将所有子项设置回展开之前的位置,否则当再次点击菜单按钮时,菜单项会在圆弧上闪现了一下,体验很差,因此要在onAnimationEnd的回调中重置所有子项,重置代码如下:

     /**
     * 重置所有子项位置
     */
    private void resetItems() {
        int count = mImgViews.size();
        for (int i = 0; i < mImgViews.size(); i++) {
int tranX = (int) (mRadius * Math.sin(Math.toRadians(90 * i / (count - 1))));
int tranY = (int) (mRadius * Math.cos(Math.toRadians(90 * i / (count - 1))));
mImgViews.get(i).setTranslationX(tranX);
mImgViews.get(i).setTranslationY(tranY);
        }
        mIsOpen = false;
    }

5)旋转主菜单按钮

我们还可以在展开收缩的同时,还可以为菜单按钮添加上一些花样,将其旋转一下,使整个动画更加自然:

    /**
     * 旋转主菜单按钮
     *
     * @param startAngel 起始角度
     * @param endAngel   结束角度
     */
    private void rotateMenu(int startAngel, int endAngel) {
        if (!mCanRotate) {
return;
        }
        ObjectAnimator clickItemAlpha = ObjectAnimator.ofFloat(mMenuIv, "rotation", startAngel, endAngel);
        clickItemAlpha.setDuration(mDuration);
        clickItemAlpha.start();
    }

6)添加外部点击监听

提供一个供外界设置banner数据的方法:

    ClickMenuListener mItemListener;

    public void setClickItemListener(ClickMenuListener mItemListener) {
        this.mItemListener = mItemListener;
    }

    public interface ClickMenuListener {
        void clickMenuItem(int resId);
    }

    @Override
    public void onClick(View view) {
        if (view == mMenuIv) {
...
        } else {
...
if (mItemListener != null &amp;&amp; index < mMenuItemResIds.size()) {
    mItemListener.clickMenuItem(mMenuItemResIds.get(index));
}
        }
    }

就是正常的暴露接口,将菜单对应的资源id传出去,供外界判断点击的是哪个菜单项。

应用

xml布局中引用(这里的宽高由设置的弧长半径决定,只需设置wrap_conetnt即可):

<com.zjywidget.widget.arcmenu.YArcMenuView
        android:id="@+id/arc_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:spread_radius="150dp"
        app:duration="1000"
        app:menu_width="64dp"
        app:menu_item_width="64dp"
        app:can_rotate="true"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

Acitivity中实例代码如下:

        mArcMenuView = findViewById(R.id.arc_menu);
        List<Integer> menuItems = new ArrayList<>();
        menuItems.add(R.drawable.ic_menu_camera);
        menuItems.add(R.drawable.ic_menu_photo);
        menuItems.add(R.drawable.ic_menu_share);
        mArcMenuView.setMenuItems(menuItems);

        mArcMenuView.setClickItemListener(new YArcMenuView.ClickMenuListener() {
@Override
public void clickMenuItem(int resId) {
    switch (resId){
        case R.drawable.ic_menu_camera:
Toast.makeText(getApplicationContext(), "点击了相机", Toast.LENGTH_SHORT).show();
break;
        case R.drawable.ic_menu_photo:
Toast.makeText(getApplicationContext(), "点击了相册", Toast.LENGTH_SHORT).show();
break;
        case R.drawable.ic_menu_share:
Toast.makeText(getApplicationContext(), "点击了分享", Toast.LENGTH_SHORT).show();
break;
    }
}
        });

后续

最近有点沉迷于自定义View,其实很多看似很基础的东西还是很重要的,底层基础决定上层建筑,本文主要关键还是对属性动画的结合应用,由于时间比较短,可能还有些细节?#20174;?#21270;处理,还待后期不断更新,欢迎关注GitHub项目:

源码传送门GitHub-ZJYWidget

CSDN博客IT_ZJYANG
简书Android小Y
里面还有很多实用的自定义View源码及demo,会长期维护,欢迎Star~ 如有不足之处或建议还望?#21018;?#30456;互学习,相互进步,如果觉得不错动动小?#25351;?#20010;?#19981;叮?谢谢~

分享到:
我来说两句
facelist
您需要登录后才可以评论 登录 | 立即注册
所有评论(0)

站长推荐

通过?#22987;?#35746;阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|?#21482;?#29256;|站点统计|安卓巴士 ( 粤ICP备15117877号 )

返回顶部
拳皇命运一共48集
通比牛牛游戏下载 阿拉斯加垂钓APP 杂技群英会APP下载 水果派对主题活动 捕鱼王游戏技巧打法 2019年的300英雄吕布觉醒加点 体彩大乐透开奖公告 大明帝国投注 福建休彩31选7基本走势图 阿拉斯加垂钓怎么玩