Android Material Design悬浮按钮和可交互提示

博客内容：悬浮按钮FloatingActionButton、交互控件Snackbar和CoordinatorLayout。

悬浮按钮FloatingActionButton：

Android Material Design这么叼，肯定会有立体设计咯！在官方的给出的示例中，最简单且最具代表性的立体设计非悬浮按钮莫属，这种按钮不属于主界面平面的一部分，而是位于另外一个维度，因此给人一种悬浮的错觉。

这种错觉当属FloatingActionButton来实现，它是由Design Support库提供的控件。话到这份上，你懂的，使用FloatingActionButton需要添加Design Support库。Design Support默认情况下会使用来作为按钮的颜色，而我们还可以通过给按钮指定一个图标来表明这个按钮干什么用的。

看例子咯！

第一步添加Design Support库：build.gradle/Module:app

compile 'com.android.support:design:23.4.0'

第二步：布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <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"
        app:elevation="8dp"
        android:src="@drawable/language"/>
</LinearLayout>

布局中 bottom|end是什么意思呢？layout_gravity这个属性指定将这个控件放置到左下角，其中end的工作原理和start是一样的。elevation="8dp"是指定悬浮按钮的高度值。

第三步：Java代码----FloatingActionButton点击事件

public class MainActivity extends AppCompatActivity {
private FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab=(FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
@Override
            public void onClick(View v) {
                        Toast.makeText(MainActivity.this,
                                "FloatingActionButton点击事件",
                                Toast.LENGTH_SHORT).show();
            }
        });
    }
}

运行效果图：

交互控件Snackbar和CoordinatorLayout：

相信大家平常都是使用Toast作为提示工具使用，其实呀！还有比Toast更加先进的提示工具，那就是Snackbar。不要误会，Snackbar不是来替换Toast的，他们之间有着不同的应用场景。简单的说Toast提示的是用户没有办法在进行二次选择的事情或提示用户某件事件正在发生，而Snackbar在提示当中加入一个可交互按钮，就是后悔药的形式，再一次确定你是不是要进行某个操作。而且SnackBar允许用户向右滑动消除它，

同为提示工具，SnackBar和Toast用法很相似。Snackbar的构造：

//参数分别是View(只要是当前界面布局的任意一View个都可以),提示信息,持续时间
public static Snackbar make(View view,CharSequence text,int duration)

SnackBar的常用方法：

//用于设定Action的字体颜色
public Snackbar setActionTextColor( int color)

//设定提示的字体
public Snackbar setText( CharSequence message)

//设置回调，比如OnDismissed或者OnShown
public Snackbar setCallback(Callback callback)

//调用SnackBar
public void show()

//清除SnackBar
public void dismiss()

不是说Snackbar有加入交互按钮（Action）的吗，怎么加入呢？

Snackbar.make(view,"Snackbar", Snackbar.LENGTH_LONG)
        .setAction("这是action", new View.OnClickListener() {
@Override
    public void onClick(View v) {
            Toast.makeText(MainActivity.this,
            "你点击了action",Toast.LENGTH_SHORT).show();
         }
    }).show();

看个例子：在FloatingActionButton例子的基础上改进：

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/web_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </WebView>

        <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"
            app:elevation="8dp"
            android:src="@drawable/language"/>

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

</LinearLayout>

细心的朋友会发现主布局多了个CoordinatorLayout，没错，这样写，就是让Snackbar弹出来的时候不要覆盖FloatingActionButton，看下面效果图，你会看到FloatingActionButton被挤上去了，形成动态效果，是不是很棒，要的就是这个效果。至于FloatingActionButton，简单介绍一下，CoordinatorLayout可以说是FrameLayout的加强版（升级了的意思），话说CoordinatorLayout也是由Design Support库提供的，优点是CoordinatorLayout可以监听所有子控件的各种事件。

Java核心代码：

public class MainActivity extends AppCompatActivity {
private FloatingActionButton fab;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView=(WebView) findViewById(R.id.web_view);
        fab=(FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
@Override
            public void onClick(View view) {
                Snackbar.make(view,"是否要使用百度",
                        Snackbar.LENGTH_SHORT)
                        .setAction("Yes",
                                new View.OnClickListener() {
@Override
                    public void onClick(View v) {
webView.getSettings()
                                .setJavaScriptEnabled(true);
                        webView.setWebViewClient(
new WebViewClient());
                        webView.loadUrl("http://www.baidu.com");
                    }
                }).show();
            }
        });
    }
}

运行效果图：

Android Material Design悬浮按钮和可交互提示

本博客用到WebView控件，Android网络技术之WebView点击它即可深入了解。

秒客网

Android Material Design悬浮按钮和可交互提示

悬浮按钮FloatingActionButton：

交互控件Snackbar和CoordinatorLayout：

相关文章