Android利用ObjectAnimator实现ArcMenu

本文介绍利用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};
private ArcMenu arcMenu;
...
//初始化,参数为资源图片id
 arcMenu = new ArcMenu(this, imageRes);

//点击事件,这边使用了annotation,直接使用findViewById然后设置监听事件也可以
  @Click
  public void img_menu() {
    mylog.d(" @Click img_menu");
    arcMenu.switchMenu();
  }

  @Click
  public void img_menu1() {
    arcMenu.clickItem();
    mylog.d(" @Click img_menu1");
  }

  @Click
  public void img_menu2() {
    arcMenu.clickItem();
    mylog.d(" @Click img_menu2");
  }

  @Click
  public void img_menu3() {
    arcMenu.clickItem();
    mylog.d(" @Click img_menu3");
  }

  @Click
  public void img_menu4() {
    arcMenu.clickItem();
    mylog.d(" @Click img_menu4");
  }

  @Click
  public void img_menu5() {
    arcMenu.clickItem();
    mylog.d(" @Click img_menu5");
  }

布局文件中,将需要用到的图片放在同一位置。

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/widget33"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="#262a34">

  <ImageView
    android:id="@+id/img_menu"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:src="@drawable/menu_add" />

  <ImageView
    android:id="@+id/img_menu1"
    android:visibility="gone"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:src="@drawable/float_on" />

  <ImageView
    android:id="@+id/img_menu2"
    android:visibility="gone"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:src="@drawable/float_on" />

  <ImageView
    android:id="@+id/img_menu3"
    android:visibility="gone"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:src="@drawable/float_on" />

  <ImageView
    android:id="@+id/img_menu4"
    android:visibility="gone"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:src="@drawable/float_on" />

  <ImageView
    android:id="@+id/img_menu5"
    android:visibility="gone"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:src="@drawable/float_on" />

</RelativeLayout>

下面为截图;

具体实现
 初始化,通过imageRes的数量设置相邻两个图标之间的角度,同时将imageView加入imageViewList中,方便后面使用

 public class ArcMenu {
  private Activity context;
  private int[] imageRes;
  private List<ImageView> imageViewList = new ArrayList<>();
  private boolean isShowMenu = false;
  int radius = 180;
  double angle;

  public ArcMenu(Activity context, int[] imageRes) {
    angle = Math.PI / 2 / (imageRes.length - 2);
    radius = Tool.dip2px(context, radius);
    this.context = context;
    this.imageRes = imageRes;
    for (int imagRe : imageRes) {
      ImageView imageView = (ImageView) context.findViewById(imagRe);
      imageViewList.add(imageView);
    }
  }
}

菜单弹出动画,使用ObjectAnimator,对每一个图标进行平移操作,第0个图标为菜单开关,加入旋转动画。

 private void openMenu() {
    isShowMenu = true;
    setItemVisible(true);
    ObjectAnimator animator1;
    ObjectAnimator animator2;
    List<ObjectAnimator> objectAnimators = new ArrayList<>();
    AnimatorSet set = new AnimatorSet();

    for (int i = 1; i < imageRes.length; i++) {
      animator1 = ObjectAnimator.ofFloat(imageViewList.get(i),
"translationX", (float) (-radius * Math.sin(angle * (i-1))));
      animator2 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY",
(float) (-radius * Math.cos(angle * (i-1))));
      objectAnimators.add(animator1);
      objectAnimators.add(animator2);
    }

    for (int i = 0; i < objectAnimators.size(); i++) {
      set.playTogether(objectAnimators.get(i));
    }
    set.setDuration(200);
    set.start();
    //第0个图标,菜单图标,加入动画
    ObjectAnimator.ofFloat(imageViewList.get(0),"rotation",0,135f).setDuration(200).start();
  }

