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个图标为菜单开关，加入旋转动画。

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