Android Snackbar使用詳解

轉(zhuǎn)載請(qǐng)備注原文鏈接地址:https://www.niwoxuexi.com/blog/android/article/190.html
Snackbar是Android Support Design Library庫中的一個(gè)控件,可以在屏幕底部快速彈出消息,跟Toast的使用方法類似,顯現(xiàn)效果比toast好(個(gè)人意見)
1,Snackbar基本介紹和使用方法
首先看一下官方的介紹:
Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time.

They automatically disappear after a timeout or after user interaction elsewhere on the screen, particularly after interactions that summon a new surface or activity. Snackbars can be swiped off screen.

Snackbars can contain an action which is set via setAction(CharSequence, android.view.View.OnClickListener).

To be notified when a snackbar has been shown or dismissed, you can provide a Snackbar.Callback via addCallback(BaseCallback).

簡(jiǎn)單的說Snackbar就是一個(gè)類似Toast的快速彈出消息提示的控件,手機(jī)上顯示在底部,大屏幕設(shè)備顯示在左側(cè)。但是在顯示上比Toast豐富,也提供了于用戶交互的接口
使用Snackbar要導(dǎo)入com.android.support:design庫。
Snackbar顯示在所有屏幕其它元素之上(屏幕最頂層),同一時(shí)間只能顯示一個(gè)snackbar。
Snackbar的基本使用很簡(jiǎn)單,與Toast類似。
<pre>.make(view, message_text, duration)
.setAction(action_text, click_listener)
.show();
</pre>
make(View view, CharSequence text, int duration)方法是生成Snackbar的。
Snackbar需要一個(gè)控件容器view用來容納,官方推薦使用CoordinatorLayout來確保Snackbar和其他組件的交互,比如滑動(dòng)取消Snackbar、Snackbar出現(xiàn)時(shí)FloatingActionButton上移。
顯示時(shí)間duration有三種類型LENGTH_SHORT、LENGTH_LONG和LENGTH_INDEFINITE。
setAction()方法可設(shè)置Snackbar右側(cè)按鈕,增加進(jìn)行交互事件。如果不使用setAction()則只顯示左側(cè)message。
<pre>
Snackbar.make(view, "顯示在左側(cè)的message", Snackbar.LENGTH_LONG)
.setAction("右側(cè)顯示action文本", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你點(diǎn)擊了action事件", Toast.LENGTH_SHORT).show();
}
}).show();
</pre>


如果你想在Snackbar的顯示時(shí)或消失時(shí)做些什么,可以調(diào)用Snackbar的addCallback()方法 (setCallback方法API 25.1.0過時(shí)了)。
<pre>Snackbar.make(view, "顯示在左側(cè)的message", Snackbar.LENGTH_LONG)
.addCallback(new BaseTransientBottomBar.BaseCallback<Snackbar>() {
@Override
public void onShown(Snackbar transientBottomBar) {
super.onShown(transientBottomBar);
Toast.makeText(MainActivity.this, "SnackBar 開始顯示了", Toast.LENGTH_SHORT).show();
}
@Override
public void onDismissed(Snackbar transientBottomBar, int event) {
super.onDismissed(transientBottomBar, event);
Toast.makeText(MainActivity.this, "SnackBar 要消失了", Toast.LENGTH_SHORT).show();
}
}).show();</pre>

2,改變SnackBar的顯示樣式
Snackbar和Toast的默認(rèn)樣式都很單一,但是有時(shí)我們希望把不同類型信息區(qū)別顯示,從而使用戶更容易注意到提示信息。所以使Snackbar變色是一個(gè)好主意。

Snackbar的官方API只提供了setActionTextColor()這個(gè)方法修改Action的文字顏色,那如何改變樣式呢,我們?cè)谠创a中先看一下SnackBar的make()方法
make()方法源碼:
<pre>
public static Snackbar make(@NonNull View view, @NonNull CharSequence text, @Duration int duration) {
final ViewGroup parent = findSuitableParent(view);
if (parent == null) {
throw new IllegalArgumentException("No suitable parent found from the given view. "
+ "Please provide a valid view.");
}
final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
final SnackbarContentLayout content = (SnackbarContentLayout) inflater
.inflate( R.layout.design_layout_snackbar_include, parent, false);
final Snackbar snackbar = new Snackbar(parent, content, content);
snackbar.setText(text);
snackbar.setDuration(duration);
return snackbar;
}
</pre>
在make方法中我們可以看到初始化了一個(gè)Snackbar,并且為Snackbar添加了一個(gè)SnackbarContentLayout(查看源碼可以看到這個(gè)布局文件繼承自LinearLayout)的布局,而SnackbarContentLayout加載了R.layout.design_layout_snackbar_include布局文件,這個(gè)文件就是Snackbar顯示出來的布局文件,那我們先看看這個(gè)文件
design_layout_snackbar_include.xml文件源碼:
<pre>
<?xml version="1.0" encoding="utf-8"?>
<view
xmlns:android="http://schemas.android.com/apk/res/android"
class="android.support.design.internal.SnackbarContentLayout"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<TextView
android:id="@+id/snackbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="@dimen/design_snackbar_padding_vertical"
android:paddingBottom="@dimen/design_snackbar_padding_vertical"
android:paddingLeft="@dimen/design_snackbar_padding_horizontal"
android:paddingRight="@dimen/design_snackbar_padding_horizontal"
android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"
android:maxLines="@integer/design_snackbar_text_max_lines"
android:layout_gravity="center_vertical|left|start"
android:ellipsize="end"
android:textAlignment="viewStart"/>
<Button
android:id="@+id/snackbar_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"
android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"
android:layout_gravity="center_vertical|right|end"
android:minWidth="48dp"
android:visibility="gone"
android:textColor="?attr/colorAccent"
style="?attr/borderlessButtonStyle"/>
</view>
</pre>
由命名可知,以snackbar_text為名的TextView就是Snackbar左側(cè)的message,以 snackbar_action為名的Button就是Snackbar 右側(cè)的action。
好了,現(xiàn)在我們就可以通過上面的id來隨意的操作這兩個(gè)控件的屬性了,直接上代碼。
<pre>
Snackbar snackbar = Snackbar.make(view, "顯示在左側(cè)的message", Snackbar.LENGTH_LONG)
.setAction("右側(cè)顯示action文本", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "你點(diǎn)擊了action事件", Toast.LENGTH_SHORT).show();
}
});
//獲取Snackbar的view
View snackbarContent = snackbar.getView();
if (snackbarContent != null) {
//修改Snackbar的背景色
snackbarContent.setBackgroundColor(Color.parseColor("#0000ff"));
//獲取Snackbar的message控件,修改字體顏色和大小
TextView snackbarText = ((TextView) snackbarContent.findViewById(R.id.snackbar_text));
snackbarText.setTextColor(Color.parseColor("#ff0000"));
snackbarText.setTextSize(16);
//獲取Snackbar的aciton控件,修改字體顏色和大小
Button snackbarAction = ((Button) snackbarContent.findViewById(R.id.snackbar_action));
snackbarText.setTextColor(Color.parseColor("#ff0000"));
snackbarText.setTextSize(16);
}
snackbar.show();
</pre>

好了,今天就寫到這里了,當(dāng)然也可以把Snackbar改變成自定義的樣式,只要把Snackbar 的布局替換掉就可以了,我就不寫了,大家自己去研究吧
大家也可以封裝成工具類,方便后邊使用,這個(gè)很簡(jiǎn)單吧,大家自己動(dòng)手做吧
最后是代碼地址嘍:https://image.niwoxuexi.com/download/blogSnackbarDemo.zip

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容