欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android利用ObjectAnimator实现ArcMenu

程序员文章站 2024-03-03 22:53:16
本文介绍利用objectanimator简单地实现arcmenu,直接使用本文的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> 

下面为截图;

 Android利用ObjectAnimator实现ArcMenu

具体实现
 初始化,通过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为界面右下角,其他位置相应地修改公式即可以实现,可自行进行拓展,兼容不同位置。

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