同理,关闭菜单

 private void closeMenu() {
    isShowMenu = false;
    ObjectAnimator animator1 = null;
    ObjectAnimator animator2;
    List<ObjectAnimator> objectAnimators = new ArrayList<>();
    AnimatorSet set = new AnimatorSet();

    for (int i = 1; i < imageRes.length; i++) {
      animator1 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationX", 0);
      animator2 = ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 0);
      objectAnimators.add(animator1);
      objectAnimators.add(animator2);
    }

    animator1.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        setItemVisible(false);
        super.onAnimationEnd(animation);
      }
    });

    for (int i = 0; i < objectAnimators.size(); i++) {
      set.playTogether(objectAnimators.get(i));
    }

    set.setDuration(200);
    set.start();
    ObjectAnimator.ofFloat(imageViewList.get(0),"rotation",135f,0).setDuration(200).start();
  }

切换菜单开关

 public void switchMenu() {
    if (isShowMenu) {
      closeMenu();
    } else {
      openMenu();
    }
  } 

图标被点击后,将所有子图标隐藏,同时调用closMenu(),将图片移回原处。

 public void clickItem() {
    setItemVisible(false);
    closeMenu();
  }

  private void setItemVisible(boolean isVisible) {
    for (int i = 1; i < imageRes.length; i++) {
      if (isVisible) {
        imageViewList.get(i).setVisibility(View.VISIBLE);
      } else {
        imageViewList.get(i).setVisibility(View.GONE);
      }
    }
  }

