Android自定义viewGroup实现点击动画效果

本文实例为大家分享了viewGroup实现点击动画效果展示的具体代码,供大家参考,具体内容如下

public class MyCustomView extends ViewGroup implements View.OnClickListener {

  private OnMenuItemClickListener mMenuItemClickListener;

  /**
   * 点击子菜单项的回调接口
   */
  public interface OnMenuItemClickListener {
    void onClick(View view, int pos);
  }

  public void setOnMenuItemClickListener(
      OnMenuItemClickListener mMenuItemClickListener) {
    this.mMenuItemClickListener = mMenuItemClickListener;
  }

  public enum Status {
    OPEN, CLOSE
  }

  private int mRadius;
  /**
   * 菜单的状态
   */
  private Status mCurrentStatus = Status.CLOSE;
  /**
   * 菜单的主按钮
   */
  private View mCButton;

  public MyCustomView(Context context) {//通过new对象来调用
    this(context, null);
    Log.i("jj", "super(context)");
  }

  public MyCustomView(Context context, AttributeSet attrs) {//在布局中使用时调用
    this(context, attrs, 0);
    Log.i("jj", "super(context, attrs)");
  }

  public MyCustomView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    Log.i("jj", "super(context, attrs, defStyleAttr)");
    mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());
    Log.i("jj", "mRadius1: " + mRadius);
    // 获取自定义属性的值
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.MyCustomView, defStyleAttr, 0);
    mRadius = (int) a.getDimension(R.styleable.MyCustomView_radius, TypedValue
        .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100,
            getResources().getDisplayMetrics()));
    Log.i("jj", "mRadius: " + mRadius);
    a.recycle();
  }

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

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if (changed) {
      layoutCButton();
      int count = getChildCount();
      for (int i = 0; i < count - 1; i++) {
        View child = getChildAt(i + 1);
        child.setVisibility(View.GONE);
        int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2)
            * i));
        int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2)
            * i));
        int cWidth = child.getMeasuredWidth();
        int cHeight = child.getMeasuredHeight();
        ct = getMeasuredHeight() - cHeight - ct;
        cl = getMeasuredWidth() - cWidth - cl;
        child.layout(cl, ct, cl + cWidth, ct + cHeight);
      }
    }
  }

  private void layoutCButton() {
    mCButton = getChildAt(0);
    mCButton.setOnClickListener(this);
    int width = mCButton.getMeasuredWidth();
    int height = mCButton.getMeasuredHeight();
    int l = getMeasuredWidth() - width;
    int t = getMeasuredHeight() - height;
    mCButton.layout(l, t, l + width, t + width);
  }

  @Override
  public void onClick(View v) {
    rotateCButton(v, 0f, 360f, 300);
    toggleMenu(300);
  }

  private void rotateCButton(View v, float start, float end, int duration) {

    RotateAnimation anim = new RotateAnimation(start, end,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
        0.5f);
    anim.setDuration(duration);
    anim.setFillAfter(true);
    v.startAnimation(anim);
  }

  /**
   * 切换菜单
   */
  public void toggleMenu(int duration) {
    // 为menuItem添加平移动画和旋转动画
    int count = getChildCount();
    for (int i = 0; i < count - 1; i++) {
      final View childView = getChildAt(i + 1);
      childView.setVisibility(View.VISIBLE);
      int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
      int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));

      AnimationSet animset = new AnimationSet(true);
      Animation tranAnim = null;
      int xflag = 1;
      int yflag = 1;
      // to open
      if (mCurrentStatus == Status.CLOSE) {
        tranAnim = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0);
        childView.setClickable(true);
        childView.setFocusable(true);

      } else
      // to close
      {
        tranAnim = new TranslateAnimation(0, xflag * cl, 0, yflag * ct);
        childView.setClickable(false);
        childView.setFocusable(false);
      }
      tranAnim.setFillAfter(true);
      tranAnim.setDuration(duration);
      tranAnim.setStartOffset((i * 100) / count);
      tranAnim.setAnimationListener(new Animation.AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
          if (mCurrentStatus == Status.CLOSE) {
            childView.setVisibility(View.GONE);
          }
        }
      });
      // 旋转动画
      RotateAnimation rotateAnim = new RotateAnimation(0, 720,
          Animation.RELATIVE_TO_SELF, 0.5f,
          Animation.RELATIVE_TO_SELF, 0.5f);
      rotateAnim.setDuration(duration);
      rotateAnim.setFillAfter(true);
      animset.addAnimation(rotateAnim);
      animset.addAnimation(tranAnim);
      childView.startAnimation(animset);
      final int pos = i + 1;
      childView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
          if (mMenuItemClickListener != null)
            mMenuItemClickListener.onClick(childView, pos);
          menuItemAnim(pos - 1);
          changeStatus();

        }
      });
    }
    // 切换菜单状态
    changeStatus();
  }

  /**
   * 添加menuItem的点击动画
   *
   * @param
   */
  private void menuItemAnim(int pos) {
    for (int i = 0; i < getChildCount() - 1; i++) {

      View childView = getChildAt(i + 1);
      if (i == pos) {
        childView.startAnimation(scaleBigAnim(300));
      } else {
        childView.startAnimation(scaleSmallAnim(300));
      }

      childView.setClickable(false);
      childView.setFocusable(false);

    }

  }

  private Animation scaleSmallAnim(int duration) {

    AnimationSet animationSet = new AnimationSet(true);

    ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
        0.5f);
    AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);
    animationSet.addAnimation(scaleAnim);
    animationSet.addAnimation(alphaAnim);
    animationSet.setDuration(duration);
    animationSet.setFillAfter(true);
    return animationSet;

  }

  /**
   * 为当前点击的Item设置变大和透明度降低的动画
   *
   * @param duration
   * @return
   */
  private Animation scaleBigAnim(int duration) {
    AnimationSet animationSet = new AnimationSet(true);

    ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
        0.5f);
    AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f);

    animationSet.addAnimation(scaleAnim);
    animationSet.addAnimation(alphaAnim);

    animationSet.setDuration(duration);
    animationSet.setFillAfter(true);
    return animationSet;

  }

  public boolean isOpen() {
    return mCurrentStatus == Status.OPEN;
  }

  /**
   * 切换菜单状态
   */
  private void changeStatus() {
    mCurrentStatus = (mCurrentStatus == Status.CLOSE ? Status.OPEN
        : Status.CLOSE);
  }

}

attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <attr name="radius" format="dimension" />
  <declare-styleable name="MyCustomView">
    <attr name="radius" />
  </declare-styleable>
</resources>

菜单布局文件:

<com.admom.mycanvas.view.MyCustomView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:hyman="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/id_menu"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  hyman:radius="160dp">

  <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/composer_button">

    <ImageView
      android:id="@+id/id_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:src="@drawable/composer_icn_plus" />
  </RelativeLayout>

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/composer_music"
    android:tag="Music" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/composer_place"
    android:tag="Place" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/composer_sleep"
    android:tag="Sleep" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/composer_thought"
    android:tag="Sun" />

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/composer_with"
    android:tag="People" />

</com.admom.mycanvas.view.MyCustomView>

主界面布局文件:

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

  <include layout="@layout/menu_right_bottom"/>

</RelativeLayout>

在主程序直接使用:

mMenu = (MyCustomView) findViewById(R.id.id_menu);
mMenu.setOnMenuItemClickListener(new MyCustomView.OnMenuItemClickListener() {
  @Override
  public void onClick(View view, int pos) {
    Toast.makeText(MainActivity.this, pos + ":" + view.getTag(), Toast.LENGTH_SHORT).show();
  }
});
mMenu.setOnTouchListener(new View.OnTouchListener() {
  @Override
  public boolean onTouch(View v, MotionEvent event) {
    if(mMenu.isOpen()){
      mMenu.toggleMenu(300);
    }
    return false;
  }
});

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

(0)

