Android实现卫星菜单效果

前言

最近需求中，需要实现 卫星菜单的需求，最终通过自定义View和动画属性来实现，具体功能如下：

1.自定义View

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import com.xinrui.headsettest.R;
/**
* 卫星菜单
*/
public class SatelliteView extends ViewGroup {
 private View mBtnView;
 private MenuStatus mBStatus = MenuStatus.STATUS_CLOSE;
 private onSubItemClickListener onListener;

public enum MenuStatus {
   STATUS_OPEN, STATUS_CLOSE
 }

//子菜单点击接口
 public interface onSubItemClickListener {
   void onItemClick(View view, int position);
 }

public void setOnSubItemClickListener(onSubItemClickListener mListener) {
   this.onListener = mListener;
 }

public SatelliteView(Context context) {
   super(context);
//    this(context, null);
 }

public SatelliteView(Context context, AttributeSet attrs) {
   super(context, attrs);
//    this(context, attrs, 0);
 }

public SatelliteView(Context context, AttributeSet attrs, int defStyleAttr) {
   super(context, attrs, defStyleAttr);
 }

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   int count = getChildCount();
   for (int i = 0; i < count; i++) {
     measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
   }
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

//添加布局，就是所要显示的控件View
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
   if (changed) {
     //主菜单按钮
     onMainButton();
     //子菜单按钮
     onSubItemButton();
   }
 }

//获取主菜单按钮
 private void onMainButton() {
   mBtnView = getChildAt(0);
   mBtnView.setOnClickListener(new OnClickListener() {
     @Override
     public void onClick(View v) {
       //主菜单动画旋转动画
       Animation rotateAnim = AnimationUtils.loadAnimation(getContext(), R.anim.satellite_anim);
       mBtnView.startAnimation(rotateAnim);
       //子菜单动画
       subItemAnim();
     }
   });
   int l, t, r = 0, b = 0;
   int mWidth = mBtnView.getMeasuredWidth();
   int mHeight = mBtnView.getMeasuredHeight();
   l = getMeasuredWidth() - mWidth;
   t = getMeasuredHeight() - mHeight;
   mBtnView.layout(l, t, getMeasuredWidth(), getMeasuredHeight());
 }

//获取子菜单按钮
 private void onSubItemButton() {
   int count = getChildCount();
   for (int i = 0; i < count - 1; i++) {
     View childView = getChildAt(i + 1);

//开始时不呈现子菜单
     childView.setVisibility(View.GONE);

int radius = 350;
     int cl, ct, cr, cb;

cr = (int) (radius * Math.sin(Math.PI / 2 / (count - 2) * i));
     cb = (int) (radius * Math.cos(Math.PI / 2 / (count - 2) * i));

int cWidth = childView.getMeasuredWidth();
     int cHeight = childView.getMeasuredHeight();

cl = getMeasuredWidth() - cWidth - cr;
     ct = getMeasuredHeight() - cHeight - cb;

//layout(l,t,r,b);前两参数决定位置，后两参数决定大小
     //参数(1,t)为View控件的左上角坐标
     // (r-l,b-t)为View控件大小,r-l为控件宽度,b-t为控件高度
     childView.layout(cl, ct, getMeasuredWidth() - cr, getMeasuredHeight() - cb);
   }
 }

//子菜单散开回笼动画
 public void subItemAnim() {
   int count = getChildCount();
   for (int i = 0; i < count - 1; i++) {
     final View childView = getChildAt(i + 1);

//点击主菜单后，子菜单就立刻呈现，否则后面的动画无法完成
     childView.setVisibility(VISIBLE);

int radius = 350;
     int l, t, r, d;

r = (int) (radius * Math.sin(Math.PI / 2 / (count - 2) * i));
     d = (int) (radius * Math.cos(Math.PI / 2 / (count - 2) * i));

//      int cWidth = cView.getMeasuredWidth();
//      int cHeight = cView.getMeasuredHeight();
//
//      l = getMeasuredWidth() - cWidth - r;
//      t = getMeasuredHeight() - cHeight - d;

AnimationSet mAnimationSet = new AnimationSet(true);
     Animation mTranAnimation = null;
     if (mBStatus == MenuStatus.STATUS_CLOSE) {
       //散开动画
       mTranAnimation = new TranslateAnimation(r, 0, d, 0);
       childView.setClickable(true);
       childView.setFocusable(true);
     } else {
       //回笼动画
       mTranAnimation = new TranslateAnimation(0, r, 0, d);
       childView.setClickable(false);
       childView.setFocusable(false);
     }
     mTranAnimation.setDuration(300);
//      tranAnim.setFillAfter(true); //让最后一帧的动画不消失
     mTranAnimation.setStartOffset(100 * i / count);
     mTranAnimation.setAnimationListener(new Animation.AnimationListener() {
       @Override
       public void onAnimationStart(Animation animation) {

}

@Override
       public void onAnimationEnd(Animation animation) {
         if (mBStatus == MenuStatus.STATUS_CLOSE) {
           childView.setVisibility(GONE);
         }
       }

@Override
       public void onAnimationRepeat(Animation animation) {

}
     });

Animation rotateAnim = new RotateAnimation(
         0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
     rotateAnim.setDuration(300);
//      rotateAnim.setFillAfter(false);

mAnimationSet.addAnimation(rotateAnim);
     mAnimationSet.addAnimation(mTranAnimation);
     childView.startAnimation(mAnimationSet);

//散开后子菜单的点击监听事件
     final int pos = i + 1;
     childView.setOnClickListener(new OnClickListener() {
       @Override
       public void onClick(View v) {
         if (onListener != null) {
           onListener.onItemClick(childView, pos);
         }
         //散开后点击子菜单动画
         subItemClickAnim(pos - 1);
         changStatus();
       }
     });
   }
   changStatus();
 }

//监听子菜单状态改变
 private void changStatus() {
   mBStatus = (mBStatus == MenuStatus.STATUS_CLOSE ? MenuStatus.STATUS_OPEN : MenuStatus.STATUS_CLOSE);
 }

//散开后点击子菜单动画
 private void subItemClickAnim(int pos) {
   int count = getChildCount();
   for (int i = 0;i<count-1;i++) {
     View mChildView = getChildAt(i+1);
     if(i == pos) {
       //变大，变透明
       mChildView.startAnimation(toBig());
     }
     else {
       //变小，变透明
       mChildView.startAnimation(toSmall());
     }
     mChildView.setClickable(false);
     mChildView.setFocusable(false);
   }
 }

//变大，变透明
 private Animation toBig(){
   Animation big = AnimationUtils.loadAnimation(getContext(), R.anim.bigalpha);
   return big;
 }

//变小，变透明
 private Animation toSmall(){
   Animation small = AnimationUtils.loadAnimation(getContext(),R.anim.smallalpha);
   return small;
 }

//给ListView调用
 public boolean isOpen() {
   return mBStatus == MenuStatus.STATUS_OPEN;
 }
}

2.SatelliteActivity

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import com.xinrui.headsettest.arc.SatelliteView;

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

public class SatelliteActivity extends Activity {
 private SatelliteView mSatelliteView;
 private ListView mListView;
 private List<String> mData;
 private ArrayAdapter mAdapter;

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.satellite_layout);

mSatelliteView = (SatelliteView) findViewById(R.id.view_arc);
   mSatelliteView.setOnSubItemClickListener(new SatelliteView.onSubItemClickListener() {
     @Override
     public void onItemClick(View view, int position) {
       Toast.makeText(SatelliteActivity.this, "position" + position, Toast.LENGTH_SHORT).show();
     }
   });

initListView();
 }

private void initListView() {
   mListView = (ListView) findViewById(R.id.listview);
   mData = new ArrayList<String>();
   for (int i = 'A'; i <= 'z'; i++) {
     mData.add((char) i + "");
   }
   mAdapter = new ArrayAdapter<String>(
       SatelliteActivity.this, android.R.layout.simple_list_item_1, mData);
   mListView.setAdapter(mAdapter);

mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
     @Override
     public void onScrollStateChanged(AbsListView view, int scrollState) {

}

@Override
     public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
       if (mSatelliteView.isOpen()) {
         mSatelliteView.subItemAnim();
       }
     }
   });
 }
}

3.satellite_layout.xml

<?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">

<ListView
   android:id="@+id/listview"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

<com.xinrui.headsettest.arc.SatelliteView
   android:id="@+id/view_arc"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

<RelativeLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">

<ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:src="@drawable/menu" />
   </RelativeLayout>

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/camera" />

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/chat" />

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/contacts" />

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/music" />

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/moon" />

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/location" />
 </com.xinrui.headsettest.arc.SatelliteView>
</RelativeLayout>

4.anim动画 在res 新建anim文件夹

satellite_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <rotate
   android:duration="300"
   android:fromDegrees="0"
   android:toDegrees="360"
   android:pivotX="50％"
   android:pivotY="50％"/>
</set>

bigalpha.xml

<!--android:fillAfter="true"得加，取动画结束后的最后一帧-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
 <alpha
   android:duration="200"
   android:fromAlpha="1"
   android:toAlpha="0"/>
 <scale
   android:duration="200"
   android:fromXScale="1"
   android:fromYScale="1"
   android:toXScale="3"
   android:toYScale="3"
   android:pivotX="50％"
   android:pivotY="50％" />
</set>

smallalpha.xml

<!--android:fillAfter="true"得加，取动画结束后的最后一帧-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillAfter="true">
 <alpha
   android:duration="200"
   android:fromAlpha="1"
   android:toAlpha="0"/>
 <scale
   android:duration="200"
   android:fromXScale="1"
   android:fromYScale="1"
   android:toXScale="0"
   android:toYScale="0"
   android:pivotX="50％"
   android:pivotY="50％" />
</set>

来源：https://blog.csdn.net/baidu_41666295/article/details/106909156