至此,整个功能大致完成。现有的功能默认arcmenu为界面右下角,其他位置相应地修改公式即可以实现,可自行进行拓展,兼容不同位置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android学习笔记——Menu介绍(二)

    知识点: 这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu). 上下文菜单 上下文菜单提供对UI界面上的特定项或上下文框架的操作,就如同Windows中右键菜单一样. 在Android中,有两种提供上下文操作的方式:一种是在浮动的上下文菜单(长按弹出)中,另一种是上下文操作模式里. 那么怎样创建一个浮动的上下文菜单(floating context menu)呢? 1.调用registerForContextMenu()方法为V

  • Android仿微信菜单(Menu)(使用C#和Java分别实现)

    本篇是对安卓菜单使用编程方式实现,当然可以使用XML的方式完成同样的功能,基本Java和C#写法都是一致的,所以使用XML的方式在本篇中使用Java演示,需要注意的是,对于如果不是VS开发的话,那么资源文件名称必须以小写开头,否则会报错. 运行效果 C#实现 using Android.App; using Android.OS; using Android.Views; using Android.Widget; namespace MenuDemo { [Activity(Label = "

  • Android开源组件SlidingMenu侧滑菜单使用介绍

    现在很多android应用都有侧滑菜单,效果很不错. GitHub上有SlidingMenu的开源库,使用起来很方便. SlidingMenu GitHub地址:https://github.com/jfeinstein10/SlidingMenu.GitHub上说,Sliding结合ActionBarSherlock使用功能可以更丰富,ActionBarSherlock GitHub地址:https://github.com/JakeWharton/ActionBarSherlock 附csd

  • Android提高之自定义Menu(TabMenu)实现方法

    一般使用过UCWEB-Android版的人都应该对其特殊的menu有一定的印象,把menu做成Tab-Menu(支持分页的Menu),可以容纳比Android传统的menu更丰富的内容(Android的menu超过6项则缩略在[更多]里),本文参考网上的例子的基础上对例子进行简化以及封装,使其作为一个复合控件融入自己的framework. 先来看看本文程序运行的效果如下图所示: TabMenu本身就是一个PopupWindow,PopupWindow上面放了两个GridView,第一个GridV

  • 用Android MenuInflater创建菜单项的方法步骤

    之前在一篇文章中已经讲过了菜单项的创建方法,但是那种方法效率较低,维护不易,现在实现另一种方法创建菜单. MenuInflater,通过此类我们可以轻松的创建菜单项,具体步骤如下: 1.在res/menu/文件夹下,找到main.xml文件,此文件就是我们定义菜单项的地方,在些文件中添加如下菜单项: 复制代码 代码如下: <item android:id="@+id/menu1" android:icon="@android:drawable/alert_dark_fr

  • 在Android中创建菜单项Menu以及获取手机分辨率的解决方法

    在Activity中覆写下面两个方法: 复制代码 代码如下: // 创建菜单 @Override public boolean onCreateOptionsMenu(Menu menu) {  menu.add(0, 0, 0, "关于");  // menu.add(int groupId, int itemId, int order, CharSequence title)  menu.add(0, 1, 1, "退出");        return sup

  • Android动态添加menu菜单的简单方法

    从menu按键开始,涉及以下3个方法: 1.onCreateOptionsMenu(Menu menu)2.onPrepareOptionsMenu(Menu menu)3.onOptionsItemSelected(MenuItem item) 方法名 触发时间onCreateOptionsMenu 进入Launcher后第一次点MENU按钮时触发onPrepareOptionsMenu 有两种情况:1.进入Launcher后第一次点MENU按钮触发onCreateOptionsMenu后调用

  • Android创建Menu菜单实例

    本文实例讲述了Android创建Menu菜单的方法.分享给大家供大家参考.具体方法如下: 复制代码 代码如下: package com.test; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.provider.Settings; import android.view.Menu; import android.view.MenuInflat

  • Android学习笔记——Menu介绍(三)

    知识点 今天继续昨天没有讲完的Menu的学习,主要是Popup Menu的学习. Popup Menu(弹出式菜单) 弹出式菜单是一种固定在View上的菜单模型.主要用于以下三种情况: 为特定的内容提供溢出风格(overflow-style)的菜单进行操作. 提供其他部分的命令句(command sentence)如Add按钮可以用弹出菜单提供不同的Add的操作. 提供类似于Spinner的下拉式菜单但不保持持久的选择. 那怎样显示弹出式菜单呢? 如果你在XML文件中定义了菜单,那么以下三步就可

  • Android利用ObjectAnimator实现ArcMenu

    本文介绍利用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}; private ArcMenu arcMenu; ... //初始化,参数为资源图片id ar

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

  • Android利用属性动画实现优酷菜单

    利用属性动画实现优酷菜单,供大家参考,具体内容如下 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_p

  • Android利用Canvas标点画线并加入位移动画(1)

    本文实例为大家分享了Android利用Canvas标点画线,并加入位移动画的具体代码,供大家参考,具体内容如下 1.背景 最近由于公司业务需要,需要自己实现一个点画线,移动的需求,这自然就想到了利用Canvas进行描点,画线连线. 过程比较简单,查阅了网上文章,发现写的都特别片面,很多人也会遇到类似需求,这里把整个实现过程讲一下,并且在实现过程遇到的一些小坑讲给大家. 先看效果图 其实点击检索,小人可以按照画好的路线进行移动. 具体代码: Canvas画点连线 class DrawView ex

  • Android利用Canvas标点画线并加入位移动画(2)

    本文实例为大家分享了Android利用Canvas标点画线,并加入位移动画的具体代码,供大家参考,具体内容如下 1.背景 继上次公司需求实现Canvas面板标记点,画折现,并利用属性动画进行沿线移动之后,又有了新问题. 发现公司提供的坐标有正值有负值,并且值很大,很容易超出屏幕范围,而且由于我们Canvas坐标方向与正常坐标系不符合,由此发现做的图方向也不对. 2.问题 Canvas坐标系位于屏幕左上角,且Y正向坐标向下,如何转换? 由于坐标有正有负,而Canvas默认只显示正方向,如何解决显示

  • Android利用ZXing扫描二维码的实例代码解析

    相关阅读: Android开发框架之自定义ZXing二维码扫描界面并解决取景框拉伸问题 此项目源码地址:请点击这里 看一下zxing的项目结构,我这里直接拿过来用的 看一下扫码的activity: package com.fanyafeng.barcode.activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle

  • Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦. ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,上面是效果图,用美女图片是我一贯的作风,呵呵  1.    首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&qu

  • Android利用BitMap获得图片像素数据的方法

    本文实例讲述了Android利用BitMap获得图片像素数据的方法.分享给大家供大家参考,具体如下: 网上看到的参考是: int[] pixels = new int[bit.getWidth()*bit.getHeight()];//保存所有的像素的数组,图片宽×高 bit.getPixels(pixels,0,bit.getWidth(),0,0,bit.getWidth(),bit.getHeight()); for(int i = 0; i < pixels.length; i++){

  • Android利用悬浮按钮实现翻页效果

    今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.Layout

  • Android 利用广播监听usb连接状态(变化情况)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.lgs.test.testcode.receiver; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter; import android.widget.Toast; /** * Create

随机推荐