相关推荐

  • Android动画效果之自定义ViewGroup添加布局动画(五)

    前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通过对自定义图片选择控件设置动画为例来学习布局动画. 自定义一个显示多行图片的ViewGroup: 这里不再对自定义控件做解说,想了解的可以看下以下几篇文章  •Android自定义控件之基本原理(一)  •Android自定义控件之自定义属性(二)  •Android自定义控件之自定义组合控件(三)

  • Android 触摸事件监听(Activity层,ViewGroup层,View层)详细介绍

    Android不同层次的触摸事件监听 APP开发中,经常会遇到有关手势处理的操作,比如向右滑动返回上一个页面.关于触摸事件的处理,我们可以大概处理在不同的层次上. Activity层:可以看做触摸事件获取的最顶层 ViewGroup层:ViewGroup层可以自主控制是否让子View获取触摸事件 View层:可以决定自己是否真正的消费触摸事件,如果不消费抛给上层ViewGroup Activity级别的手势监听:(右滑动返回上层界面) Activity层手势监听的使用场景:一般用于当前页面中没有

  • Android应用开发中自定义ViewGroup的究极攻略

    支持margin,gravity以及水平,垂直排列 最近在学习android的view部分,于是动手实现了一个类似ViewPager的可上下或者左右拖动的ViewGroup,中间遇到了一些问题(例如touchEvent在onInterceptTouchEvent和onTouchEvent之间的传递流程),现在将我的实现过程记录下来. 首先,要实现一个ViewGroup,必须至少重写onLayout()方法(当然还有构造方法啦:)).onLayout()主要是用来安排子View在我们这个ViewG

  • Android自定义ViewGroup的实现方法

    在android中提供了常见的几种ViewGroup的实现,包括LinearLayout.Relativeayout.FrameLayout等.这些ViewGroup可以满足我们一般的开发需求,但是对于界面要求复杂的,这几个布局就显得捉襟见肘了.所以自定义的ViewGroup在我们接触过的应用中比比皆是. 要想实现一个自定义的ViewGroup,第一步是学会自定义属性,这些自定义的属性将让我们配置布局文件的时候更加的灵活.自定义属性是在value目录下声明一个attrs.xml文件. <?xml

  • Android编程重写ViewGroup实现卡片布局的方法

    本文实例讲述了Android编程重写ViewGroup实现卡片布局的方法.分享给大家供大家参考,具体如下: 实现效果如图: 实现思路 1. 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)设置每个子View的大小 2. 重写onLayout(boolean changed, int l, int t, int r, int b) 设置每个子View的位置 第一步:新建FlowLayout继承ViewGroup package com

  • Android App开发中自定义View和ViewGroup的实例教程

    View Android所有的控件都是View或者View的子类,它其实表示的就是屏幕上的一块矩形区域,用一个Rect来表示,left,top表示View相对于它的parent View的起点,width,height表示View自己的宽高,通过这4个字段就能确定View在屏幕上的位置,确定位置后就可以开始绘制View的内容了. View绘制过程 View的绘制可以分为下面三个过程: Measure View会先做一次测量,算出自己需要占用多大的面积.View的Measure过程给我们暴露了一个

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

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

  • Android自定义ViewGroup之实现FlowLayout流式布局

    整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/  一.FlowLayout介绍  所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: git

  • 从源码解析Android中View的容器ViewGroup

    这回我们是深入到ViewGroup内部\,了解ViewGroup的工作,同时会阐述更多有关于View的相关知识.以便为以后能灵活的使用自定义空间打更近一步的基础.希望有志同道合的朋友一起来探讨,深入Android内部,深入理解Android. 一.ViewGroup是什么?        一个ViewGroup是一个可以包含子View的容器,是布局文件和View容器的基类.在这个类里定义了ViewGroup.LayoutParams类,这个类是布局参数的子类. 其实ViewGroup也就是Vie

  • Android自定义ViewGroup实现标签浮动效果

    前面在学习鸿洋大神的一些自定义的View文章,看到了自定义ViewGroup实现浮动标签,初步看了下他的思路以及结合自己的思路完成了自己的浮动标签的自定义ViewGroup.目前实现的可以动态添加标签.可点击.效果图如下: 1.思路  首先在onMeasure方法中测量ViewGroup的宽和高,重点是处理当我们自定义的ViewGroup设置为wrap_content的情况下,如何去测量其大小的问题.当我们自定义的ViewGroup设置为wrap_content时,我们需要让子View先去测量自

随机推荐