Android中Material Desgin风格的Snackbar、TextInputLayout、FloatingActionButton使用

写在前面，Android的Material Desgin的继续学习，主要介绍Snackbar、TextInputLayout、FloattingActionButton三种控件的使用。
首先，在app的builder.gradle文件中，添加desgin的依赖代码如下：

compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0'

Snackbar
使用Snackbar我们一般会在屏幕底部快速弹出消息，它和Toast非常相似，但是它更灵活、更优秀。下面我们它的优点：
1.当它显示一段时间后或用户做操作后它会自动消失。
2.可以自行的设定action动作。
3.向左或向右滑动，可以将显示的Snackbar取消。
4.它是显示在所有屏幕其它元素之上(屏幕最顶层)，并不是像Toast一样覆盖在屏幕上。
5.同一时间只能显示一个snackbar。

使用方法如下：

Snackbar.make(view, message, duration)
       .setAction(action message, click listener)
       .show();

make()方法中的参数含义：
1.view：设置一个 View，Snackbar会试着寻找一个父view来hold这个view. Snackbar将遍历整个view tree 来寻找一个合适的父view，它可能是一个coordinatorLayout也可能是window decor’s content view,随便哪一个都行。
2.message：需要显示的提示消息内容。
3.duration：设置Snackbar的显示时长，Snackbar.LENGTH_LONG、Snackbar.LENGTH_SHOR或Snackbar.LENGTH_INDEFINITE.
setAction方法中参数的含义：
1.message：action的message消息。
2listener：action的点击事件的监听，在监听中做自己想要做的事情。
show()方法和Toast、Dialog的show()方法一样，做显示。

Snackbar在Activity中的使用代码如下：

 Snackbar.make(mRecyclerView,"通知",Snackbar.LENGTH_SHORT)
                        //设置action
                        .setAction("Action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(
                                        Main2Activity.this,
                                        "Toast comes out",
                                        Toast.LENGTH_SHORT).show();
                            }
                        })
                        //设置“Action”的字体颜色
                        .setActionTextColor(R.color.colorAccent)
                        //设置持续显示的时长
                        .setDuration(4000)
                        //显示
                        .show();

TextInputLayout

TextInputLayout作为一个父容器控件，包装了新的EditText。现在你可以使用TextInputLayout 来将EditText封装起来，提示信息会变成一个显示在EditText之上的floating label，这样用户就始终知道他们做什么了。

TextInputLayout在xml布局文件中的使用：

 <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/til_username"
            android:layout_below="@+id/toolbar"
            <!--计数器是否可用-->
            app:counterEnabled="true"
            <!--使用计数器，最大字数限制（仅仅用做显示）-->
            app:counterMaxLength="5"
            <!--hint的提示动画可用-->
            app:hintAnimationEnabled="true"
            <!--当字数超出计数器的最大限制时的字体格式 -->
            app:counterOverflowTextAppearance="@android:style/TextAppearance.DeviceDefault.Large">
            <EditText
                android:id="@+id/username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 <!--指定输入字符的类型-->
                android:inputType="textPassword"
                android:maxLines="1"
                android:hint="please input username"
                android:singleLine="true" />
        </android.support.design.widget.TextInputLayout>

TextInputLayout在Activity中的使用：

TextInputLayout mInputLayout=(TextInputLayout) findViewById(R.id.til_username);
mInputLayout.setHint("please input username"); //设置提示的信息
EditText editText=mInputLayout.getEditText();
//给EditText设置监听 三种状态，分别是 字体改变前、改变时、改变后。
editText.addTextChangedListener(new TextWatcher() {
     @Override
     public void beforeTextChanged(CharSequence s, int start, int count, int after) {
          if (s.length() > 4) {
               mInputLayout.setError("Username error");
               mInputLayout.setErrorEnabled(true);
          } else {
               mInputLayout.setErrorEnabled(false);
          }
      }

      @Override
      public void onTextChanged(CharSequence s, int start, int before, int count) {
      }

      @Override
      public void afterTextChanged(Editable s) {
      }
});

Floating Action Button
Floating Action Button是继承至ImageView，所以Floating Action Button拥有ImageView的所有属性。CoordinatorLayout可以用来配合FloatingActionButton浮动按钮，设置app：layout_anchor和app:layout_anchorGravity构建出特定的位置与效果的Floating Action Button。它的效果图如下：

Floating Action Button在xml布局文件中使用代码如下：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        <!--设置背景色-->
        app:backgroundTint="#304652b"
        <!--设置点击状态下背景色-->
        app:rippleColor="#a6a6a6" 
        <!--如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。-->
        app:borderWidth="0dp"
        <!--设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp-->
        app:fabSize="normal"
        <!--设置FAB的锚点，即以哪个控件为参照点设置位置-->
        app:layout_anchor="@+id/recyclerView"
        <!--设置FAB相对锚点的位置，值有 bottom、center、right、left、top等-->
        app:layout_anchorGravity="bottom|right"
        <!---默认状态下FAB的阴影大小->
        app:elevation="6dp"
        <!--点击时候FAB的阴影大小-->
        app:pressedTranslationZ="12dp"
        android:layout_margin="15dp"/>

Floating Action Button在Activity中直接findViewById找到使用就行了。

问题一：Snackbar从底部弹出遮盖住了在右下角的Floating Action Button。
为了解决这个问题，我们把Snackbar.make(View view,,).show();的第一个参数View设置为mRecyclerView，即：

//mRecyclerView是Floating Action Button的layout_anchor控件，我们把mRecyclerView传给Snackbar就ok了。
Snackbar.make(mRecyclerView, "Snackbar", Snackbar.LENGTH_SHORT).show();