Android：FloatActionButton 简单实现弹出菜单

一、实现思路

开始时，将几个 FloatActionButton 重叠摆放在同一位置，使用 ValueAnimator 更新按钮的坐标，动态实现弹出菜单。

二、实例

1、UI设计

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/float_btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="10dp"
        android:src="@mipmap/fav_2"
        app:elevation="5dp"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/float_btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="10dp"
        android:src="@mipmap/idea"
        app:elevation="5dp"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/float_btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="10dp"
        android:src="@mipmap/faxian"
        app:elevation="5dp"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/float_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="20dp"
        android:layout_marginEnd="10dp"
        android:src="@mipmap/menu"
        app:elevation="5dp"
        app:fabSize="normal" />

</FrameLayout>

2、实现代码

private FloatingActionButton actionButton, actionButton1, actionButton2, actionButton3;
private boolean menuOpen = false;
private void showMenu() {
	menuOpen = true;
	int x = (int) actionButton.getX();
	int y = (int) actionButton.getY();
	ValueAnimator v1 = ValueAnimator.ofInt(x, x - DISTANCE);
	v1.setDuration(500);
	v1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int l = (int) animation.getAnimatedValue();
			int t = (int) actionButton1.getY();
			int r = actionButton1.getWidth() + l;
			int b = actionButton1.getHeight() + t;
			actionButton1.layout(l, t, r, b);
		}
	});
	ValueAnimator v2x = ValueAnimator.ofInt(x, x - DISTANCE2);
	ValueAnimator v2y = ValueAnimator.ofInt(y, y - DISTANCE2);
	v2x.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int l = (int) animation.getAnimatedValue();
			int t = (int) actionButton2.getY();
			int r = actionButton2.getWidth() + l;
			int b = actionButton2.getHeight() + t;
			actionButton2.layout(l, t, r, b);
		}
	});
	v2y.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int t = (int) animation.getAnimatedValue();
			int l = (int) actionButton2.getX();
			int r = actionButton2.getWidth() + l;
			int b = actionButton2.getHeight() + t;
			actionButton2.layout(l, t, r, b);
		}
	});
	ValueAnimator v3 = ValueAnimator.ofInt(y, y - DISTANCE);
	v3.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int t = (int) animation.getAnimatedValue();
			int l = (int) actionButton3.getX();
			int r = actionButton3.getWidth() + l;
			int b = actionButton3.getHeight() + t;
			actionButton3.layout(l, t, r, b);
		}
	});
	v1.start();
	v2x.start();
	v2y.start();
	v3.start();
}

private void hideMenu() {
	menuOpen = false;
	int x = (int) actionButton1.getX();
	ValueAnimator v1 = ValueAnimator.ofInt(x, (int) actionButton.getX());
	v1.setDuration(500);
	v1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int l = (int) animation.getAnimatedValue();
			int t = (int) actionButton1.getY();
			int r = actionButton1.getWidth() + l;
			int b = actionButton1.getHeight() + t;
			actionButton1.layout(l, t, r, b);
		}
	});
	x = (int) actionButton2.getX();
	int y = (int) actionButton2.getY();
	ValueAnimator v2x = ValueAnimator.ofInt(x, (int) actionButton.getX());
	ValueAnimator v2y = ValueAnimator.ofInt(y, (int) actionButton.getY());
	v2x.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int l = (int) animation.getAnimatedValue();
			int t = (int) actionButton2.getY();
			int r = actionButton2.getWidth() + l;
			int b = actionButton2.getHeight() + t;
			actionButton2.layout(l, t, r, b);
		}
	});
	v2y.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int t = (int) animation.getAnimatedValue();
			int l = (int) actionButton2.getX();
			int r = actionButton2.getWidth() + l;
			int b = actionButton2.getHeight() + t;
			actionButton2.layout(l, t, r, b);
		}
	});
	y = (int) actionButton3.getY();
	ValueAnimator v3 = ValueAnimator.ofInt(y, (int) actionButton.getY());
	v3.setDuration(500).addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
		@Override
		public void onAnimationUpdate(ValueAnimator animation) {
			int t = (int) animation.getAnimatedValue();
			int l = (int) actionButton3.getX();
			int r = actionButton3.getWidth() + l;
			int b = actionButton3.getHeight() + t;
			actionButton3.layout(l, t, r, b);
		}
	});
	v1.start();
	v2x.start();
	v2y.start();
	v3.start();
}