Android——MaterialDesign之四 FloatingActionButton、Snackbar、CoordinaterLayout

FloatingActionButton

悬浮按钮，默认colorAccent来作为按钮的颜色

 

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/f_button"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    app:elevation="1dp"
    android:src="@mipmap/b1"/>

详解：其中的elevation指定按钮一个高度值，越高就投影的范围就越大，投影的效果就越淡。设置点击事件和普通按钮没什么区别。

效果如下

 

 

Snackbar

它是一个提示工具，但是它并不是Toast的替代品，不同场合不同应用，为了让用户进行选择，Snackbar在这方面进行了扩展，允许在提示中加入一个可以交互的按钮。比如要删除的时候，如果用户按错了，在Toast中就显示删除提醒信息，想要不删除都不行，这时候我们增加一个Undo按钮，可以取消删除这个操作，还是提示是否删除，如果不想删除就可以点击Undo进行取消操作，为用户提供了一种弥补措施，提高用户操作的容错率，从而提升用户体验。

下面看看它snackbar的用法：就配合上面的FloatingActionButton的点击事件。

FloatingActionButton fl_button = (FloatingActionButton) findViewById(R.id.f_button);
fl_button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v,"是否删除数据",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"您取消了删除",Toast.LENGTH_SHORT).show();
            }
        }).show();
    }
});

 

 

 

详解：点击按钮在屏幕的出现snackbar，再次点击UNDO，出现以下提示。

 

但是细心的同学肯定发现了，点击之后这个悬浮按钮被遮住了，这样用户视觉体验不是很好，有什么办法补救呢？有人就会说了，这还不简单只要把按钮提高一点就行了，没错这样的确做，似乎解决了。但是你不能保证如果布局里面还有其他的控件被这提高的按钮遮住呢。下面我们就来说说CoordinaterLayout解决这个问题。

CoordinaterLayout

这是一个加强版的FrameLayout,也是Design Support库提供的，在普通情况下它和FrameLayout没什么区别，但是事实上，CoordinaterLayout可以监听其所有的子控件的各种事件，然后会自动帮助我们做出最为合理的响应，就像上面留下的问题，弹出的snackbar把FloatingActionButton遮挡住了。

这里的使用也非常的简单，就把原来的FrameLayout替换，所有我说它是加强版的FrameLayout。

<android.support.design.widget.CoordinatorLayout

....

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

 

效果如下：

 

点击后：

 

 

看下效果，按钮的确向上移动了，和snackbar完全同步，是不是非常的nice！好了这就是这篇文章的全部内容了。最后提醒一下，以上控件与布局都是Design Support库提供的，需要事先加入包。