Android利用ObjectAnimator實現(xiàn)ArcMenu
本文介紹利用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è)置相鄰兩個圖標之間的角度,同時將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個圖標為菜單開關(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個圖標,菜單圖標,加入動畫
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();
}
}
圖標被點擊后,將所有子圖標隱藏,同時調(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);
}
}
}
至此,整個功能大致完成?,F(xiàn)有的功能默認arcmenu為界面右下角,其他位置相應地修改公式即可以實現(xiàn),可自行進行拓展,兼容不同位置。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android中Uri和Path之間的轉(zhuǎn)換的示例代碼
本篇文章主要介紹了Android中Uri和Path之間的轉(zhuǎn)換的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
學習Android Material Design(RecyclerView代替ListView)
Android Material Design越來越流行,以前很常用的 ListView 現(xiàn)在也用RecyclerView代替了,實現(xiàn)原理還是相似的,感興趣的小伙伴們可以參考一下2016-01-01
Android適配器Adapter與ListView和RecycleView的簡單使用
本文將為大家介紹Android開發(fā)中常用的適配器(Adapter)概念,以及ListView和RecycleView的簡單使用方法,需要的朋友可以參考下2023-05-05
Android Studio導入Eclipse項目時.so庫文件的解決方法
這篇文章主要介紹了Android Studio導入Eclipse項目時項目中".so"庫文件的解決方法,需要的朋友可以參考下2018-06-06

