Material Design实战之悬浮按钮和可交互提示

系统管理员 2022-05-24 06:48 154阅读 0赞

[Material Design实战之ToolBar][Material Design_ToolBar]  
[Material Design实战之滑动菜单][Material Design]

# 1. FloatingActionButton #

FloatingActionButton是Design Support库中提供的一个控件，这个控件可以帮助我们轻松的实现悬浮按钮的效果。它默认会使用colorAccent来作为按钮的颜色，还可以通过给按钮指定一个图标来表明这个按钮的作用是什么。  
下面开始具体实现。首先准备好一个图标，这里我放置了一张ic\_done.png到drawable目录下。然后修改activity\_main.xml中的代码，如下所示：

<?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" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent">
    
        <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent">
    
            <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/ic_done"/>
        </FrameLayout>
        ...
    </android.support.v4.widget.DrawerLayout>

可以看到，我们在主屏幕布局中加入了一个FloatingActionButton，layout\_gravity属性将这个控件放置于屏幕的右下角。

既然是悬浮，就会有阴影，我们可以通过app:elevation属性来给FloatingActionButton指定一个高度值，高度值越大，投影范围也越大，但是投影效果越淡，高度值越小，投影范围越小，但是投影效果越弄。当然这些效果的差异其实都不怎么明显，个人感觉使用FloatingActionButton的默认效果就足够了。

接下来我们看一下FloatingActionButton是如何处理点击事件的，修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ... FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show(); } }); } ... }

现在运行一下程序，点击FloatingActionButton按钮，效果如图所示：

![Image 1][]

Screenshot\_1483517367.png

# 2. SnackBar #

在前面处理FloatingActionButton点击事件的时候，仍然是使用Toast来作为提示工具，本小节我们就来学习一个Design Support库提供的 更加先进的提示工具—**SnackBar**。

首先要明确，SnackBar并不是Toast的替代品，他们两者之间有着不同的应用场景。Toast的作用是告诉用户现在发生了什么事情，但用户只能被动接收这个通知，而SnackBar则在这方面进行了扩展，它允许在提示中加入一个可交互按钮，当用户点击按钮的时候可以执行一些额外的逻辑操作。

SnackBar的用法也非常简单，它和Toast是基本相似的，只不过可以额外增加一个按钮的点击事件。修改MainActivity中的代码，如下所示：

public class MainActivity extends AppCompatActivity { private DrawerLayout drawerLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ... FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"确定要删除数据？",Snackbar.LENGTH_LONG) .setAction("取消", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "删除失败！", Toast.LENGTH_SHORT).show(); } }).show(); } }); } ... }

可以看到，这里调用了SnackBar的**make()**方法来创建一个SnackBar对象，**make()**方法的第一个参数需要传入一个View，只要是当前界面布局的任意一个View都可以，SnackBar会使用这个View来自动查找最外层的布局，用于展示SnackBar。第二个参数就是SnackBar中显示的内容，第三个参数是SnackBar显示的时长，接着又调用了一个**setAction()**方法来设置一个动作，从而让SnackBar不仅仅是一个提示，而是可以和用户进行交互的。，最后调用**show()**方法显示SnackBar。  
现在重新运行一下程序，并点击悬浮按钮，效果如图所示：

![Image 1][]

Screenshot\_1483520412.png

可以看到，SnackBar从屏幕底部出现了，但是这里有个bug，这个SnackBar竟然将我们的FloatingActionButton给遮挡住了，有没有什么办法能解决一下呢？当然有，只需借助CoordinatorLayout就可以轻松解决。

# 3. CoordinatorLayout #

CoordinatorLayout可以说是一个加强版的FrameLayout,这个布局也是有Design Support库提供的。它在普通情况下的作用和FrameLayout基本一致，不过既然是Design Support库中提供的布局，就必然有一些Material Design魔力了。

事实上，CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮助我们做出最为合理的响应。举个简单的例子，刚才弹出的SnackBar提示将FloatingActionButton按钮遮挡住了，而如果我们能让CoordinatorLayout监听到SnackBar的弹出事件，那么它会自动将内部的FloatingActionButton向上偏移，从而确保不会被SnackBar遮挡到。

至于CoordinatorLayout的使用也非常简单，我们只需将原来的FrameLayout替换一下就可以了。修改activity\_main.xml中的代码，如下所示：

<?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" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent">
    
        <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">
    
            <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/ic_done"/>
    
        </android.support.design.widget.CoordinatorLayout>
        ...
    
    </android.support.v4.widget.DrawerLayout>

现在重新运行一下程序，并点击悬浮按钮，效果如图所示：

![Image 1][]

Screenshot\_1483521514.png

可以看到，悬浮按钮自动向上偏移了SnackBar的高度，从而确保不会被遮挡住，当SnackBar消失时，悬浮按钮会自动向下偏移回到原来的位置。

OK，本次实战就到这里，接下来我们要学习卡片式布局效果。

[Material Design_ToolBar]: https://www.jianshu.com/p/55a53fedf9f6
[Material Design]: https://www.jianshu.com/p/5cd3eaa03cb4
[Image 1]: