旋转菜单按钮

最新推荐文章于 2023-04-11 13:39:02 发布
最新推荐文章于 2023-04-11 13:39:02 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Android小demo 文章标签： android 动画 菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CDWLX/article/details/52077944
版权

功能描述：

实现旋转菜单按钮，效果图如下：
旋转菜单效果

功能分析：

1. 内侧的home按钮的点击
2. 中间的menu按钮的点击
3. 解决动画频繁出现
4. 硬件菜单的实现
5. 动画后点击的bug

动画:

1. View Animation: 补间动画，（旋转，位移，缩放，透明度，set）
    1. 原理: 通过父容器来绘制自己动画时的样子

2. Property Animation: 属性动画（补间动画可以做到的，都可以做到，做不到的也可以做到）
    1. 原理: 通过改变自身的属性来显示动画的

3. Drawable Animation: 帧动画
  • 布局界面
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.cdw.archedmenu.MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <!--外测-->
        <RelativeLayout
            android:id="@+id/rl_level3"
            android:layout_width="280dp"
            android:layout_height="140dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/level3">

            <ImageView
                android:id="@+id/channel1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="6dp"
                android:src="@drawable/channel1"/>

            <ImageView
                android:id="@+id/channel2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel1"
                android:layout_marginLeft="30dp"
                android:src="@drawable/channel2"/>

            <ImageView
                android:id="@+id/channel3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel2"
                android:layout_marginBottom="-8dp"
                android:layout_marginLeft="64dp"
                android:src="@drawable/channel3"/>

            <ImageView
                android:id="@+id/channel4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@drawable/channel4"/>

            <ImageView
                android:id="@+id/channel5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel2"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="-8dp"
                android:layout_marginRight="64dp"
                android:src="@drawable/channel5"/>

            <ImageView
                android:id="@+id/channel6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel1"
                android:layout_alignParentRight="true"
                android:layout_marginRight="30dp"
                android:src="@drawable/channel6"/>

            <ImageView
                android:id="@+id/channel7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="6dp"
                android:src="@drawable/channel7"/>
        </RelativeLayout>

        <!--中间-->
        <RelativeLayout
            android:id="@+id/rl_level2"
            android:layout_width="180dp"
            android:layout_height="90dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/level2">
            <!--搜索-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="2dp"
                android:src="@drawable/icon_search"/>
            <!--菜单按钮-->
            <ImageView
                android:id="@+id/leve2_iv_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@drawable/icon_menu"/>
            <!--优酷按钮-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="2dp"
                android:src="@drawable/icon_myyouku"/>
        </RelativeLayout>

        <!--内测-->
        <RelativeLayout
            android:id="@+id/rl_level1"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/level1">
            <!--home的菜单按钮-->
            <ImageView
                android:id="@+id/level1_iv_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/icon_home"/>
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>
  • mainActivity页面
