Android实现自定义的卫星式菜单(弧形菜单)详解
作者：Jamy Cai 发布时间：2023-03-03 14:16:51
标签：android,弧形菜单,卫星菜单
一、前言
Android 实现卫星式菜单也叫弧形菜单，主要要做的工作如下：
1.动画的处理
2.自定义ViewGroup来实现卫星式菜单View
（1）自定义属性
a. 在attrs.xml中定义属性
b. 在布局中使用自定义属性
c. 在自定义View中读取布局文件中的自定义属性
（2）onMeasure 测量 child 即测量主按钮以及菜单项
（3）onLayout 布局 child 即布局主按钮以及菜单项
（4）设置主按钮的选择动画
a.为菜单项menuItem添加平移动画和旋转动画
b.实现菜单项menuItem的点击动画
卫星式菜单效果截图：
二、实现
上面介绍了原理和效果图，下面来看看卫星菜单类的实现：
1.布局文件的实现
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:xcskin="http://schemas.android.com/apk/res/com.xc.xcskin"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.xc.xcskin.view.XCArcMenuView
android:id="@+id/arcmenu"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
xcskin:position="left_bottom"
xcskin:radius="120dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_button" >
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/composer_icn_plus" />
</RelativeLayout>
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_camera"
android:tag="camera" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_music"
android:tag="music" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_place"
android:tag="place" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_sleep"
android:tag="sleep" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_thought"
android:tag="thought" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_with"
android:tag="with" />
</com.xc.xcskin.view.XCArcMenuView>
<com.xc.xcskin.view.XCArcMenuView
android:id="@+id/arcmenu2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
xcskin:position="right_bottom"
xcskin:radius="150dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/composer_button" >
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/composer_icn_plus" />
</RelativeLayout>
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_camera"
android:tag="camera" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_music"
android:tag="music" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_place"
android:tag="place" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_sleep"
android:tag="sleep" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_thought"
android:tag="thought" />
<ImageView
android:id="@+id/id_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/composer_with"
android:tag="with" />
</com.xc.xcskin.view.XCArcMenuView>
</RelativeLayout>
2.卫星菜单类的实现
package com.xc.xcskin.view;
import com.xc.xcskin.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
/**
* 卫星式菜单View
* @author caizhiming
*
*/
public class XCArcMenuView 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 View mCButton;
private OnMenuItemClickListener mOnMenuItemClickListener;
/**
* 菜单的状态枚举类
* @author caizhiming
*
*/
public enum Status{
OPEN,CLOSE
}
/**
* 菜单的位置枚举类
* @author caizhiming
*
*/
public enum Position{
LEFT_TOP,LEFT_BOTTOM,
RIGHT_TOP,RIGHT_BOTTOM
}
/**
* 点击子菜单项的回调接口
* @author caizhiming
*
*/
public interface OnMenuItemClickListener {
void onClick(View view, int pos);
}
public void setOnMenuItemClickListener(
OnMenuItemClickListener onMenuItemClickListener) {
this.mOnMenuItemClickListener = onMenuItemClickListener;
}
public XCArcMenuView(Context context) {
this(context, null);
// TODO Auto-generated constructor stub
}
public XCArcMenuView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
// TODO Auto-generated constructor stub
}
public XCArcMenuView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
//获取自定义属性
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.XCArcMenuView,defStyle,0);
int pos = a.getInt(R.styleable.XCArcMenuView_position , POS_RIGHT_BOTTOM);
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) a.getDimension(R.styleable.XCArcMenuView_radius,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150,
getResources().getDisplayMetrics()));
Log.v("czm", "mPosition = " + mPosition + ",mRadius = "+mRadius);
a.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
int count = getChildCount();
for(int i = 0; i < count; i ++){
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
if(changed){
layoutCButton();
layoutMenuItems();
}
}
/**
* 布局主菜单项
*/
private void layoutCButton() {
// TODO Auto-generated method stub
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;
default:
break;
}
mCButton.layout(l, t, l + width, t + height);
}
/**
* 布局菜单项
*/
private void layoutMenuItems() {
// TODO Auto-generated method stub
int count = getChildCount();
for (int i = 0; i < count - 1; i++) {
View child = getChildAt(i + 1);
int l = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
int t = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
int width = child.getMeasuredWidth();
int height = child.getMeasuredHeight();
// 如果菜单位置在底部 左下，右下
if (mPosition == Position.LEFT_BOTTOM || mPosition == Position.RIGHT_BOTTOM) {
t = getMeasuredHeight() - height - t;
}
// 右上，右下
if (mPosition == Position.RIGHT_TOP || mPosition == Position.RIGHT_BOTTOM) {
l = getMeasuredWidth() - width - l;
}
child.layout(l, t, l + width, t + height);
child.setVisibility(View.GONE);
}
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mCButton = findViewById(R.id.id_button);
rotateCButton(v,0,360,300);
toggleMenu(300);
}
/**
* 切换菜单
*/
public void toggleMenu(int duration) {
// TODO Auto-generated method stub
// 为menuItem添加平移动画和旋转动画
int count = getChildCount();
for (int i = 0; i < count - 1; i++)
{
final View childView = getChildAt(i + 1);
childView.setVisibility(View.VISIBLE);
// end 0 , 0
// start
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);
Animation tranAnim = null;
// to open
if (mStatus == Status.CLOSE)
{
tranAnim = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0);
childView.setClickable(true);
childView.setFocusable(true);
} else
// to close
{
tranAnim = new TranslateAnimation(0, xflag * cl, 0, yflag * ct);
childView.setClickable(false);
childView.setFocusable(false);
}
tranAnim.setFillAfter(true);
tranAnim.setDuration(duration);
tranAnim.setStartOffset((i * 100) / count);
tranAnim.setAnimationListener(new AnimationListener()
{
@Override
public void onAnimationStart(Animation animation)
{
}
@Override
public void onAnimationRepeat(Animation animation)
{
}
@Override
public void onAnimationEnd(Animation animation)
{
if (mStatus == Status.CLOSE)
{
childView.setVisibility(View.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);
childView.startAnimation(animset);
final int pos = i + 1;
childView.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (mOnMenuItemClickListener != null)
mOnMenuItemClickListener.onClick(childView, pos);
menuItemAnim(pos - 1);
changeStatus();
}
});
}
// 切换菜单状态
changeStatus();
}
/**
* 选择主菜单按钮
*
*/
private void rotateCButton(View v, float start, float end, int duration) {
// TODO Auto-generated method stub
RotateAnimation anim = new RotateAnimation(start, end,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
anim.setDuration(duration);
anim.setFillAfter(true);
v.startAnimation(anim);
}
/**
* 添加menuItem的点击动画
*
*/
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.setClickable(false);
childView.setFocusable(false);
}
}
/**
* 为当前点击的Item设置变小和透明度增大的动画
* @param duration
* @return
*/
private Animation scaleSmallAnim(int duration)
{
AnimationSet animationSet = 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);
animationSet.addAnimation(scaleAnim);
animationSet.addAnimation(alphaAnim);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
return animationSet;
}
/**
* 为当前点击的Item设置变大和透明度降低的动画
*/
private Animation scaleBigAnim(int duration)
{
AnimationSet animationSet = 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);
AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);
animationSet.addAnimation(scaleAnim);
animationSet.addAnimation(alphaAnim);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
return animationSet;
}
/**
* 切换菜单状态
*/
private void changeStatus()
{
mStatus = (mStatus == Status.CLOSE ? Status.OPEN
: Status.CLOSE);
}
/**
* 是否处于展开状态
* @return
*/
public boolean isOpen()
{
return mStatus == Status.OPEN;
}
}
3.使用卫星式菜单类
package com.xc.xcskin;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.xc.xcskin.view.XCArcMenuView;
import com.xc.xcskin.view.XCArcMenuView.OnMenuItemClickListener;
import com.xc.xcskin.view.XCGuaguakaView;
import com.xc.xcskin.view.XCGuaguakaView.OnCompleteListener;
/**
* 使用并测试自定义卫星式菜单View
* @author caizhiming
*
*/
public class XCArcMenuViewDemo extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.xc_arcmenu_view_demo);
XCArcMenuView view = (XCArcMenuView) findViewById(R.id.arcmenu);
view.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public void onClick(View view, int pos) {
// TODO Auto-generated method stub
String tag = (String) view.getTag();
Toast.makeText(XCArcMenuViewDemo.this, tag, Toast.LENGTH_SHORT).show();
}
});
}
}
三、总结
Android实现自定义的卫星式菜单(弧形菜单)的内容到这就基本结束了，感兴趣的朋友们可以动手操作起来，只有自己实践了才能更深的理解，希望本文对大家能有所帮助。
来源：http://www.cnblogs.com/JczmDeveloper/p/4390625.html?utm_source=tuicool&utm_medium=referral
0
投稿猜你喜欢
- 1.封装分页Page类package com.framework.common.page.impl;import java.io.Seria
命令模式的介绍命令模式是对命令的封装。命令模式把发出命令的责任和执行命令的责任分割开，委派给不同的对象每一个命令都是一个操作：请求的一方发出- 第一节 接口慨述接口（interface）用来定义一种程序的协定。实现接口的类或者结构要与接口的定义严格一致。有了这个协定，就可以抛开编程语
- WPF实现滚动条还是比较方便的，只要在控件外围加上ScrollViewer即可，但美中不足的是：滚动的时候没有动画效果。在滚动的时候添加过渡
- namespace ConsoleApplication1{ using System; &n
- java与scala数组及集合的操作这篇博客介绍了scala的数组 + 可变数组的基本使用，及其与java数组的区别scala数组基本操作d
- 介绍ScrollView(滚动条)，它有两种“滚动条”：竖直滚动条；水平方向上的滚动条：Horizo
- 大家好，我是老三，Spring是我们最常用的开源框架，经过多年发展，Spring已经发展成枝繁叶茂的大树，让我们难以窥其全貌。这节，我们回归
- volatile关键字相信了解Java多线程的读者都很清楚它的作用。volatile关键字用于声明简单类型变量，如int、float、boo
- 本文实例为大家分享了javaweb多文件上传及zip打包下载的具体代码，供大家参考，具体内容如下项目中经常会使用到文件上传及下载的功能。本篇
- 我们知道HashMap集合是允许存放null值的hashMap是根据key的hashCode来寻找存放位置的，那当key为null时， 怎么
- IntelliJ IDEA是很多程序员必备且在业界被公认为最好的Java开发工具，有很多小伙伴在安装完IDEA并且tomcat之后，启动to
- 相信对于打印三角形都没什么难度，只需要利用for循环嵌套使用就行但是对于打印圆形和三角形不同因为到圆心距离相等的点一般不会横坐标和纵坐标都为
- 开发项目的时候，表很多，是不可能一点点的自己去写xml ，dao文件的，这里就需要用到代码的自动生成工具了。第一步：导入jar包，当然，这之
- 新建一个txt的文本(代码中读取这个文本文档路径就行,命名随意)里面的内容一行代表一个,因为我是按行来遍历循环读取要屏蔽的关键字.然后用一个
- 1. 概述平常我们一般是使用JSON与服务器做数据通信，JSON的话，直接用GSON或者其他库去解析很简单。但是，其他有些服务器会返回XML
- 本文实例讲述了C#数据结构之堆栈(Stack)。分享给大家供大家参考，具体如下：堆栈(Stack)最明显的特征就是“先进后出”，本质上讲堆栈
- Java中字符串中子串的查找共有四种方法(indexof()) indexOf 方法返回一个整数值，指出 String 对象内子字符串的开始
- 在Java 字符终端上获取输入有三种方式：1、java.lang.System.in (目前JDK版本均支持)2、java.util.Sca
- Stream流常见的中间操作方法Streamfilter(Predicate predicate):用于对流中的数据进行过滤predicat
