Android ArcMenu的简单实现

最新推荐文章于 2021-05-28 06:17:29 发布
最新推荐文章于 2021-05-28 06:17:29 发布
阅读量284 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： 移动开发 python
原文链接：https://my.oschina.net/mkonone/blog/652045
本文详细介绍了如何使用自定义属性和动画效果实现弧形菜单的动态展示，包括按钮位置确定、子菜单展开和点击事件处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、实现的效果图：

     

161602_Gecx_2700716.png161602_Koh2_2700716.png

  二、实现思路

        通过效果图，我们可以考虑到以下几个问题：

                1、如何确定各个按钮的位置

                        通过重写ViewGroup的onLayout方法实现每一个子View的位置的确定。

                2、五个子Menu是怎么显示出来的

                        因为在android中，button的位置如果发生移动，它是不能提供给用户点击的。因此，这五个按钮原本就存在于该位置，只是在刚开始的时候，我们设置它隐藏起来，当点击了一次主Menu，则通过一系列的动画效果，实现其从无到有的弹出过程。

  三、实现步骤：

        3.1、自定义属性，用于设置ArcMenu的位置：左上、右上、左下、右下；用来设置子Button和主Button的半径

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

				<attr name="radius" format="dimension" />

				<declare-styleable name="ArcMenu">
					<attr name="position" />
					<attr name="radius" />
				</declare-styleable>
			</resources>

        3.2、布局文件设置

<com.meinkonone.custom.ArcMenu
				android:id="@+id/id_menu"
				android:layout_width="match_parent"
				android:layout_height="match_parent"
				mein:position="right_bottom"
				mein:radius="140dp" >

				<Button
					android:id="@+id/id_button"
					android:layout_width="48dp"
					android:layout_height="48dp"
					android:background="@drawable/oval_btn_bg"
					android:text="+" />

				<Button
					android:layout_width="36dp"
					android:layout_height="36dp"
					android:background="@drawable/oval_btn_bg"
					android:tag="button1"
					android:text="1" />

				<Button
					android:layout_width="36dp"
					android:layout_height="36dp"
					android:background="@drawable/oval_btn_bg"
					android:tag="button2"
					android:text="2" />

				<Button
					android:layout_width="36dp"
					android:layout_height="36dp"
					android:background="@drawable/oval_btn_bg"
					android:tag="button3"
					android:text="3" />

				<Button
					android:layout_width="36dp"
					android:layout_height="36dp"
					android:background="@drawable/oval_btn_bg"
					android:tag="button4"
					android:text="4" />

				<Button
					android:layout_width="36dp"
					android:layout_height="36dp"
					android:background="@drawable/oval_btn_bg"
					android:tag="button5"
					android:text="5" />
			</com.meinkonone.custom.ArcMenu>

        3.3、重写ViewGroup，在拥有三个参数的构造方法中，获取自定义的属性值

public ArcMenu(Context context, AttributeSet attrs, int defStyle) {
				super(context, attrs, defStyle);
				mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
					100, getResources().getDisplayMetrics());
				// 获取自定义的属性值
				TypedArray array = 	context.getTheme().obtainStyledAttributes(attrs,
				R.styleable.ArcMenu, defStyle, 0);	
				int pos = array.getInt(R.styleable.ArcMenu_position, 3);
				switch (pos) {
					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_RIGHT_BOTTOM:
					mPosition = Position.RIGHT_BOTTOM;
					break;
				}
				mRadius = (int) array.getDimension(R.styleable.ArcMenu_radius,
						TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100,
								getResources().getDisplayMetrics()));
				Log.d("xys", "positon = " + mPosition + " , radius = " + mRadius);
				// 回收资源
				array.recycle();
			}

        3.4、重写onMeasure()方法 直接通过调用measureChild()方法进行确定大小

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.5、重写onLayout()方法，通过调用childView.layout()方法确定位置

                        layoutCButton();//设置主Button的位置

