Design下FloatingActionButton的简单使用

今天说下Design包下的FloatingActionButton浮动按钮。关于Design的介绍就不说了。上一篇的博文有。大家可以看看。

简称FAB，浮动操作按钮一般作为进阶操作的开关，在用户界面中通常是一个漂浮的小圆圈，它有自身独特的动态效果，比如变形、弹出、位移等等，代表着在当前页面上用户的特定的操作。

现在说下使用方法，首先需要导入design包。

搜索design包然后导入。然后在build.gradle文件下就多了这样一句代码

嫌麻烦的话也可以直接在build.gradle文件下加入这句代码。我是习惯了。

下面就可以愉快使用FloatingActionButton啦。首先是布局activity_main.xml.上代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.floatiingactionbuttontest.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint = "#007787"
        app:rippleColor="#887416"
        app:elevation = "10dp"
        app:pressedTranslationZ="12dp"
        app:fabSize = "normal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        />
</RelativeLayout>

同样需要注意的是记得加上它的属性命名空间

xmlns:app="http://schemas.android.com/apk/res-auto"

下面我来说下它特有属性的每个意思。

app:backgroundTint = "#007787"

这个代表的意思是按钮还没点击之前的颜色。

app:rippleColor="#887416"

这个是按钮点击之后的按钮的颜色

app:elevation = "10dp"

这个表示按钮在界面上显示的时候外围浮动阴影的效果，值越大，效果越明显

app:pressedTranslationZ="12dp"

这个属性表示按钮点击之后外围浮动的阴影效果

app:fabSize = "normal"

这个属性则表示按钮的类型，相当于style吧。这个属性有两个值，normal表示的是正常的样式，还有一个是mini表示的是更小的一种样式。

它还可以可是一个背景图片，本例子就不加了。

好了，就是这么简单的一个控件。下面看一下基本的用法

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton floatBtn;
    private Context mcontent = MainActivity.this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatBtn = ((FloatingActionButton) findViewById(R.id.floatBtn));


        initView();
    }

    private void initView() {
        floatBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mcontent, "你点击了FloatingActionButton", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

相信大家都看的明白所以就没加注释，哈哈。

简单吧。其实还可以有其他比较复杂的样式，因为时间原因就不一一说了。

下面看下效果图。

好了，今晚就到这里。共勉！晚安