android環形彈出菜單的實現
來源：程序員人生 發布時間：2016-02-28 09:56:11 閱讀次數：3568次
前言：
最近在eoe上看到了1個環形菜單的效果，其實之前在github上早就見過了，看到實現代碼也是挺多的，依照自己的思路做了1下效果，實現還是比較簡單的。這個項目離組件還是有1定的上升空間的，只要是教會大家如何去做1個類似的效果。
奉上效果圖：
看到這里大家有無1種很熟習的感覺，對，99.99999999%你看過。空話不多說，開始今天的教程。
項目結構圖：
對，你沒有看錯，就只有這兩個文件需要修改，其他都是默許生成的文件。
我們先來看看activity_main.xml中的布局：
這邊有8個ImageView，位置是堆疊起來的（只要把主菜單，也就是那個紅色的按鈕的圖片置于頂部就好了），這邊我需要sorry的1點就是，圖片的位置可能有點需要微調，處女座的自行略過。每一個ImageView都定義了1個id和1個onClick事件。基本都是我們之前都熟習的東西，沒有甚么需要特別介紹的。
主要代碼來了，前方高能。
MainActivity.java的主要代碼：
package com.beyole.objectanimatortest;
import java.util.ArrayList;
import java.util.List;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends Activity {
//圖片資源
private int[] res = { R.id.id_a, R.id.id_b, R.id.id_c, R.id.id_d, R.id.id_e, R.id.id_f, R.id.id_g, R.id.id_h };
//寄存ImageView
private ListimageViewList = new ArrayList();
//菜單是否是展開
private boolean isNotExpand = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//利用循環，初始化ImageView組件
for (int i = 0; i < res.length; i++) { ImageView imageView = (ImageView) findViewById(res[i]); //寄存在list中 imageViewList.add(imageView); } } //點擊事件 public void clickview(View view) { switch (view.getId()) { //主菜單被點擊 case R.id.id_a: //主菜單沒有展開時被點擊 if (isNotExpand == true) { //啟動動畫 startAnim(); } else { //關閉動畫 closeAnim(); } break; //定義其他組件被點擊時觸發的事件 default: Toast.makeText(MainActivity.this, "您點擊了:" + view.getId(), Toast.LENGTH_LONG).show(); break; } } //關閉動畫 private void closeAnim() { for (int i = 1; i < res.length; i++) { float angle = (90 * 1.0f / (res.length - 2)) * (i - 1); PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("translationX", (float) (Math.sin((angle * 1.57 / 90)) * 200), 0); PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("translationY", (float) (Math.cos((angle * 1.57 / 90)) * 200), 0); ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViewList.get(i), holder1, holder2); // ObjectAnimator animator = // ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", i * 60, // 0); animator.setDuration(300); animator.start(); isNotExpand = true; } } //開始動畫 private void startAnim() { //遍歷第1個不是主菜單的ImageView列表 for (int i = 1; i < res.length; i++) { //獲得展開角度 float angle = (90 * 1.0f / (res.length - 2)) * (i - 1); //獲得X位移 PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("translationX", 0, (float) (Math.sin((angle * 1.57 / 90)) * 200)); //獲得Y位移 PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("translationY", 0, (float) (Math.cos((angle * 1.57 / 90)) * 200)); //設置ImageView的屬性動畫 ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(imageViewList.get(i), holder1, holder2); // ObjectAnimator animator = // ObjectAnimator.ofFloat(imageViewList.get(i), "translationY", 0, i * // 60); //動畫時間 animator.setDuration(1000); //動畫延遲時間 animator.setFrameDelay(500 * i); //設置加速器 animator.setInterpolator(new BounceInterpolator()); //啟動動畫 animator.start(); isNotExpand = false; } } }
本篇的效果主要是依托ObjectAnimator屬性動畫來實現的，如果對ObjectAnimator不了解的話，百度1下，有很多關于這個方面的資料，本文就不再贅述了。其實這邊需要有1個小的數學技能，就是獲得ImageView的角度問題，我這邊是通過ImageView的個數出去除去主菜單的1個Imageview，將90度分為res.length⑵份，再乘以下標減去1，就是我們需要平移的角度。那末X的位移就是sina*R,y的唯1就是cosa*R,（這邊的1.57是2分之圓周率）。行了，到這里就算是結束了。關閉效果就是把開啟動畫的進程逆過來就是了，這里不詳細介紹。
可能有講的不好的地方，或有需要改進的代碼，歡迎大家提出寶貴意見，我會好好改進的。
csdn下載地址:http://download.csdn.net/detail/xuejiawei123/9197525
github地址：https://github.com/xuejiawei/beyole_android_ObjectAnimatorToolBars
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
