摘要：今天主講的系列的兩個控件都不難，所以一起講了，分別是和。之所以出現(xiàn)這么久了，不太火，不太常用，估計(jì)跟他懸浮有關(guān)，容易擋住其他內(nèi)容。那我們現(xiàn)在就研究改如何在滑動列表時隱藏和顯示這個懸浮按鈕。其實(shí)也非常簡單，和修改樣式的過程差不多。

今天主講的Material Design系列的兩個控件都不難，所以一起講了，分別是FloatingActionButton和Snackbar。這個系列都是主講的Material Design風(fēng)格的控件，所以都是控件的一些基本使用，也會擴(kuò)展講一些與這個控件相關(guān)的東西和效果，如果都會了的同學(xué)，可以不看這個系列。當(dāng)然看一下也沒啥，再鞏固一下知識點(diǎn)也挺好的。

FloatingActionButton從本質(zhì)講就是一個ImageView，從FloatingActionButton的繼承來看，它首先繼承了ImageButton，然后是ImageButton繼承了ImageView。所以FloatingActionButton是重寫ImageView的，所有FloatingActionButton擁有ImageView的一切屬性。FloatingActionButton顧名思義就是一個浮動按鈕。

由于FloatingActionButton本質(zhì)上是ImageView，跟ImageView相關(guān)的就不介紹，這里重點(diǎn)介紹新加的幾個屬性。

app:fabSize ：FloatingActionButton的大小，有兩種賦值分別是 “mini” 和 “normal”，默認(rèn)是“normal”.

app:backgroundTint：FloatingActionButton默認(rèn)正常顯示時的背景顏色

app:elevation ：FloatingActionButton陰影的深度，默認(rèn)時的陰影

app:rippleColor：FloatingActionButton點(diǎn)擊時的背景顏色

app:pressedTranslationZ：FloatingActionButton點(diǎn)擊時陰影的深度

代碼如下：

掌握了我給你們說的那幾個屬性，就基本掌握了FloatingActionButton的用法了。FloatingActionButton之所以出現(xiàn)這么久了，不太火，不太常用，估計(jì)跟他懸浮有關(guān)，容易擋住其他內(nèi)容。那我們現(xiàn)在就研究改如何在滑動列表時隱藏和顯示這個懸浮按鈕FloatingActionButton。

那如何實(shí)現(xiàn)滑動列表時，下滑顯示和上滑隱藏的效果呢？其實(shí)很簡單，官方也提供了方法，但是得繼承FloatingActionButton.Behavior進(jìn)行重寫。在這里我為了實(shí)現(xiàn)這個效果，給布局添加了一個RecyclerView，方法如下：

/**
 * Created by loonggg on 2016/6/22.
 */
public class FloatingActionButtonScrollBehavior extends FloatingActionButton.Behavior {
    public FloatingActionButtonScrollBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final
    FloatingActionButton child, final View directTargetChild, final View target, final int
            nestedScrollAxes) {
        // 確保是豎直判斷的滾動
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll
                (coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final
    FloatingActionButton child, final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed,
                dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }
    }
}

看動畫效果，如下：

其實(shí)我感覺你們可以還會想說，點(diǎn)擊一下這個懸浮按鈕，動畫彈出多個按鈕這個效果怎么實(shí)現(xiàn)，這里我就不講了，github上有太多跟這個相關(guān)的例子了。
可以參考這個例子：
https://github.com/Clans/FloatingActionButton

Snackbar提供了一個介于Toast和AlertDialog之間輕量級控件，它可以很方便的提供消息的提示和動作反饋。
它的使用方式也是非常的簡單，跟Toast差不多，代碼如下：

final Snackbar snackbar = Snackbar.make(view, "關(guān)注非著名程序員公眾號了嗎？", Snackbar
        .LENGTH_LONG);
snackbar.show();
snackbar.setAction("關(guān)注", new View.OnClickListener() {
    @Override
    public void onClick(View view) {
                        snackbar.dismiss();
    }
});

效果圖如下：

如何修改Snackbar樣式呢？其實(shí)也非常簡單。代碼如下：

final Snackbar snackbar = Snackbar.make(rv, "你知道非著名程序員這個公眾號嗎？", Snackbar
                        .LENGTH_LONG);
// 設(shè)置動作按鈕顏色
snackbar.setActionTextColor(getResources().getColor(R.color.add_bg_color));
// 獲取 snackbar 視圖
View snackbarView = snackbar.getView();

//設(shè)置修改snackbar文本顏色
int snackbarTextId = android.support.design.R.id.snackbar_text;
TextView tv = (TextView) snackbarView.findViewById(snackbarTextId);
tv.setTextColor(getResources().getColor(R.color.add_bg_color));
//設(shè)置snackbar背景色
snackbarView.setBackgroundColor(Color.GRAY);
snackbar.show();
snackbar.setAction("知道", new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        snackbar.dismiss();
    }
});

效果圖如下：

修改了背景色，文字按鈕顏色，是不是還不過癮？看看我們?nèi)绾卧赟nackbar上添加上一個icon圖片。其實(shí)也非常簡單，和修改樣式的過程差不多。代碼如下：

添加icon

View snackbarView = snackbar.getView();
//設(shè)置icon
ImageView iconImage = new ImageView(MainActivity.this);
iconImage.setImageResource(R.mipmap.ic_launcher);
//icon插入布局
Snackbar.SnackbarLayout snackbarLayout = (Snackbar.SnackbarLayout) snackbarView;
Snackbar.SnackbarLayout.LayoutParams sl = new Snackbar.SnackbarLayout.LayoutParams(vl.WRAP_CONTENT, vl.WRAP_CONTENT);
//讓icon的布局位于父布局垂直居中的位置
sl.gravity = Gravity.CENTER_VERTICAL;
iconImage.setLayoutParams(sl);
snackbarLayout.addView(iconImage, 0);

改變Snackbar的位置
其實(shí)改變Snackbar的位置和設(shè)置icon的位置布局大同小異，代碼如下：

// 獲取 snackbar 視圖
View snackbarView = snackbar.getView();
ViewGroup.LayoutParams vl = snackbarView.getLayoutParams();
CoordinatorLayout.LayoutParams cl = new CoordinatorLayout.LayoutParams(vl.width, vl.height);
cl.gravity = Gravity.CENTER_VERTICAL;
snackbarView.setLayoutParams(cl);

效果圖如下：

到這里，關(guān)于FloatingActionButton和Snackbar基本就講完了。非常簡單，我相信大家都很容易理解。Material Design系列一發(fā)出去的時候，有人私下發(fā)消息要源碼，前期我感覺沒必要，以為都是控件的基本使用嘛，擋不住我心好啊，這個系列我都寫在了一個demo里，我會慢慢完善，直到更新完。

demo的github地址：https://github.com/loonggg/MaterialDesignDemo 去star吧，我會慢慢完善的。

歡迎關(guān)注微信公眾號：非著名程序員（smart_android），每天每周定時推送原創(chuàng)技術(shù)文章。所有技術(shù)文章， 均會在微信訂閱號首發(fā)，關(guān)注微信公眾號可以及時獲得技術(shù)文章推送。