网上找了一大圈也没有满意的实现效果，自己写了一个。留念
其实现在已经有完整的第三方库了。直接去github上下载一个，比自己写的好的多
- 布局的搭建。一个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>
- 接下来在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();
}
}
- 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>
然后在配置文件中引用这个主题就可以了。
