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

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

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

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

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

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

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

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

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

代碼如下：

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

那如何實(shí)現(xiàn)滑動(dòng)列表時(shí)，下滑顯示和上滑隱藏的效果呢？其實(shí)很簡(jiǎn)單，官方也提供了方法，但是得繼承FloatingActionButton.Behavior進(jìn)行重寫(xiě)。在這里我為了實(shí)現(xiàn)這個(gè)效果，給布局添加了一個(gè)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) {
        // 確保是豎直判斷的滾動(dòng)
        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();
        }
    }
}

看動(dòng)畫(huà)效果，如下：

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

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

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

效果圖如下：

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

final Snackbar snackbar = Snackbar.make(rv, "你知道非著名程序員這個(gè)公眾號(hào)嗎？", Snackbar
                        .LENGTH_LONG);
// 設(shè)置動(dòng)作按鈕顏色
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();
    }
});

效果圖如下：

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

添加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基本就講完了。非常簡(jiǎn)單，我相信大家都很容易理解。Material Design系列一發(fā)出去的時(shí)候，有人私下發(fā)消息要源碼，前期我感覺(jué)沒(méi)必要，以為都是控件的基本使用嘛，擋不住我心好啊，這個(gè)系列我都寫(xiě)在了一個(gè)demo里，我會(huì)慢慢完善，直到更新完。

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

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