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();