学习Android的新的UI控件Material Design（三）——FloatingActioniButton悬浮按钮的 + Snackbar（交互式）应用

开发的工具Android Studio，应用到的控件是Design Support库提供具体的布局如下：

activity_main.xml文件代码如下：

<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"
    app:layout_scrollFlags="scroll|enterAlways|snap"/>

<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_check_circle_black_24dp"
    app:elevation="8dp"/>
//这个地方导入悬浮按钮控件

然后修改MainActivity中的代码如下：设置相应的悬浮按钮点击监听器和相应事件，相应的优化需要加入Snackbar控件

只需添加一个点击事件即可，代码如下：

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT)
                .setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"FAB clicked",Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

最后加入一个CoordinatorLayout实现功能的优化（相当于一个加强版本的FrameLayout）相当于把布局文件中的FrameLayout更改为CoordinatorLayout，代码如下：

<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"
      app:layout_scrollFlags="scroll|enterAlways|snap"/>