android Material Design 学习之四：FloatingActionButton 与 Snackbar 使用

FloatingActionButton

FAB 是MD 提供的一个可以实现悬浮效果的Button,首先晒出布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start"
    >

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/tool_bar_layout"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/fab_add"
        app:backgroundTint="@color/fab_ripple"
        android:layout_gravity="bottom|right|end" />

</FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

</android.support.v4.widget.DrawerLayout>

  android:src="@mipmap/fab_add"

这里图片是个“+” 号。可以自己在网上找图片,地址：加号。

 app:backgroundTint="@color/fab_ripple"

引用color fab_ripple的资源：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/blue" android:state_focused="true" />
    <item android:color="@color/blue_dark" android:state_enabled="false" android:state_pressed="true" />
    <item android:color="@color/blue" android:state_enabled="false" />
    <item android:color="@color/blue" />
</selector>

colors：

   <color name="blue">#3F51B5</color>
    <color name="blue_dark">#303F9F</color>

android:layout_gravity="bottom|right|end"

悬浮按钮一般都会放在底部右下角。

FAB的基本使用很简单，如下图：

关于FAB 的几个开源控件：

FAB1，FAB2，FAB3 。

Snackbar

snackbar 是和Toast 相似的，但是能做的比Toast 多，可以做一些额外的逻辑操作，以一种轻量级的反馈机制，比Toast稍微重量级一点点。

 Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(DrawerLayoutActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
                    }
                }).show();

这里调用了Snackbar的make() 方法创建一个Snackbar对象，第一个参数需要传入一个View ,Snackbar 会使用这个View 自动查找最外层的布局，用于展示Snackbar,最后参数是展示时长，这些和Toast 高度相似的。Snackbar 和 Toast 最大的区别是setAction 方法，setAction 来设置一个动作，从而让Snackbar 不仅仅是个提示，而是可以和用户进行交互，如下图：

Snackbar 从底部出现了，setAction 的undo 按钮，点击后，Snackbar 自动消失。

参考：

Android提醒微技巧，你真的了解Dialog、Toast和Snackbar吗？

android Material Design 学习之四：FloatingActionButton 与 Snackbar 使用

FloatingActionButton

Snackbar

猜你喜欢