Android design library（二）----------FloatingActionButton + Snackbar

首先，还是先导入依赖包：

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

然后，先来看下FloatingActionButton的效果图：

其实，很简单，就是导入一个控件，先在xml中声明；

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

然后：

    <FrameLayout
        android:id="@+id/layoutInner"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton 
            android:src="@drawable/ig"
            app:elevation="10dp"
            app:rippleColor="#ff5522"
            android:id="@+id/btnFloatingAction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right" />

    </FrameLayout>

设置了android:src 属性 app:rippleColor和后如下：

还有些属性如下：

使用 android:src 改变 FAB 对应的 drawable；

使用 app:rippleColor 设置 FAB 按下时的波纹效果；

使用 app:borderWidth 设置 FAB 边框宽度；

使用 app:elevation 设置闲置状态下 FAB 的景深（默认是 6dp）；

使用 app:pressedTranslationZ 设置 FAB 按下时的景深（默认是 12dp）。

最后，在Activity中使用（和使用Button控件一样，可以绑定事件）：

 button = (FloatingActionButton)findViewById(R.id.btnFloatingAction);
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

            }

        });

Snackbar

好处：

一小段时间之后、或者用户与屏幕触发交互，Snackbar 会自动消失；

可以包含一个可选的操作；

把 Snackbar 划出屏幕，可以弃用；

作为一条上下文敏感的消息，也是 UI 的一部分，并在屏幕内所有元素的上层显示，而不是像 Toast 消息一样位于屏幕中央；

一个时刻只能有唯一一个 Snackbar 显示。

使用，结合上面的 FloatingActionButton 如下使用：

public class MainActivity extends Activity {
    FloatingActionButton button ;
    Snackbar snackbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (FloatingActionButton)findViewById(R.id.btnFloatingAction);
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                snackbar.make(v, " I am  a snackbar", Snackbar.LENGTH_SHORT).
                        setAction("I am a Action ", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                // 做想要做的业务逻辑

                            }
                        })
                        .setActionTextColor(getResources().getColor(R.color.c1))
                        .show();
            }

        });
    }


}

最后，效果图如下：

我表示很喜欢这种风格。TmT