layoutChildButton();//设置ItemButton的位置

                        211803_pTjW_2700716.png

        3.6、设置动画

                mCButton的360°旋转

childButton的旋转+平移

childButton的点击动画（变大+透明变化）

        3.7、设置接口回调，监听childButton的点击事件

四、具体代码实现

public class ArcMenu extends ViewGroup implements OnClickListener {

private static final int POS_LEFT_TOP = 0;

private static final int POS_LEFT_BOTTOM = 1;

private static final int POS_RIGHT_TOP = 2;

private static final int POS_RIGHT_BOTTOM = 3;


private Position mPosition = Position.RIGHT_BOTTOM;

private int mRadius;

private Status mStatus = Status.CLOSE;


private OnMenuItemClickListener menuItemClickListener;


/**

* 菜单的主按钮

*/

private View mCButton;


/**

* 菜单的状态枚举类

*/

public enum Status {

OPEN, CLOSE

}


/**

* 菜单的位置枚举类

*/

public enum Position {

LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM

}


/**

* 自定义Menu的对外接口，用于监听按钮的点击事件

*/

public interface OnMenuItemClickListener {

void onClick(View view, int pos);

}


public void setOnMenuItemClickListener(

OnMenuItemClickListener onMenuItemClickListener) {

menuItemClickListener = onMenuItemClickListener;

}


// 避免用户进行直接的构造对象

public ArcMenu(Context context) {

this(context, null);

}


public ArcMenu(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}


public ArcMenu(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);


mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

100, getResources().getDisplayMetrics());


// 获取自定义的属性值

TypedArray array = context.getTheme().obtainStyledAttributes(attrs,

R.styleable.ArcMenu, defStyle, 0);


int pos = array.getInt(R.styleable.ArcMenu_position, 3);


switch (pos) {

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_RIGHT_BOTTOM:

mPosition = Position.RIGHT_BOTTOM;

break;

}


mRadius = (int) array.getDimension(R.styleable.ArcMenu_radius,

TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100,

getResources().getDisplayMetrics()));


Log.d("xys", "positon = " + mPosition + " , radius = " + mRadius);


// 回收资源

array.recycle();

}


@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);

}


@Override

protected void onLayout(boolean changed, int arg1, int arg2, int arg3,

int arg4) {

if (changed) {

layoutCButton();


// 定位menuItem

int count = getChildCount();

for (int i = 0; i < count - 1; i++) {

View childView = getChildAt(i + 1);


childView.setVisibility(GONE);


int cl = 0;

int ct = 0;


int cWidth = childView.getMeasuredWidth();

int cHeight = childView.getMeasuredHeight();


// mPosition是左上角时的坐标

cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));

ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));


// 如果位于是左下角或者右下角时

if (mPosition == Position.LEFT_BOTTOM

|| mPosition == Position.RIGHT_BOTTOM) {

ct = getMeasuredHeight() - ct - cHeight;

}


// 如果位于右上角或者是右下角时

if (mPosition == Position.RIGHT_BOTTOM

|| mPosition == Position.RIGHT_TOP) {

cl = getMeasuredWidth() - cl - cWidth;

}


Log.d("xys", cl + ", " + ct + ", " + cl + cWidth + ", " + ct

+ cHeight);


// 绘画childView

childView.layout(cl, ct, cl + cWidth, ct + cHeight);

}


}


}


/**

* 定位主菜单按钮

*/

private void layoutCButton() {

mCButton = getChildAt(0);

mCButton.setOnClickListener(this);


int l = 0;

int t = 0;


int width = mCButton.getMeasuredWidth();

int height = mCButton.getMeasuredHeight();


switch (mPosition) {

case LEFT_TOP:

l = 0;

t = 0;

break;

case LEFT_BOTTOM:

l = 0;

t = getMeasuredHeight() - height;

break;

case RIGHT_TOP:

l = getMeasuredWidth() - width;

t = 0;

break;

case RIGHT_BOTTOM:

l = getMeasuredWidth() - width;

t = getMeasuredHeight() - height;

break;

}

mCButton.layout(l, t, l + width, t + width);

}


