Toast大家都不會陌生，就是經常在介面上彈出的帶有提示資訊的半透明文字框，它短暫出現後就會慢慢變淡消失。與Toast具有相同作用的還有Crouton，這是一個外國人寫的第三方庫，跟Toast相同，一個介面一次只能出現一個Crouton。但與Toast淡出淡入的動畫效果不同，
它一般是從佈局的頂部滑入和滑出的，而且與灰不溜秋的Toast相比，它有多種色彩可供選擇。Toast是“吐司”的英文，Crouton則是“油煎麵包塊”的意思，聽名字就知道這兩個是哥們了。

言歸正傳，我們現在就來學習一下Crouton的使用。

1、準備工作

要想使用Crouton，只需在用Android Studio建立好工程之後，開啟build.gradle檔案，新增以下的依賴庫：

    compile('de.keyboardsurfer.android.widget:crouton:[email protected]') {
        // exclusion is not necessary, but generally a good idea.
        exclude group: 'com.google.android', module: 'support-v4'
    }

2、建立Crouton的最簡方法（在根佈局彈出Crouton）

跟它的兄弟一樣，Crouton也需要呼叫makeText方法來輸入內容，然後再呼叫show方法顯示到介面上：

           /**1、根佈局彈出Crouton**/
                Crouton.makeText(this, //上下文
                        "根佈局的Crouton", //Crouton要顯示的文字
                        Style.INFO, //Crouton的樣式
                        R.id.rl_root) //顯示Crouton的佈局ID，不寫時預設為根佈局
                        .show();

上面的每個引數我都寫了註釋了。其中第三個引數使用了Crouton提供的三種樣式中的一種，三種樣式如下圖所示：

執行後的效果如下：

3、在子佈局上彈出Crouton

由2可知，通過充分利用makeText方法中的引數4，我們可以在任意子佈局上顯示Crouton，就像下面這樣（灰色區域為一個RelativeLayout）：

        Crouton.makeText(this, "子佈局的Crouton", Style.ALERT, R.id.rl_child).show();

4、自定義Crouton

上面區區三種樣式怎麼能滿足我們呢？假如我們需要製作一個圖文並茂的Crouton的話，大家首先想到可能是自己寫一個佈局。Crouton確實是支援自定義佈局的，我們可以先寫一個佈局：
custom_crouton.xml

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

    <LinearLayout
        android:gravity="center"
        android:background="@android:color/holo_blue_dark"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="20dp"
            android:src="@mipmap/clock" />

        <TextView
            android:layout_marginLeft="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="快起床寫程式碼了！"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

大家也許會覺得最外層的RelativeLayout有點多餘，但是我試過去掉它之後，LinearLayout的高度值就不起作用了，具體原因我也不明白……

接下來就要用到Crouton類中的另一個靜態方法make來構造Crouton，它的用法也很簡單，只要把自定義View的物件傳入即可：

            View view = View.inflate(context, R.layout.custom_crouton, null);
            Crouton.make(this, view, R.id.rl_root).show();

5、通過Style.Builder修改背景顏色和字型樣式

也許有時候我們就只是想給Crouton的背景或者字型換個顏色，為了這麼個小需求就寫一個佈局那也忒麻煩了。難道就沒有介面可以直接修改顏色的嗎？

Crouton當然不會這麼傻，它給我們提供了兩個構造器：Style.Builder和Configuration.Builder。前者用來構造Crouton的外觀，如背景、字型等；後者用來構造Crouton的配置：停留時間和進出動畫。

Style.Builder提供了很多方法，這裡我不可能一個個地示範了，只是寫了一個小例子，比如我們要實現一個黑底金字帶有陰影的的Crouton（我承認是有點土）時就可以這樣寫：

                //建立Style構造器物件
                Style.Builder sb = new Style.Builder();
                sb.setBackgroundColor(android.R.color.black) //背景顏色
                        .setTextColor(android.R.color.holo_orange_light)//字型顏色
                        .setTextSize(18) //字型大小
                        .setTextShadowColor(android.R.color.white) //字型陰影顏色
                        .setTextShadowRadius(12) //字型陰影半徑
                        .setHeight(120) //Crouton高度
                        .setGravity(Gravity.CENTER) //設定文字居中
                        .setFontName("Ponsi-Regular.otf")//設定字型，直接輸入字型名稱的字串
                ;
                Crouton.showText(this, "This is a Crouton", sb.build());

這裡需要用到showText方法，它的第三個引數就是Style物件。字型檔案要提前放在assets資料夾下，然後直接在setFontName方法中直接輸入字型名稱字串就可以了。但要注意的是setGravity方法只能設定文字內容的位置，對圖片是不起作用的。

6、自定義背景圖片

如果UI給你設計好了Crouton的背景圖片或者整個Crouton就是一張圖片的話，那麼你也可以給Crouton設定圖片：

                sb.setBackgroundDrawable(R.drawable.crouton_pic)
                  .setImageScaleType(ImageView.ScaleType.CENTER_CROP);
                Crouton.showText(this,"",sb.build()); //展示圖片，文字內容為空字串即可

7、通過修改Configuration.Builder修改Crouton配置

前面我們已經成功修改了Crouton的樣式，現在就來修改一下它的配置吧。它配置包含兩個方面：
- 動畫效果，包含進入的動畫和消失的動畫；
- 持續時間，即進入動畫執行完畢後Crouton停留在介面直至消失動畫開始執行的時間。

首先建立兩個動畫檔案：
crouton_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:fromXDelta="-100%p"
    android:toXDelta="0">
</translate>

crouton_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:fromXDelta="0"
    android:toXDelta="100%p">
</translate>

程式碼的寫法跟Style.Builder的類似：

        //建立Configuration構造器物件
        Configuration.Builder cfg = new Configuration.Builder();
        cfg.setInAnimation(R.anim.crouton_in)
                .setOutAnimation(R.anim.crouton_out)
                .setDuration(1500);
        Crouton.showText(this, "修改配置後的Crouton", Style.CONFIRM, R.id.rl_root, cfg.build());

8、同時修改外觀和配置

如果我們需要同時改動外觀和配置怎麼弄呢？這個也很簡單，在完成了外觀和配置的設定之後，呼叫Style構造器中的setConfiguration方法傳入一個Configuration例項即可：

sb.setConfiguration(cfg.build());

大體效果如下：

9、Crouton的銷燬

Crouton的銷燬可以呼叫兩個方法（下面是我的理解）：
- cancelAllCroutons:銷燬佇列中的Crouton，如果當前有Crouton在展示，那麼它會立即消失，後面的Crouton也不會再顯示；
- clearCroutonsForActivity：銷燬某個Activity中所有的Crouton。

官方的建議是在Activity銷燬，也就是onDestroy方法執行時呼叫cancelAllCroutons方法，確保Crouton不再佔用系統資源。

10、總結

大家應該都知道Crouton的用法了。我們學習瞭如何讓Crouton在根佈局和子佈局上顯示，也學習瞭如何修改它的外觀和配置，相信這些可以滿足我們大部分需求了。如果你有更好玩的用法，歡迎給我留言。
原始碼的GitHub地址：
SlidingToast

參考文章