android-属性动画之 动态菜单按钮

废话不多说，先看效果：

这是菜单展开之前：

这是展开之后:

如果重复点击最左边的按钮，就会切换 "展开" 和 "收缩" 的状态。

===================================================

调用的代码如下（涉及到的图片资源，我就不上传了，这里只是说明这种效果的制作思路）：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.beautifulanimator.MyLinearLayout
        android:id="@+id/ml_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

package com.example.beautifulanimator;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;

/**
 * 
 */
public class MainActivity extends AppCompatActivity {

    private MyLinearLayout myLinearLayout;

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

        myLinearLayout = findViewById(R.id.ml_menu);
        myLinearLayout.preset(getResources().getDrawable(R.drawable.f6, null), lis01);// 预设3个按钮，指定它的图片和事件
        myLinearLayout.preset(getResources().getDrawable(R.drawable.f3, null), lis02);
        myLinearLayout.preset(getResources().getDrawable(R.drawable.f4, null), lis03);
        myLinearLayout.initLayout(this, getResources().getDrawable(R.drawable.f1, null));
    }

    View.OnClickListener lis01 = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.d("myLinearLayout", "click 01");
        }
    };

    View.OnClickListener lis02 = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.d("myLinearLayout", "click 01");
        }
    };

    View.OnClickListener lis03 = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.d("myLinearLayout", "click 01");
        }
    };

}

------------------------------

然后展出自定义Layout的代码:

package com.example.beautifulanimator;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

public class MyLinearLayout extends LinearLayout {

    /****************************构造函数****************/
    public MyLinearLayout(Context context) {
        this(context, null);
    }

    public MyLinearLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initLayoutParameters(context);
    }

    /****************************私有函数********************************/
    private void initLayoutParameters(Context context) {
        setOrientation(LinearLayout.HORIZONTAL);// 线性布局-横向
        setPadding(DensityUtil.dip2px(context, 10), DensityUtil.dip2px(context, 10),
                DensityUtil.dip2px(context, 10), DensityUtil.dip2px(context, 10));
    }

    private ImageView iv_head;// 主按钮
    private float startDegree, endDegree;//开始旋转的角度以及结束的角度
    private List<View> childrenMenuIconList = new ArrayList<>();// 已经绘制好的子view
    private boolean ifMenuOpened = false;//菜单是否打开了
    private float startX, endX;
    private boolean ifAnimateOver = true;//动画是否执行完毕(未完毕期间不接受点击事件)
    private int animationDuration = 300;// 动画执行的时长

    /**
     * 旋转主按钮
     *
     * @param iv_01
     */
    private void rotateMenuIcon(ImageView iv_01) {
        if (ifMenuOpened) {
            startDegree = 90;
            endDegree = 0;
        } else {
            startDegree = 0;
            endDegree = 90;
        }

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv_01, "rotation", startDegree, endDegree);
        objectAnimator.setDuration(animationDuration);
        objectAnimator.start();
    }

    private void setIfAnimateOver(boolean temp) {
        ifAnimateOver = temp;
    }

    /**
     * 绘制子menu
     */
    private void drawChildMenuIcon(Context context, Drawable drawable, View.OnClickListener listener) {
        setIfAnimateOver(false);
        AnimatorSet animatorSet = new AnimatorSet();
        final ImageView iv_menu = new ImageView(context);
        iv_menu.setOnClickListener(listener);
        iv_menu.setImageDrawable(drawable);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);//宽高自适应
        layoutParams.width = DensityUtil.dip2px(context, 60);
        layoutParams.height = DensityUtil.dip2px(context, 60);
        addView(iv_menu, layoutParams);
        childrenMenuIconList.add(iv_menu);

        //我需要的是横向的起始X和终点X
        startX = -layoutParams.width;
        endX = 0;

        //ObjectAnimator 的 value参数，它这里有个坑，如果你是想让它慢慢显示，必须写0,1，而不能只写1.
        //但是如果需要让它慢慢隐藏，可以只写0
        ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(iv_menu, "alpha", 0, 1);
        objectAnimator2.setDuration(animationDuration);
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(iv_menu, "translationX", startX, endX);
        objectAnimator.setDuration(animationDuration);

        animatorSet.playTogether(objectAnimator2, objectAnimator);//同时执行
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                setIfAnimateOver(true);
            }
        });
        animatorSet.start();
        Log.d("iv_menu", "click lis end");
    }

    private List<Animator> listAnimator = new ArrayList<>();

    private void hideChildMenu() {
        listAnimator.clear();
        setIfAnimateOver(false);
        for (final View v : childrenMenuIconList) {
            ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(v, "translationX", endX, startX);
            objectAnimator.setDuration(animationDuration);
            objectAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    Log.d("hideChildMenu", "" + v.getHeight() + "-" + v.getWidth());
                    removeView(v);
                }
            });
            listAnimator.add(objectAnimator);

            objectAnimator = ObjectAnimator.ofFloat(v, "alpha", 0);
            objectAnimator.setDuration(animationDuration);
            listAnimator.add(objectAnimator);
        }

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(listAnimator);
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                setIfAnimateOver(true);
            }
        });
        animatorSet.start();
        childrenMenuIconList.clear();//最后将childrenList清空
    }

    /*******************************辅助内部类***************************************/
    private List<DrawLis> drawLisList = new ArrayList<>();//即将绘制的view的相关参数

    class DrawLis {
        Drawable drawable;
        View.OnClickListener listener;

        DrawLis(Drawable drawableT, View.OnClickListener listenerT) {
            drawable = drawableT;
            listener = listenerT;
        }
    }
    /****************************公开接口********************************/
    /**
     * 新增一个按钮以及一个监听
     *
     * @param drawable
     * @param listener
     */
    public void preset(Drawable drawable, View.OnClickListener listener) {
        drawLisList.add(new DrawLis(drawable, listener));
    }

    public void initLayout(final Context context, Drawable drawable) {
        iv_head = new ImageView(context);
        iv_head.setScaleType(ImageView.ScaleType.CENTER_INSIDE);//设置等比例缩放，不会改变原图的纵横比
        iv_head.setImageDrawable(drawable);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.width = DensityUtil.dip2px(context, 60);//设置为60dp宽
        params.height = DensityUtil.dip2px(context, 60);//设置为60dp高
        addView(iv_head, params);//将主按钮加入布局

        iv_head.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // 它的点击事件，点击之后，展开其他3个按钮
                if (ifAnimateOver)//如果动画执行完毕了，那就可以进行下面的操作
                {
                    rotateMenuIcon(iv_head);// 让主按钮产生旋转效果
                    if (!ifMenuOpened) {
                        for (DrawLis lis : drawLisList) {
                            drawChildMenuIcon(context, lis.drawable, lis.listener);//逐一添加child
                        }
                        ifMenuOpened = true;
                    } else {
                        hideChildMenu();
                        ifMenuOpened = false;
                    }
                }
            }
        });
    }

}

还有一个辅助类，用户转化dp和px：

package com.example.beautifulanimator;

import android.content.Context;

public class DensityUtil {

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     *
     * @param context
     * @param dpValue
     * @return
     * @date   2015年10月28日
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     *
     * @param context
     * @param pxValue
     * @return
     * @date   2015年10月28日
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

关键代码已经加了注释。欢迎各位大佬留言讨论。