登录
当前位置： 首页 > 编程笔记 >

Android实现自定义的卫星式菜单(弧形菜单)详解

公冶谦
2023-03-14
本文向大家介绍Android实现自定义的卫星式菜单(弧形菜单)详解，包括了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实现自定义的卫星式菜单(弧形菜单)的内容到这就基本结束了，感兴趣的朋友们可以动手操作起来，只有自己实践了才能更深的理解，希望本文对大家能有所帮助。

 类似资料：
  • Android卫星菜单效果的实现方法

    本文向大家介绍Android卫星菜单效果的实现方法，包括了Android卫星菜单效果的实现方法的使用技巧和注意事项，需要的朋友参考一下 Android小白第一次写博客，心情无比激动。下面给大家展示一下卫星菜单的实现。 1.简单介绍卫星菜单 在应用程序中，有很多展示菜单的方式，但其功能都是大同小异，这样一来，菜单的美观以及展示方式就显的尤为重要，卫星菜单就是很不错的一种。下面是本案例的gif图：  

  • 自定义菜单

    1. 小程序更多菜单功能说明 为了支持 App 内的不同业务需求、支持不同类型的分享，当前 SDK 支持配置更多菜单，按类型可分为 onMiniProgram 和 common 类型（均在管理后台配置） common: 该类型无需小程序添加额外处理 onMiniProgram: 该类型菜单在点击时，会向小程序获取数据用以提供给 App 的业务处理 如果菜单的按钮类型是 onMiniProgram

  • 自定义菜单

    自定义菜单是指为单个应用设置自定义菜单功能，所以在使用时请注意调用正确的应用实例。 $config = [ 'corp_id' => 'xxxxxxxxxxxxxxxxx', 'secret' => 'xxxxxxxxxx', // 应用的 secret //... ]; $app = Factory::work($config); 创建菜单 $menus = [

  • jQuery实现自定义右键菜单的树状菜单效果

    本文向大家介绍jQuery实现自定义右键菜单的树状菜单效果，包括了jQuery实现自定义右键菜单的树状菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果。分享给大家供大家参考。具体如下： 这是一款基于jQuery的自定义右键菜单，在树状结构的子节点（下级没有节点）上单击右键才会弹出自定义菜单，而且菜单是自动根据鼠标位置来定位的。当鼠标在菜单

  • Android实现自定义滑动式抽屉菜单效果

    本文向大家介绍Android实现自定义滑动式抽屉菜单效果，包括了Android实现自定义滑动式抽屉菜单效果的使用技巧和注意事项，需要的朋友参考一下 在Andoird使用Android自带的那些组件，像SlidingDrawer和DrawerLayout都是抽屉效果的菜单，但是在项目很多要实现的功能都收到Android这些自带组件的限制，导致很难完成项目的需求，自定义的组件，各方面都在自己的控制之下

  • 自定义菜单上的Wordpress样式活动菜单项

    我正在创建一个wordpress模板，目前我正在制作菜单，我已经制作了以下内容： http://jsfidle.net/skunheal/umkyr/ 有两个小问题，我不知道如何解决。Wordpress为当前活动的菜单项提供class.current_page_item。我该怎么做呢？ 我想的是： 普通菜单项： 活动菜单项： 但似乎不起作用。有人知道为什么吗？ 谢谢你，梅里恩

相关阅读

Android自定义控件简单实现侧滑菜单效果iOS实现滑动弧形菜单的思路与方法Vue实现自定义下拉菜单功能php微信开发之自定义菜单实现Android实现动画效果的自定义下拉菜单功能

相关文章

Bootstrap 下拉菜单Bootstrap4 下拉菜单Eclipse 导航菜单Eclipse 搜索菜单AWT 菜单组件

相关问答

Wordpress将自定义分类添加到自定义菜单在自定义菜单中获取自定义字段ACF自定义Android日历视图-显示下拉菜单如何在Android中创建自定义抽屉菜单菜单和自定义类中的WordPress帖子

相关工具

滚动菜单四格菜单旋转菜单左右菜单Demo立方体菜单

相关文档

Git 菜单如何实现自己的 jQuery鸟哥的 Linux 私房菜：基础学习篇 第四版Android Animation 动画详解Vue 单元测试策略与实践
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.