Material Design 的设计理念是应用程序的界面应该是有立体效果的，立体效果最具代表性的就是悬浮按钮啦O(∩_∩)O~
1 悬浮按钮（FloatingActionButton）
FloatingActionButton 是 Design Support 库中提供的控件，使用它就可以实现悬浮按钮效果。
在 drawable 目录下新增一张图标（tip.png），然后修改布局文件：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:material="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<android.support.design.widget.FloatingActionButton
android:id="@+id/tip"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="20dp"
android:src="@drawable/tip"
material:elevation="20dp"
material:backgroundTint="@color/colorPrimaryDark"
/>
</FrameLayout>
...
</android.support.v4.widget.DrawerLayout>
- 我们在布局文件中新增了 FloatingActionButton 配置。
- layout_gravity 设置为屏幕下角（bottom）；end 表示如果系统语言为从左到右，那么就在右边，否则在左边。
- layout_margin 表示外边距。 这里使用了 dp 作为单位，因为 dp 会随着不同的屏幕而改变控件长度的像素数量。
- 因为用到了 Material Design 特殊设置，所以这里引用了 Material Design 的命名空间
xmlns:material="http://schemas.android.com/apk/res-auto"。 - elevation 表示控件高度，高度越大，投影范围也就越大。
- backgroundTint 表示控件背景色，默认使用
@color/colorAccent。
在活动类中添加悬浮按钮的点击事件：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
//悬浮按钮点击事件
FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.tip);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "欢迎来到喵星人世界O(∩_∩)O~", Toast.LENGTH_SHORT).show();
}
});
}
悬浮按钮效果
2 交互式提示栏（Snackbar）
Snackbar 可在提示栏中加入一个按钮，点击时执行一些额外的事件。
Snackbar 的 make 方法定义如下：
public static Snackbar make(@NonNull View view, @NonNull CharSequence text,
@Duration int duration) {
Snackbar snackbar = new Snackbar(findSuitableParent(view));
snackbar.setText(text);
snackbar.setDuration(duration);
return snackbar;
}
| 参数 | 说明 |
|---|---|
| view | View 对象。 |
| text | 需要显示的文本内容。 |
| duration | 显示时长，单位毫秒。 |
我们修改悬浮按钮的点击事件：
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Toast.makeText(MainActivity.this, "欢迎来到喵星人世界O(∩_∩)O~", Toast.LENGTH_SHORT).show();
Snackbar.make(v,"欢迎来到喵星人世界O(∩_∩)O~",Snackbar.LENGTH_LONG).setAction("更多", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "喵星人，网络语言，假想猫咪是从遥远外太空来的，喵星人是来到地球的外星人，因为很萌的外表而获得人类的信任，成为少数与人类平等交往的朋友。", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
交互式提示栏效果
3 CoordinatorLayout
上面的例子中，弹出的交互式提示栏遮挡了部分悬浮按钮，我们可以使用 CoordinatorLayout 来解决这个问题。CoordinatorLayout 可以监听旗下所有的子控件中的各种事件。CoordinatorLayout 会监听交互式提示栏的弹出事件，让悬浮按钮向上移动，从而提供更好的用户体验。
我们修改布局文件，把原来的 FrameLayout 改为 CoordinatorLayout 即可：
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</android.support.design.widget.CoordinatorLayout>
虽然 Snackbar 并不是 CoordinatorLayout 的子控件，但我们把 FloatingActionButton 作为 View 参数传入了 Snackbar 的 make() 方法，所以这个 make() 事件就被 CoordinatorLayout 监听到咯 O(∩_∩)O~
最终演示效果
