安卓环形菜单（处理了菜单键和返回键+加入了动画）

关注

原创最新推荐文章于 2026-06-04 19:20:12 发布 1k 阅读 AI 写同款· GEO 优化 ›

Android动态环形菜单实现指南在Android开发中，自定义View是实现复杂用户界面功能的关键。环形菜单作为一种独特的UI组件，因其美观和实用的特性，受到了开发者的广泛青睐。本章将介绍如何通过自定义View来实现一个环形菜单，并且解析其背后的原理。动态环形菜单的性能优化和扩展性设计是确保应用长期健康发展的关键。合理地利用分层绘制、异步任务处理、设计模式以及动态加载技术，可以极大地提升应用性能并增强其可扩展性。这些技术的应用，不仅减少了维护成本，还提升了用户体验，使得应用更加灵活和高效。本文还有配套的精品资源，点击获取。阅读详情

废话不多说，先看效果图：

<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" >

    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/icon_home" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageView
            android:id="@+id/icon_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/icon_search" />

        <ImageView
            android:id="@+id/icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@drawable/icon_menu" />

        <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/icon_myyouku" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/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_alignParentLeft="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/channel1" />

        <ImageView
            android:id="@+id/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel1"
            android:layout_alignLeft="@id/channel1"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="20dp"
            android:background="@drawable/channel2" />

        <ImageView
            android:id="@+id/channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel2"
            android:layout_alignLeft="@id/channel2"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="30dp"
            android:background="@drawable/channel3" />

        <ImageView
            android:id="@+id/channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@drawable/channel4" />

        <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_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/channel7" />
        
        <ImageView
            android:id="@+id/channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel7"
            android:layout_alignRight="@id/channel7"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/channel6" />
        
        <ImageView
            android:id="@+id/channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel6"
            android:layout_alignRight="@id/channel6"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="30dp"
            android:background="@drawable/channel5" />
    </RelativeLayout>

</RelativeLayout>

package com.example.circlemenuofbottom.anim;

import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

/**
 * @author lzd
 * 
 * QQ : 2622596982
 * 
 * email : anroid_lzd@163.com
 *
 * QQ 交流群 ：277599214
 */
public class MyAnimationUtils {

	/**
	 * 出去的动画---顺时针出
	 * 
	 * @param view
	 *            执行动画的对象
	 */
	public static void animaOut(RelativeLayout view) {
		/*
		 * RotateAnimation animation = new RotateAnimation(0, 180,
		 * view.getWidth() / 2, view.getHeight()); animation.setDuration(500);
		 * animation.setFillAfter(true); view.startAnimation(animation);
		 */
		animaOut(view, 0);
	}

	/**
	 * 出去的动画---逆时针进
	 * 
	 * @param view
	 *            执行动画的对象
	 */
	public static void animaIn(RelativeLayout view) {
		/*
		 * // 顺时针进 // RotateAnimation animation = new RotateAnimation(180, //
		 * 360,view.getWidth() / 2, view.getHeight()); // 逆时针进 RotateAnimation
		 * animation = new RotateAnimation(-180, -360, view.getWidth() /
		 * 2,view.getHeight()); animation.setDuration(500);
		 * animation.setFillAfter(true); view.startAnimation(animation);
		 */
		animaIn(view, 0);
	}

	/**
	 * 出去的动画---顺时针出
	 * 
	 * @param view
	 *            执行动画的对象
	 * @param offSetTime
	 *            延时执行的时间
	 */
	public static void animaOut(RelativeLayout view, int offSetTime) {

		RotateAnimation animation = new RotateAnimation(0, 180,
				view.getWidth() / 2, view.getHeight());
		animation.setDuration(500);
		animation.setStartOffset(offSetTime);
		animation.setFillAfter(true);
		view.startAnimation(animation);
	}

	public static void animaIn(RelativeLayout view, int offSetTime) {

		// 顺时针进
		// RotateAnimation animation = new RotateAnimation(180,
		// 360,view.getWidth() / 2, view.getHeight());
		// 逆时针进
		RotateAnimation animation = new RotateAnimation(-180, -360,
				view.getWidth() / 2, view.getHeight());
		animation.setDuration(500);
		animation.setStartOffset(offSetTime);
		animation.setFillAfter(true);
		view.startAnimation(animation);
	}

}

按键的处理思路：

/* 
	 * 监听菜单键,当用户点击菜单键的时候，显示和隐藏一级和二级菜单
	 * 
	 * 监听返回键,再按一次退出程序
	 */
	private long exitTime = 0;
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// 菜单键的处理
		if(event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_MENU){
			// 如果 一级菜单显示,隐藏 全部
			if(isShowLevel1){
				MyAnimationUtils.animaOut(level);
				isShowLevel1 = false;
				if(isShowLevel2){
					MyAnimationUtils.animaOut(level2,120);
					isShowLevel2 = false;
					if(isShowLevel3){
						MyAnimationUtils.animaOut(level3,120);
						isShowLevel3 = false;
					}
				}
			}else{
				// 如果一级菜单式隐藏的,显示 一,二级菜单
				MyAnimationUtils.animaIn(level);
				MyAnimationUtils.animaIn(level2, 120);
				isShowLevel1 = true;
				isShowLevel2 = true;
			}
		}
		// 返回键
		if(event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_BACK){
			if(System.currentTimeMillis() - exitTime > 2000){
				Toast.makeText(this, "再按一次返回键退出", Toast.LENGTH_SHORT).show();
				exitTime = System.currentTimeMillis();
			}else{
				finish();
				System.exit(0);
			}
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}

没有什么可以好说的，仔细看看就全懂了，若还有疑问，请联系我或者到群里交流。

最后附上下载地址： http://download.youkuaiyun.com/detail/escdelete/8340545