android arcmenu,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");

}

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

android:id="@+id/widget33"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#262a34">

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" />

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" />

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" />

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" />

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" />

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" />

下面为截图;

具体实现

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

public class ArcMenu {

private Activity context;

private int[] imageRes;

private List 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 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 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为界面右下角，其他位置相应地修改公式即可以实现，可自行进行拓展，兼容不同位置。

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