@Override

public void onClick(View view) {

rotateCButton(view, 0f, 360f, 300);


toggleMenu(300);

}


/**

* 切换菜单

*/

public void toggleMenu(int duration) {

// 为所有的menuItem添加旋转+平移动画

int count = getChildCount();


for (int i = 0; i < count - 1; i++) {

final View chileView = getChildAt(i + 1);

chileView.setVisibility(VISIBLE);

// end 0,0

// start位置

// mPosition是左上角时的坐标

int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));

int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));


// 标志平移过程的x,y是变大还是缩小

int xflag = 1;

int yflag = 1;


// 位于左上角或者左下角时 平移过程中，x变小

if (mPosition == Position.LEFT_TOP

|| mPosition == Position.LEFT_BOTTOM) {

xflag = -1;

}

// 位于左上角或者右上角时 平移过程中 y变小

if (mPosition == Position.LEFT_TOP

|| mPosition == Position.RIGHT_TOP) {

yflag = -1;

}


AnimationSet animSet = new AnimationSet(true);

Animation tranAnim = null;


// to open

if (mStatus == Status.CLOSE) {

tranAnim = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0);

chileView.setClickable(true);

chileView.setFocusable(true);

} else {// to close

tranAnim = new TranslateAnimation(0, xflag * cl, 0, yflag * ct);

chileView.setClickable(false);

chileView.setFocusable(false);

}

tranAnim.setFillAfter(true);

tranAnim.setDuration(duration);


tranAnim.setAnimationListener(new AnimationListener() {


@Override

public void onAnimationStart(Animation arg0) {

}


@Override

public void onAnimationRepeat(Animation arg0) {

}


@Override

public void onAnimationEnd(Animation arg0) {

if (mStatus == Status.CLOSE) {

chileView.setVisibility(GONE);

}

}

});


RotateAnimation rotateAnim = new RotateAnimation(0, 720,

Animation.RELATIVE_TO_SELF, 0.5f,

Animation.RELATIVE_TO_SELF, 0.5f);

rotateAnim.setDuration(duration);

rotateAnim.setFillAfter(true);


animSet.addAnimation(rotateAnim);

animSet.addAnimation(tranAnim);

animSet.setStartOffset((i * 100) / count);


chileView.startAnimation(animSet);


final int pos = i + 1;


// 设置childView的点击事件

chileView.setOnClickListener(new OnClickListener() {


@Override

public void onClick(View arg0) {

if (menuItemClickListener != null) {// 事件的处理

menuItemClickListener.onClick(chileView, pos);

}

menuItemAnim(pos - 1);// 动画的设置

changeStatus();

}

});


}

changeStatus();

}


/**

* 判断menuItem的状态

* 

* @return

*/

public boolean isOpen() {

if (mStatus == Status.OPEN) {

return true;

} else {

return false;

}

}


/***

* 设置menuItem的点击动画

* 

* @param i

*/

private void menuItemAnim(int pos) {

for (int i = 0; i < getChildCount() - 1; i++) {

View childView = getChildAt(i + 1);

if (i == pos) {

childView.startAnimation(scaleBigAnim(300));

} else {

childView.startAnimation(scaleSmallAnim(300));

}


// 再次隐藏childView

childView.setFocusable(false);

childView.setClickable(false);

}

}


/**

* 为当前点击的item设置变大以及降低透明度的动画

* 

* @param duration

* @return

*/

private Animation scaleBigAnim(int duration) {

AnimationSet animSet = new AnimationSet(true);


ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);

animSet.addAnimation(scaleAnim);

animSet.addAnimation(alphaAnim);

animSet.setDuration(duration);

animSet.setFillAfter(true);

return animSet;

}


/**

* 为当前点击的item的其他按钮设置变小大以及降低透明度的动画

* 

* @param duration

* @return

*/

private Animation scaleSmallAnim(int duration) {

AnimationSet animSet = new AnimationSet(true);

ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);