package com.cdw.archedmenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements View.OnClickListener {

    private ImageView mIvHome;
    private RelativeLayout mRlLevel1;//一级菜单的容器
    private RelativeLayout mRlLevel2;//二级菜单的容器
    private RelativeLayout mRlLevel3;//三级菜单的容器
    private ImageView mIvMenu;
    private boolean isLevel1Display = true;//一级菜单是否显示的标记
    private boolean isLevel2Display = true;//二级菜单是否显示的标记
    private boolean isLevel3Display = true;//三级菜单是否显示的标记

    private int mAnimationCount;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        mRlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);
        mRlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);
        mRlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);

        mIvHome = (ImageView) findViewById(R.id.level1_iv_home);
        mIvMenu = (ImageView) findViewById(R.id.leve2_iv_menu);

        //设置点击事件
        mIvHome.setOnClickListener(this);
        mIvMenu.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == mIvHome) {
            clickLevel1Home();
        }else if (v == mIvMenu){
            clickLevel2Menu();
        }
    }

    private void clickLevel2Menu() {
        if (mAnimationCount > 0){
            return;
        }

        if (isLevel3Display){
            hideLevel(mRlLevel3, 0);
            isLevel3Display = false;
            return;
        }

        if (!isLevel3Display){
            showLevel(mRlLevel3, 0);
            isLevel3Display = true;
            return;
        }
    }

    private void clickLevel1Home() {
        if (mAnimationCount > 0){
            return;
        }

        //点击home按钮，二级菜单和三级菜单都显示的情况下，二级菜单和三级菜单隐藏
        if (isLevel2Display && isLevel3Display) {
            //隐藏二级菜单
            hideLevel(mRlLevel2, 100);

            //隐藏三级菜单
            hideLevel(mRlLevel3, 0);
            //状态改变
            isLevel2Display = false;
            isLevel3Display = false;
            return;
        }

        //点击home按钮，二级菜单和三级菜单都不显示的情况下，显示二级菜单
        if (!isLevel2Display && !isLevel3Display) {
            showLevel(mRlLevel2, 0);
            //状态改变
            isLevel2Display = true;
            return;
        }

        //点击home按钮，二级菜单显示三级菜单不显示的情况下，隐藏二级菜单
        if (isLevel2Display && !isLevel3Display) {
            hideLevel(mRlLevel2, 0);
            isLevel2Display = false;
            return;
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU){
            //点击menu按钮
            clickHardwareMenu();
            //消费menu点击事件
            return true;
        }

        return super.onKeyUp(keyCode, event);
    }

    private void clickHardwareMenu() {
        //如果三个菜单都可见，隐藏三个菜单
        if (isLevel1Display && isLevel2Display && isLevel3Display){
            hideLevel(mRlLevel3, 0);
            hideLevel(mRlLevel2, 100);
            hideLevel(mRlLevel1, 200);

            isLevel1Display = false;
            isLevel2Display = false;
            isLevel3Display = false;
            return;
        }

        //如果三个菜单不可见，显示三个菜单
        if (!isLevel1Display && !isLevel2Display && !isLevel3Display){
            showLevel(mRlLevel1, 0);
            showLevel(mRlLevel2, 100);
            showLevel(mRlLevel3, 200);

            isLevel1Display = true;
            isLevel2Display = true;
            isLevel3Display = true;
            return;
        }

        //如果三级菜单不可见，隐藏一二级菜单
        if (!isLevel3Display && isLevel1Display && isLevel2Display){
            hideLevel(mRlLevel1, 0);
            hideLevel(mRlLevel2, 100);

            isLevel1Display = false;
            isLevel2Display = false;
            return;
        }

        //如果二三级菜单不可见，隐藏一级菜单
        if (!isLevel3Display && isLevel1Display && !isLevel2Display){
            hideLevel(mRlLevel1, 0);

            isLevel1Display = false;
            return;
        }
    }

    /**
     * 隐藏菜单
     *
     * @param container
     */
    private void hideLevel(RelativeLayout container, long startOffset) {
        //container.setVisibility(View.GONE);

        int count = container.getChildCount();
        for (int i = 0; i < count; i++){
            container.getChildAt(i).setEnabled(false);
        }
        RotateAnimation animation = new RotateAnimation(0f, -180f, RotateAnimation
                .RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1f);
        animation.setDuration(400);
        animation.setFillAfter(true);
        animation.setStartOffset(startOffset);//设置动画延迟

        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mAnimationCount++;
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mAnimationCount--;
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        container.startAnimation(animation);
    }

    /**
     * 显示菜单
     * @param container
     * @param startOffset
     */
    private void showLevel(RelativeLayout container, long startOffset) {
        //container.setVisibility(View.VISIBLE);

        int count = container.getChildCount();
        for (int i = 0; i < count; i++){
            container.getChildAt(i).setEnabled(true);
        }
        RotateAnimation animation = new RotateAnimation(-180f, 0f, RotateAnimation
                .RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1f);
        animation.setDuration(600);
        animation.setFillAfter(true);
        animation.setStartOffset(startOffset);//设置动画延迟

        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mAnimationCount++;
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mAnimationCount--;
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        container.startAnimation(animation);
    }
}

项目链接：https://github.com/ChenDongWei/Android/tree/master/archedmenu

