FloatingActionButton(FAB) 是 Android 5.0 新特性——Material Design 中的一个控件,是一种悬浮的按钮。

FloatingActionButton 是 ImageView 的子类,因此它具备ImageView的全部属性。

FloatingActionButton 结合 CoordinatorLayout 使用,即可实现悬浮在任意控件的任意位置。

使用 FloatingActionButton 的难点主要是布局,其在JAVA代码中的用法和普通的 ImageView 基本相同。

跟所有MD控件一样,要使用FAB,需要在gradle文件中先注册依赖:

compile 'com.android.support:design:25.0.0'

1、FAB 基本属性:

        android:src:FAB中显示的图标,最好是24dp的
app:backgroundTint:正常的背景颜色
app:rippleColor:按下时的背景颜色
app:elevation:正常的阴影大小
app:pressedTranslationZ:按下时的阴影大小
app:layout_anchor:设置FAB的锚点,即以哪个控件为参照设置位置
app:layout_anchorGravity:FAB相对于锚点的位置
app:fabSize:FAB的大小,normal或mini(对应56dp和40dp)
注意:要想让FAB显示点击后的颜色和阴影变化效果,必须设置onClick事件

实例布局代码:

<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20.0dip"
android:onClick="click"
android:src="@mipmap/ic_launcher"
app:backgroundTint="#30469b"
app:borderWidth="0.0dip"
app:elevation="5.0dip"
app:fabSize="normal"
app:layout_anchor="@id/container"
app:layout_anchorGravity="right|bottom"
app:pressedTranslationZ="10.0dip"
app:rippleColor="#a6a6a6" /> </android.support.design.widget.CoordinatorLayout>

运行结果图:

2、交互事件:

FloatingActionButton 的用法和ImageView基本相同,要想设置FloatingActionButton的点击事件,直接调用setOnClickListener()方法即可。

值得一提的是,当FloatingActionButton与Snackbar一起使用的时候,有时候会发生“Snackbar将FloatingActionButton覆盖”的问题,即FloatingActionButton不会因为Snackbar的弹出而上移,这是因为Snackbar的make()方法第一个参数没有与FloatingActionButton绑定,只要Snackbar的make()方法第一个参数是FloatingActionButton对象,就不会出现上述问题,实例代码如下:

        fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 第一个参数设置为FAB就可以使FAB跟随Snackbar移动
Snackbar.make(v, "去下一页?", Snackbar.LENGTH_LONG).setAction("确定", new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, NextActivity.class));
}
}).show();
}
});

运行结果如下图:

       

3、FAB 滑动隐藏/显示:

很多应用中都有这种界面:界面中有一个FAB和一个RecyclerView,当RecyclerView向下滑动时,FAB消失;当RecyclerView向上滑动时,FAB又显示出来。这是FAB与RecyclerView、CoordinatorLayout结合使用的结果。通过设置FAB在CoordinatorLayout中的Behavior来实现这种效果。下面贴代码:

布局代码:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_next"
android:layout_width="match_parent"
android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView
android:id="@+id/next_rv"
android:layout_width="match_parent"
android:layout_height="match_parent" /> <android.support.design.widget.FloatingActionButton
android:id="@+id/next_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20.0dip"
android:onClick="click"
android:src="@mipmap/ic_launcher"
app:backgroundTint="@color/colorPrimaryDark"
app:elevation="5.0dip"
app:fabSize="normal"
app:layout_anchor="@id/next_rv"
app:layout_anchorGravity="bottom|right"
app:layout_behavior="com.example.testfloatingactionbutton.ScrollAwareFABBehavior"
app:pressedTranslationZ="10.0dip"
app:rippleColor="@color/colorPrimary" /> </android.support.design.widget.CoordinatorLayout>

ScrollAwareFABBehavior类中的代码:

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
// 动画插值器,可以控制动画的变化率
private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator(); // 是否正在执行隐藏的动画
private boolean mIsAnimatingOut = false; public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
super();
} @Override
public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
final View directTargetChild, final View target, final int nestedScrollAxes) {
// 如果是上下滑动的,则返回true
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
|| super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
} @Override
public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
final View target, final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
// 用户向下滑动时判断是否正在执行隐藏动画,如果不是,而且FAB当前是可见的,则执行隐藏动画隐藏FAB
animateOut(child);
} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
// 用户向上滑动时判断FAB是否可见,如果不可见则执行显示动画显示FAB
animateIn(child);
}
} // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits
// 执行隐藏动画隐藏FAB
private void animateOut(final FloatingActionButton button) {
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
.setListener(new ViewPropertyAnimatorListener() {
public void onAnimationStart(View view) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
} public void onAnimationCancel(View view) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
} public void onAnimationEnd(View view) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
view.setVisibility(View.GONE);
}
}).start();
} else {
Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);
anim.setInterpolator(INTERPOLATOR);
anim.setDuration(200L);
anim.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
} public void onAnimationEnd(Animation animation) {
ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
button.setVisibility(View.GONE);
} @Override
public void onAnimationRepeat(final Animation animation) {
}
});
button.startAnimation(anim);
}
} // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters
// 执行显示动画显示FAB
private void animateIn(FloatingActionButton button) {
button.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
.setInterpolator(INTERPOLATOR).withLayer().setListener(null)
.start();
} else {
Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);
anim.setDuration(200L);
anim.setInterpolator(INTERPOLATOR);
button.startAnimation(anim);
}
}
}

