android卫星菜单的简单实现

https://blog.csdn.net/baidu_31093133/article/details/51298839#comments

效果图：

1、准备图片
2、添加属性动画

原理介绍：
刚开始是8张图片重叠放在一起，点击最上面的图片之后，其它7张图片移动到对应的位置。这个位置的计算是通过每个子菜单对应的弧度计算的，通过它的弧度计算出每个子菜单移动后的x坐标和y坐标。
如图：

布局文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

</FrameLayout>

</RelativeLayout>

MainActivity.java:
package com.example.lhd.mystartmenu;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //使用数组存放图片ID
    private int[] res = {
            R.id.imageview1, R.id.imageview2, R.id.imageview3, R.id.imageview4,
            R.id.imageview5, R.id.imageview6, R.id.imageview7};
    //使用List存放图片
    private List<ImageView> imgs = new ArrayList<ImageView>();
    //按钮点击事件的标志
    private boolean flag = true;
    //菜单按钮
    private ImageView imageviewstart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //将7个子菜单图片添加点击事件并添加到List
        for (int i = 0; i < res.length; i++) {
            ImageView imageview = (ImageView) findViewById(res[i]);
            imageview.setOnClickListener(this);
            imgs.add(imageview);
        }
        //主按钮添加点击事件
        imageviewstart = (ImageView) findViewById(R.id.imageview8);
        imageviewstart.setOnClickListener(this);

}

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.imageview8:
                if (flag) {
                    flag = false;
                    startAnim();//子菜单弹出动画
                } else {
                    flag = true;
                    closeAnim();//子菜单收回动画
                }
                break;
            default:
      Toast.makeText(MainActivity.this, "Click" + v.getId(), Toast.LENGTH_SHORT).show();
                break;
        }
    }
    private void closeAnim() {
    //一共是7个子菜单，7个子菜单就是把90度分成6分，然后以这个为基准计算菜单的弧度。PI/2/6
        float myroate = (float) (Math.PI / 2 / 6);
        for (int i = 0; i < res.length; i++) {
   //500是半径，通过三角函数计算坐标
float x = (float) (500 * Math.cos(myroate * i));
float y = (float) (500 * Math.sin(myroate * i));

//使用属性动画的平移动画，将坐标从现在的位置移回到原点
    ObjectAnimator animator = ObjectAnimator.ofFloat(imgs.get(i),
                    "translationY", y, 0);
   ObjectAnimator animator2 = ObjectAnimator.ofFloat(imgs.get(i),
                    "translationX", x, 0);
//使用AnimatorSet可以同时播放多个属性动画
AnimatorSet set = new AnimatorSet();
//使用自由落体的差值器
animator.setInterpolator(new BounceInterpolator());
animator2.setInterpolator(new BounceInterpolator());
             //设定同时播放
            set.playTogether(animator, animator2);
            //设定播放时间
            set.setDuration(1000);
            //开始播放动画（千万不要忘记这一行）
            set.start();
        }
    }

    private void startAnim() {
        float myroate = (float) (Math.PI / 2 / 6);
        for (int i = 0; i < res.length; i++) {
float x = (float) (500 * Math.cos(myroate * i));
float y = (float) (500 * Math.sin(myroate * i));

//使用属性动画的平移动画，将坐标从原点移动到每个子菜单对应的位置
ObjectAnimator animator = ObjectAnimator.ofFloat(imgs.get(i),
                    "translationY", 0, y);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imgs.get(i),
                    "translationX", 0, x);
AnimatorSet set = new AnimatorSet();
animator.setInterpolator(new BounceInterpolator());
animator2.setInterpolator(new BounceInterpolator());
            set.playTogether(animator, animator2);
            set.setDuration(1000);
            set.start();
        }
    }
}

这样就完成了一个简单的放射菜单。
慕课网有更加完善的放射菜单的教程：http://www.imooc.com/learn/300

标签: 圆形菜单卫星

小毅网志

android卫星菜单的简单实现

相关推荐

网友评论（0）