本文介紹利用ObjectAnimator簡單地實(shí)現(xiàn)ArcMenu，直接使用本文的ArcMenu類即可快捷地實(shí)現(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);//點(diǎn)擊事件，這邊使用了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>
下面為截圖;
具體實(shí)現(xiàn)
初始化，通過imageRes的數(shù)量設(shè)置相鄰兩個(gè)圖標(biāo)之間的角度，同時(shí)將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，對每一個(gè)圖標(biāo)進(jìn)行平移操作，第0個(gè)圖標(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個(gè)圖標(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)被點(diǎn)擊后，將所有子圖標(biāo)隱藏，同時(shí)調(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); } } } 至此，整個(gè)功能大致完成。現(xiàn)有的功能默認(rèn)arcmenu為界面右下角，其他位置相應(yīng)地修改公式即可以實(shí)現(xiàn)，可自行進(jìn)行拓展，兼容不同位置。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