FAB显示的动画fab_in:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:zAdjustment="top">
<scale
android:duration="@android:integer/config_mediumAnimTime"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale=".5"
android:toYScale=".5" />
<alpha
android:duration="@android:integer/config_mediumAnimTime"
android:fromAlpha="1.0"
android:toAlpha="0" />
</set>

FAB隐藏的动画fab_out:

<set xmlns:android="http://schemas.android.com/apk/res/android">
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<scale
android:duration="@android:integer/config_mediumAnimTime"
android:fromXScale="2.0"
android:fromYScale="2.0"
android:pivotX="50%p"
android:pivotY="50%p"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
</set>

运行效果如下图:

以上就是对FloatingActionButton用法的简单介绍,下面贴出码云上的代码,供大家参考。

DEMO地址

【Android - MD】之FloatingActionButton的使用的更多相关文章

  1. 【Android - MD】之CoordinatorLayout的使用

    CoordinatorLayout是Android 5.0新特性--Material Design中的一个布局控件,主要用来协调各个子视图之间的工作,也可以用来作为顶部布局.CoordinatorLa ...

  2. 【Android - MD】之Snackbar的使用

    Snackbar 是 Android 5.0 新特性--Material Design 中的一个控件,用来代替 Toast ,Snackbar与Toast的主要区别是:Snackbar可以滑动退出,也 ...

  3. 【Android - MD】之NavigationView的使用

    NavigationView是Android 5.0新特性--Material Design中的一个布局控件,可以结合DrawerLayout使用,让侧滑菜单变得更加美观(可以添加头部布局). Nav ...

  4. 【Android - MD】之TextInputLayout的使用

    TextInputLayout是Android 5.0新特性--Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如: 当输入框获取焦点时,输入提 ...

  5. 【Android - MD】之TabLayout的使用

    TabLayout是Android 5.0新特性--Material Design中的一个控件,是一个标签页的导航条,常结合ViewPager完成页面导航. 和其他MD控件一样,使用TabLayout ...

  6. Android——MaterialDesign之四 FloatingActionButton、Snackbar、CoordinaterLayout

    FloatingActionButton 悬浮按钮,默认colorAccent来作为按钮的颜色 <android.support.design.widget.FloatingActionButt ...

  7. 【Android - MD】之RecyclerView的使用

    RecyclerView是Android 5.0新特性--Material Design中的一个控件,它将ListView.GridView整合到一起,可以使用极少的代码在ListView.GridV ...

  8. 【Android - MD】之CardView的使用

    CardView是Android 5.0新特性--Material Design中的一个布局控件,可以通过属性设置显示一个圆角的类似卡片的视图. 1.CardView的属性: app:cardCorn ...

  9. Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout

    如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...

随机推荐

  1. chrome输入框记住密码导致背景黄色的解决方案

    在form头部增加以下内容 <input type="text" style="display:hidden;"> <input type=& ...

  2. 修改hosts使用谷歌服务

    原文链接如下: http://www.findspace.name/res/72#_1

  3. jsp页面 使用c 标签的 varStatus 属性和 index 解决一行显示多少个 然后进行自动换行

    jsp页面显示,一行有三条记录,自动换行 <c:forEach items="${slist}" var="s" varStatus="stat ...

  4. Attributes(1):反射Attribute并输出

    using System; using System.Reflection; using System.Text;   namespace Attribute01 { class Program { ...

  5. uboot的mtd功能支持

    一.概述 1.MTD MTD是Flash的一种管理方法,将Flash划分成几个分区,便于管理. u-boot的MTD功能是在文件cmd_jffs2.c中实现的,由此我们可以知道怎样打开u-boot的M ...

  6. 学习Swift -- 协议(下)

    协议(下) 在拓展中添加协议成员 通过扩展使得Dice类型遵循了一个新的协议,这和Dice类型在定义的时候声明为遵循TextRepresentable协议的效果相同.在扩展的时候,协议名称写在类型名之 ...

  7. winfrom获得鼠标的坐标

    Point mouse = this.PointToScreen(Control.MousePosition);label1.Text = mouse.X.ToString() + ":&q ...

  8. Remote Direct Memory Access (RDMA)

    RDMA有三类实现方式,包括RoCE,iWARP和InfiniBand.RDMA的基础是Virtual Interface Architechure (VIA). 参考文档: https://en.w ...

  9. Html和JS基础

    1.body:bgcolor,background(背景图片),bgproperities=fixed(图片水印),text(正文颜色). 2.hr:水平分割线,正文标题<h?>自动换行了 ...

  10. Android 正则表达式匹配汉字中文

    关于中文的正则表达式, 应该是^[\\u4E00-\\u9FFF]+$, 和论坛里常被人提起的^[\\u4E00-\\u9FA5]+$很接近需要注意的是论坛里说的^[\\u4E00-\\u9FA5]+ ...