快捷導(dǎo)航

Android利用ObjectAnimator實現(xiàn)ArcMenu

更新時間：2016年07月08日 15:45:38 作者：蘇耀東

這篇文章主要為大家詳細(xì)介紹了Android利用ObjectAnimator實現(xiàn)ArcMenu的相關(guān)資料，感興趣的小伙伴們可以參考一下

本文介紹利用ObjectAnimator簡單地實現(xiàn)ArcMenu，直接使用本文的ArcMenu類即可快捷地實現(xiàn)菜單功能。

最終使用效果：

先看下最終的使用效果：

 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;
...
//初始化，參數(shù)為資源圖片id
 arcMenu = new ArcMenu(this, imageRes);

//點擊事件，這邊使用了annotation，直接使用findViewById然后設(shè)置監(jiān)聽事件也可以
  @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>

下面為截圖;

具體實現(xiàn)
初始化，通過imageRes的數(shù)量設(shè)置相鄰兩個圖標(biāo)之間的角度，同時將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，對每一個圖標(biāo)進行平移操作，第0個圖標(biāo)為菜單開關(guān)，加入旋轉(zhuǎn)動畫。

 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個圖標(biāo)，菜單圖標(biāo)，加入動畫
    ObjectAnimator.ofFloat(imageViewList.get(0),"rotation",0,135f).setDuration(200).start();
  }

同理，關(guān)閉菜單

 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();
  }

切換菜單開關(guān)

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

圖標(biāo)被點擊后，將所有子圖標(biāo)隱藏，同時調(diào)用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);
      }
    }
  }

至此，整個功能大致完成。現(xiàn)有的功能默認(rèn)arcmenu為界面右下角，其他位置相應(yīng)地修改公式即可以實現(xiàn)，可自行進行拓展，兼容不同位置。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: