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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android学习教程之圆形Menu菜单制作方法(1)

    本文实例为大家分享了Android圆形菜单的使用方法,供大家参考,具体内容如下 MainActivity.java代码: package siso.handlerdemo; import android.app.NotificationManager; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.vi

  • Android实现自定义的卫星式菜单(弧形菜单)详解

    一.前言 Android 实现卫星式菜单也叫弧形菜单,主要要做的工作如下: 1.动画的处理 2.自定义ViewGroup来实现卫星式菜单View (1)自定义属性 a. 在attrs.xml中定义属性 b. 在布局中使用自定义属性 c. 在自定义View中读取布局文件中的自定义属性 (2)onMeasure 测量 child 即测量主按钮以及菜单项 (3)onLayout 布局 child 即布局主按钮以及菜单项 (4)设置主按钮的选择动画 a.为菜单项menuItem添加平移动画和旋转动画 b

  • Android卫星菜单效果的实现方法

    Android小白第一次写博客,心情无比激动.下面给大家展示一下卫星菜单的实现. 1.简单介绍卫星菜单 在应用程序中,有很多展示菜单的方式,但其功能都是大同小异,这样一来,菜单的美观以及展示方式就显的尤为重要,卫星菜单就是很不错的一种.下面是本案例的gif图: 2.学习本案例需要的知识点 (1)动画 (2)自定义ViewGroup (3)自定义属性 a.attr.xml b.在布局中使用自定义属性 c.在代码中获取自定义属性值 3.首先分析我们的卫星菜单需要那些自定义属性并书写代码 首先,菜单可

  • Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】

    本文实例讲述了Android编程实现仿优酷圆盘旋转菜单效果的方法.分享给大家供大家参考,具体如下: 目前,用户对安卓应用程序的UI设计要求越来越高,因此,掌握一些新颖的设计很有必要. 比如菜单,传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀,这里我提供下我的思路及实现,仅供参考. 该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单,也可以反向打开,并且伴有圆盘旋转的动画效果 首先,看下效果: 以下是具体的代码及解释: 1. 菜单布局文件: 大家看到主要有三个Ra

  • Android仿优酷圆形菜单学习笔记分享

    先来看看效果: 首先来分析一下: 这个菜单可以分成三个菜单: 1.一级菜单(即最内圈那个菜单) 2.二级菜单(即中间圈那个菜单) 3.三级菜单(即最外圈那个菜单) 首先,可以将这三个菜单使用相对布局 一级菜单只有一个按钮(即home),可以控制二级和三级菜单 二级菜单有三个按钮(即menu),中间那个按钮可以控制三级菜单 三级菜单有七个按钮 那先把布局文件先写出来,采用三个相对布局(即每个菜单采用一个相对布局) <RelativeLayout xmlns:android="http://s

  • Android自定义view实现圆形与半圆形菜单

    前不久看到鸿洋大大的圆形菜单,就想开始模仿,因为实在是太酷了,然后自己根据别人(zw哥)给我讲的一些思路.一些分析,就开始改造自己的圆形菜单了. 文章结构:1.功能介绍以及展示:2.部分代码讲解:3.大致可以实现的UI效果展示讲解.4.源码附送. 一.功能介绍以及展示 第一个展示是本控件的原样.但是我们可以使用很多技巧去达到我们的商业UI效果嘛. 这里给出的是本博客作品demo的展示图以及第三点的联动展示,可见是一圆型菜单,相较于鸿洋大大的那个圆形菜单多了一些需求: 1.到时候展示只需要半圆的转

  • Android 自定义组件卫星菜单的实现

    卫星菜单 ArcMenu 相信大家接触安卓,从新手到入门的过渡,就应该会了解到卫星菜单.抽屉.Xutils.Coolmenu.一些大神封装好的一些组件.这些组件在 Github 上面很容易搜得到,但是有时候打开会发现看不懂里面的代码,包括一些方法和函数 ..... 首先先上效果图: 实现效果 首先如果要想自定义组件 1.那么第一件事就是赋予自定义组件的属性,从效果图上看出,该组件可以存在屏幕的各个角落点,那么位置是其属性之一. 2.既然是卫星菜单,那么主按钮和其附属的小按钮之间的围绕半径也应该作

  • Android圆形旋转菜单开发实例

    最近帮朋友做了一个动画菜单,感觉有一定的实用价值,就在此给大家分享一下,先看看效果: 实现思路: 从图中可以看出,这三个(或更多,需要自己再实现)菜单是围绕着中心点旋转的,旋转分为2层,背景旋转和菜单旋转,背景旋转可以直接用旋转动画来实现:菜单的旋转是在以中心点为圆心的圆环上,所以这里用了根据旋转角度求此点在直角坐标系中的坐标点的函数(x = r * cos(rotation* 3.14 / 180) 和y = r * sin(rotation* 3.14 / 180) ),然后根据获取到的点的

  • Adapter模式实战之重构鸿洋集团的Android圆形菜单建行

    对于很多开发人员来说,炫酷的UI效果是最吸引他们注意力的,很多人也因为这些炫酷的效果而去学习一些比较知名的UI库.而做出炫酷效果的前提是你必须对自定义View有所理解,作为90的小民自然也不例外.特别对于刚处在开发初期的小民,对于自定义View这件事觉得又神秘又帅气,于是小民决定深入研究自定义View以及相关的知识点. 在此之前我们先来看看洋神的原版效果图: 记得那是2014年的第一场雪,比以往时候来得稍晚一些.小民的同事洋叔是一位资深的研发人员,擅长写UI特效,在开发领域知名度颇高.最近洋叔刚

  • Android自定义ViewGroup实现带箭头的圆角矩形菜单

    本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽

  • Android自定义VIew实现卫星菜单效果浅析

     一 概述: 最近一直致力于Android自定义VIew的学习,主要在看<android群英传>,还有CSDN博客鸿洋大神和wing大神的一些文章,写的很详细,自己心血来潮,学着写了个实现了类似卫星效果的一个自定义的View,分享到博客上,望各位指点一二.写的比较粗糙,见谅.(因为是在Linux系统下写的,效果图我直接用手机拍的,难看,大家讲究下就看个效果,勿喷). 先来看个效果图,有点不忍直视: 自定义VIew准备: (1)创建继承自View的类; (2)重写构造函数; (3)定义属性. (

随机推荐