关闭

Android FloatingActionButton使用方法及小技巧-design

标签: androiddesignfabfabSizeSnackbar
4674人阅读 评论(0) 收藏 举报
分类:

FloatingActionButton(简称FAB)的使用方法非常的简单

和一个普通控件一样,在xml布局文件中定义(记得导入Design包)

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="20dp"
        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#00ff00"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:pressedTranslationZ="10dp"
        app:rippleColor="#ff87ffeb"/>
  • src:设置FAB的图标,google建议图标的大小为24dp
  • backgroundTint:按钮的默认颜色
  • borderWidth:设置为0dp,不然在4.1的SDK上会显示方块形,在5.x的系统上运行会没有阴影
  • pressedTranslationZ:设置立体感,点击时的阴影大小,默认是12dp
  • fabSize:设置FloatingActionButton的大小样式,normal为正常大小(56dp),mini为小号的(40dp)
  • elevation:设置立体感,正常情况下阴影的大小,默认为6dp
  • rippleColor:点击时的颜色,默认取theme中colorControlHighlight的颜色

FAB的点击事件和普通View的点击事件一样,使用OnClickListener设置监听

原生的FAB在体验上并不友好,因为它遮挡住了要显示的内容,尤其是在和ListView等控件搭配时,如果页面滚动到了最后,那么遮住的部位就显示不出来了。
解决方法:在页面向下滑动的时候隐藏FAB,向上滑动时再显示出来

查看源码可以发现,FAB为我们提供了显示和隐藏的方法

    /**
     * Hides the button.
     * <p>This method will animate the button hide if the view has already been laid out.</p>
     */
    public void hide() {
        hide(null);
    }

    /**
     * Shows the button.
     * <p>This method will animate the button show if the view has already been laid out.</p>
     */
    public void show() {
        show(null);
    }

想实现这样的效果,需要使用到CoordinatorLayout布局,它帮我们协调好了这一系列交互
CoordinatorLayout中通过Behavior间接的来控制其子View的各种行为,在FAB内部已经实现了Behavior接口

    /**
     * Behavior designed for use with {@link FloatingActionButton} instances. It's main function
     * is to move {@link FloatingActionButton} views so that any displayed {@link Snackbar}s do
     * not cover them.
     */
    public static class Behavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
        // We only support the FAB <> Snackbar shift movement on Honeycomb and above. This is
        // because we can use view translation properties which greatly simplifies the code.
        private static final boolean SNACKBAR_BEHAVIOR_ENABLED = Build.VERSION.SDK_INT >= 11;

        private ValueAnimatorCompat mFabTranslationYAnimator;
        private float mFabTranslationY;
        private Rect mTmpRect;

        ......

实现Behavior能让FAB监听CoordinatorLayout里其它子View控件的状态,如FAB和Snackbar的配合显示,当Snackbar弹出时,FAB会上移给Snackbar腾出位置
这里写图片描述

由于目前FAB内部实现的Behavior只对Snackbar进行了处理,所以我们需要自定义Behavior,来达到需要的显示效果

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior{

    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                                       View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
                super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                        nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                               View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }
    }
}

然后在布局文件中通过layout_behavior关联该类,路径为包名加类名
app:layout_behavior=”zhuwentao.com.usedesigndemo.ScrollAwareFABBehavior”
注意:需要用RecyclerView替换掉ListView,并使用CoordinatorLayout作为根布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_data"
        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="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#00ff00"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/rv_data"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_behavior="zhuwentao.com.usedesigndemo.ScrollAwareFABBehavior"
        app:pressedTranslationZ="8dp"
        app:rippleColor="#ff87ffeb"
        app:useCompatPadding="false"/>

</android.support.design.widget.CoordinatorLayout>

FAB要记得加上layout_anchor关联RecyclerView
这里写图片描述

官方自带的显示和隐藏效果就是这样的,缩小隐藏,放大呈现

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:255629次
    • 积分:3159
    • 等级:
    • 排名:第11372名
    • 原创:60篇
    • 转载:4篇
    • 译文:0篇
    • 评论:58条
    博客专栏
    文章分类
    最新评论