animSet.addAnimation(scaleAnim);

animSet.addAnimation(alphaAnim);

animSet.setDuration(duration);

animSet.setFillAfter(true);

return animSet;

}


/**

* 改变menuItem的状态

*/

private void changeStatus() {

mStatus = (mStatus == Status.CLOSE ? Status.OPEN : Status.CLOSE);

}


/**

* 绕自身旋转

* 

* @param view

* @param start

* @param end

* @param duration

*/

private void rotateCButton(View view, float start, float end, int duration) {

RotateAnimation anim = new RotateAnimation(start, end,

Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

0.5f);

anim.setDuration(duration);

anim.setFillAfter(true);

view.startAnimation(anim);// 启动anim

}

}


转载于:https://my.oschina.net/mkonone/blog/652045

Android菜单库-ArcMenu、LineMenu、RoundMenu
08-09
Android 实现三种菜单效果，扇形菜单、线性菜单、圆形转盘菜单
Android代码-AndroidArcMenu
08-06
AndroidArcMenu android arc menu with a float button ,this view is made for the purpose of fitting big screen. Demo Usage in order to use this view, there are 3 steps: set the parent view of the menu menu.setParentBlurView(rlParent); create a item click listener to handle the user click GFloatingMenu.OnItemClickListener mListener; add menu item menu.AddMenuItem((bitmap)icon, "some menu item", mListener); Library licenses Copyright 2016 PAVKOO Licensed under the Apache License, Version
Android 自定义ViewGroup手把手教你实现ArcMenu
weixin_30547797的博客
07-08 143
转载请标明出处：http://blog.youkuaiyun.com/lmj623565791/article/details/37567907 逛eoe发现这样的UI效果，感觉很不错，后来知道github上有这么个开源项目~~~~当然本篇不是教你如何使用这个开源项目，而是教你如何自己通过自定义ViewGroup写这样的效果，自定义ViewGroup也是我的痛楚，嘿嘿，希望以此可以抛砖引玉~~ 效...
Android_Menu_ArcMenu
u010129251的专栏
03-21 727
ArcMenu使用方法： //图片文件资源 private static final int[] ITEM_DRAWABLES = { R.drawable.composer_camera, R.drawable.composer_music,    R.drawable.composer_place, R.drawable.composer_sleep, R.drawable.compos
【安卓-动画】使用ObjectAnimator实现ArcMenu动画效果
专注Code的代码狗
10-31 542
使用ObjectAnimator实现ArcMenu动画效果ObjectAnimator是Google3.0+系统提供的另一套动画框架，相比于原始的Animation动画框架，ObjectAnimator(属性动画)更灵活、方便且效率更高。使用普通的Animation框架，如果我们需要实现一个ImageView的移动效果，可以使用TranslateAnimation很轻松的”实现”，这里所说的实现是指
android ArcMenu
12-31
ArcMenu通过重写和扩展Android的基础视图类，实现了自定义动画和布局管理，从而达到预期的弧形展开效果。开发者可以将ArcMenu集成到自己的应用中，为应用添加一个引人注目的菜单展示方式。 ArcMenu的核心特性包括：...
Android利用ObjectAnimator实现ArcMenu
09-02
总结来说，`Android`利用`ObjectAnimator`实现`ArcMenu`主要是通过创建一个自定义的`ArcMenu`类，使用`ObjectAnimator`来定义和控制菜单项的动画效果。通过构造函数初始化菜单项，然后在点击事件中启动动画，实现...
Android自定义ViewGroup完美实现 ArcMenu
07-08
本文将深入探讨如何在Android中完美实现ArcMenu，并结合提供的代码实例进行解析。 首先，ArcMenu的核心在于自定义ViewGroup。自定义ViewGroup意味着我们需要继承`ViewGroup`类，并重写其关键方法，如`onLayout()`和...
Android实现多样化菜单展示：ArcMenu、LineMenu与RoundMenu
这样的库通常已经封装好了各种动画和布局逻辑，开发者只需要按照库的文档进行简单的配置和调用就可以实现上述复杂的菜单效果。使用这些库可以大幅缩短开发时间，提高应用的开发效率。 最后，让我们回到给定的文件...
android 显示在底部的ArcMenu菜单
pxcz110112的博客
07-23 580
结合各位大佬的文章整理的 自定义菜单 package com.yjcul.view; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.View; import android.view.an...
ArcMenu：一个Android自定义视图，外观类似于Path 2.0（适用于iOS）中的菜单
02-19
ArcMenu和RayMenu ArcMenu 类似于 （适用于iOS）中的菜单的android自定义视图。 光线菜单 关于 （适用于iOS）的用户体验非常棒，但android版本却错过了很多。 只是为了好玩，我尝试实现Android的惊人菜单，该菜单可能与iOS版本的菜单相同。 用法 如果要使用此库，必须首先通过从应用程序的根目录中启动以下命令来向您的应用程序表明要使用它 $ android update project --library ../relative/path/to/the/library --path . 路径是此存储library目录的相对路径。 设置菜单： ArcMenu menu = ( ArcMenu ) findViewById( R . id . arc_menu); final int itemCount = ITEM_DRAWABLES . le
Android-ArcMenu弧形菜单kotlin实现
08-13
ArcMenu 弧形菜单，kotlin实现
Android 类似于ArcMenu（github上开源项目）的自定义多个按钮视图
02-26
最近的项目中有个比较好的开源的多个分享按钮的自定义视图，感觉比较好，所以就研究了下，写了下来。其实这个demo类似于github上开源项目ArcMenu开源项目，
ArcMenu——Github上找到的一个超赞的Menu开源控件
04-29
Github上找到的一个超赞的Menu开源控件，适用于安卓开发，顾名思义，就是一个弧形的菜单控件，淘宝客户端就用了这个控件。内附详细demo
49.[开源][安卓][奇妙的弹出菜单]ArcMenu-master
02-23
49.[开源][安卓][奇妙的弹出菜单]ArcMenu-master
Android自定义控件--仿 path 效果 ArcMenu
BoBoMEe
01-02 3010
效果: Path2.0 的扇形菜单,动画很不错.在github上有这么个开源项目,使用起来也是十分的简单 参考:ArcMenu@[Github] 同时一些大神也有相关实现,出自hongyang_blog:Android 自定义ViewGroup手把手教你实现ArcMenu 使用ArcMenu可以将其下载到本地进行研究,主要就是通过自定义ViewGroup配合动画来实现的,
android 扇形弹出菜单,ArcMenu 自己封装的扇形弹出菜单库
weixin_28693309的博客
05-26 152
ArcMenu自己封装的扇形弹出菜单库。Gradle dependency build.gradlerepositories { mavenCentral() mavenLocal() }...dependencies {compile 'com.github.CCCCoder:ArcMenu:v1.0'}Example Usage:你可以根据你的需要添加各个子项的iconposition：位置在...
android 扇形菜单动画,ArcMenu，仿path中带动画效果的扇形菜单
weixin_33231849的博客
05-25 336
国外的社交应用path的新建内容菜单看起来非常生动，ArcMenu仿造path做出了相同的扇形菜单。 用法：ArcMenu menu = (ArcMenu) findViewById(R.id.arc_menu);final int itemCount = ITEM_DRAWABLES.length;for (int i = 0; i < itemCount; i++) {ImageV...
android arcmenu,Android利用ObjectAnimator实现ArcMenu
weixin_30236323的博客
05-28 156
本文介绍利用ObjectAnimator简单地实现ArcMenu，直接使用本文的ArcMenu类即可快捷地实现菜单功能。最终使用效果：先看下最终的使用效果：private int[] imageRes = {R.id.img_menu, R.id.img_menu1, R.id.img_menu2, R.id.img_menu3,R.id.img_menu4, R.id.img_menu5};pr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值