多个Floating-Action-Button展开闭合动画

网上找了一大圈也没有满意的实现效果,自己写了一个。留念
其实现在已经有完整的第三方库了。直接去github上下载一个,比自己写的好的多

  1. 布局的搭建。一个FAB显示,其他的FAB都设置为不显示。
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_launcher"></android.support.design.widget.FloatingActionButton>
<LinearLayout
    android:visibility="gone"
    android:id="@+id/layout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="00000000000"
        android:textSize="20sp"
        android:layout_gravity="center_vertical"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"></android.support.design.widget.FloatingActionButton>
</LinearLayout>
    <LinearLayout
        android:visibility="gone"
        android:id="@+id/layout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="111111111111"
        android:textSize="20sp"
        android:layout_gravity="center_vertical"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_launcher"></android.support.design.widget.FloatingActionButton>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/layout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:visibility="gone">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="*******"
        android:textSize="20sp"
        android:layout_gravity="center_vertical"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_launcher"></android.support.design.widget.FloatingActionButton>
    </LinearLayout>
</RelativeLayout>

  1. 接下来在java代码中进行FAB注册。
  private void initAction() {
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                float h = button1.getHeight();
                int i = layout1.getVisibility();
                if(i== View.VISIBLE){
                    FABAnim.hideView(layout1,h*1.2f);
                    FABAnim.hideView(layout2,h*2.5f);
                    FABAnim.hideView(layout3,h*5);
                }else {
                    FABAnim.showView(layout1,h*1.2f);
                    FABAnim.showView(layout2,h*2.5f);
                    FABAnim.showView(layout3,h*5);
                }
            }
        });
    }

这里将所有重复的动画代码提取到了一个类里。动画类代码

package com.jiuzhou.test;
import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.view.View;
import android.view.animation.OvershootInterpolator;

/**
 * coder by 背离记 on 2015/10/21.
 */
public class FABAnim {

    /**
     * 显示Veiw
     *  @param view 要显示的View
     * @param to 显示的结束位置
     */
    public static void showView(View view,float to){
//垂直方向动画
        ObjectAnimator anim2 = ObjectAnimator.ofFloat(view, "TranslationY", 0, to);
        anim2.setDuration(1000);
        anim2.setInterpolator(new OvershootInterpolator());
        anim2.start();
//渐变动画        ObjectAnimator.ofFloat(view,View.ALPHA,0,1).setDuration(1000).start();
//旋转动画        ObjectAnimator.ofFloat(view,"rotation",0,360*50).setDuration(10000).start();
        view.setVisibility(View.VISIBLE);
    }

    /**
     * 隐藏View
     *  @param view 要隐藏的View
     * @param from View初始位置
     */
    public static void hideView(final View view,float from){
        ObjectAnimator anim= ObjectAnimator.ofFloat(view, "TranslationY", from, 0);
        anim.setDuration(1000);
        //anim.setInterpolator(new OvershootInterpolator());
        anim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
//【重要】在动画完成时将可见性设置为GONE,佛则,直接设置为不可见将不能看到动画
                view.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        anim.start();
        ObjectAnimator.ofFloat(view,View.ALPHA,1,0).setDuration(1000).start();
        ObjectAnimator.ofFloat(view,"rotation",0,360*30).setDuration(1000).start();
    }

}
  1. FAB需要设置主题颜色。否则报错,在style中写如下代码
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#2196F3</item>
        <item name="colorPrimaryDark">#1565C0</item>
        <item name="colorAccent">#E91E63</item>
    </style>
</resources>

然后在配置文件中引用这个主题就可以了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容