Android控件全解手册 - 自定义弧形旋转菜单栏（卫星菜单）
空名先生
11-26 813
现在很多App会在入口比较浅的页面添加一些快捷操作入口，一方面是为了方便用户操作，一方面是为了提高产品一些关键入口的使用率，让用户能够在浏览信息流的过程中能快速切换至其他一些功能页面。例如豆瓣的首页 (右下角红框选中部分）。
ios 圆形旋转菜单_iOS编程——Swift实现一个3D圆型旋转菜单
weixin_42613773的博客
01-14 669
今天在网到有人实现了一个旋转菜单，我用CAKeyFrameAnimation(position)和CABasicAnimation(transform.scale)也做了一个，和大家分享下，菜单支持奇数和偶数个，点击会旋转并缩放，图如下： 实现代码：都在一个swift即可。1.先自定义一个UIButton类，添加两个属性import UIKitclass CustomButton: UIButto...
android RotateButton 旋转圆环
11-03
android 自定义旋转圆环button，录音时使用，点击变为停止按钮同时有圆环在旋转
一个旋转菜单
weixin_30667649的博客
10-06 128
如图所示: 按下菜单键打开 打开或者关闭原形菜单盘,旋转开启或者旋转关闭 按下某些按钮 打开二级,三级或者关闭二级,三级菜单,旋转开启或者旋转关闭 案例: AnimUtil.java package com.heima52.youkumenu; import android.view.animation.Animation; import a...
旋转菜单
程序人生的专栏
10-28 897
通过自定义View,自定义按钮，实现点击菜单按钮，将隐藏在菜单按钮下面的功能按钮通过旋转着移动出来，并且再次，点击按钮的时候，可以旋转着再平移回去。这样，就实现了旋转按钮的功能。
【旋转菜单】
weixin_45727272的博客
04-11 762
效果展示如下图：提示：以下是本篇文章的代码内容,供大家参考,相互学习CSS选择器：包括通配符选择器、标签选择器、类选择器、伪类选择器、子元素选择器、相邻兄弟选择器等。CSS盒模型：包括内容框、内边距、边框和外边距。CSS3过渡效果：包括transition属性、transform属性、transform-origin属性等。CSS3动画效果：包括@keyframes关键字、animation属性、animation-timing-function属性等。
android 旋转按钮和旋转变化动画
weixin_30925411的博客
08-30 276
RotateAnimation类：旋转变化动画类 RotateAnimation类是Android系统中的旋转变化动画类，用于控制View对象的旋转动作，该类继承于Animation类。RotateAnimation类中的很多方法都与Animation类一致，该类中最常用的方法便是RotateAnimation构造方法。 【基本语法】public RotateAnimation (float...
悬浮菜单按钮
05-15
在Android应用开发中，"悬浮菜单按钮"是一种常见的交互元素，用于提供快捷操作或扩展功能。这个设计通常出现在屏幕的边缘，用户可以轻松触及，增强了用户体验。本篇将深入探讨如何在Android中实现悬浮菜单按钮，包括...
Android圆形旋转菜单开发实例
09-01
本文将详细介绍如何实现一个圆形旋转菜单，这种菜单在用户点击时会以中心点旋转展开，为应用程序增添动态效果。我们将探讨其实现思路和核心代码，以帮助开发者构建类似的动画菜单。 首先，要实现这个圆形旋转菜单，...
Android圆形旋转菜单CircleMenu.zip
12-16
《Android圆形旋转菜单——CircleMenu.zip深度解析》 在Android应用开发中，用户界面的设计是至关重要的，一个吸引人的、易用的界面可以极大地提升用户体验。"CircleMenu"是一款独特的UI组件，它以圆形的方式展示...
Android自定义控件 旋转按钮
01-03
博客地址：http://blog.youkuaiyun.com/kong_gu_you_lan/article/details/53573439 GitHub地址：https://github.com/alidili/TempControlView
android 圆形旋转按钮实现
03-24
android 圆形旋转按钮实现,类似圆盘，可以滑动旋转。
Android 自定义View-旋转小按钮（修复bug）
08-12
自定义这个View的原因是我需要一个能点击一下就能旋转显示正在刷新的小按钮，等刷新结束后在使它停止旋转并恢复到初始状态，并且这个View的字体大小，字体颜色，进度条的颜色等都可以自由配置。
android圆形360旋转按钮
07-18
android 非常漂亮的按钮带阴影可以360度旋转
点击 按钮 按钮旋转
05-05
点击 按钮 按钮旋转
旋转菜单2.0
臧小川的博客
06-07 229
这怎么还要填写摘要了~
旋转按钮-CSpinButtonCtrl
小米的修行之路
09-08 1883
旋转按钮如下： 一个旋转按钮通常与一个相伴控件联合使用，这个相伴控件称为“伙伴窗口”。当点击旋转按钮的其中一个箭头时，伙伴控件里面的数值增大或减小（一般为编辑框控件）。 旋转按钮的属性如下： 　控件风格　 　含义　 　UDS_HORZ　 　指定一个水平旋转按钮．若不指定该风格则创建一个垂直的旋转按钮．　
android 旋转音量按钮,非常好看的android音量旋钮
weixin_30905039的博客
05-27 579
本文实例为大家分享了好看的android音量旋钮，供大家参考，具体内容如下效果图：实现思路，用的自定义的控件,图片和按钮都是自己绘制的，并且附带点击事件，可以监听当前的旋钮的值：第一步：先把布局写了：android:orientation="vertical"android:background="#000000"android:layout_width="match_parent"android...
旋转菜单（基于CSS3动画transform）
chen__cheng的博客
05-09 1170
效果预览： 实现思路： 设置小菜单的旋转基点transform-origin为中间圆的中心，再根据对小菜单设置不同的旋转角度即可。 实现代码： html <ul> <li><span>旋</span></li> <li><span>转</span></li> <li><span>菜</span></li> <li&
圆盘旋转菜单的设计与实现技巧
标题和描述所提及的知识点是关于“圆盘旋转菜单的实现”，这个概念可能涉及的IT知识点相当广泛，包含了前端开发的多个领域，比如Web前端开发、移动应用界面设计、交互式设计原则等。由于没有给出具体的编程语言或...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值