Snackbar怎么在Android中使用

本篇文章為大家展示了Snackbar怎么在Android中使用，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

要使用Snackbar，需要在項(xiàng)目的build.gradle中添加依賴(lài)

dependencies {
 compile 'com.android.support:design:23.4.0'
}

Snackbar的使用方法和Toast很相似

Snackbar.make(mOpenTv, "消息內(nèi)容", Snackbar.LENGTH_SHORT)
  .setAction("確定", new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  }
  })
  .show();

第一個(gè)參數(shù)需要傳入一個(gè)View，可以是界面當(dāng)中的任意一個(gè)View控件，Snackbar會(huì)自動(dòng)根據(jù)這個(gè)控件找到最外層的布局來(lái)顯示

第二個(gè)參數(shù)就是我們需要顯示的內(nèi)容，注意這里的內(nèi)容最多顯示兩行哦，超出兩行后的內(nèi)容會(huì)變成“…”

第三個(gè)參數(shù)為Snackbar顯示的時(shí)長(zhǎng)，有三種模式供選擇

• LENGTH_SHORT：短時(shí)間顯示

• LENGTH_LONG：長(zhǎng)時(shí)間顯示

• LENGTH_INDEFINITE：一直顯示，只有當(dāng)用戶(hù)觸發(fā)Action點(diǎn)擊事件或手動(dòng)刪除時(shí)才會(huì)消失

Snackbar可以通過(guò)setAction方法設(shè)置一個(gè)點(diǎn)擊事件，和用戶(hù)進(jìn)行交互

我們還可以通過(guò)setCallback方法來(lái)監(jiān)聽(tīng)Snackbar的顯示和關(guān)閉

 Snackbar sb = Snackbar.make(mOpenTv, "消息內(nèi)容", Snackbar.LENGTH_SHORT);
 sb.setCallback(new Snackbar.Callback() {
 @Override
 public void onDismissed(Snackbar snackbar, int event) {
 super.onDismissed(snackbar, event);
 // Snackbar關(guān)閉時(shí)回調(diào)
 }

 @Override
 public void onShown(Snackbar snackbar) {
 super.onShown(snackbar);
 // Snackbar打開(kāi)時(shí)回調(diào)
 }
 });
 sb.show();

Snackbar還支持滑出刪除，需要在布局文件中使用CoordinatorLayout作為根布局

建議要使用Snackbar的時(shí)候最好是以CoordinatorLayout作為根布局，如果以其它RelativeLayout，LinearLayout等作為根布局的話，會(huì)出現(xiàn)以下這種情況

FloatingActionButton被遮到了，使用CoordinatorLayout作為根布局可以避免這種情況

Snackbar只能在底部顯示嗎？

是也不是，為啥這么說(shuō)呢，Snackbar確實(shí)是在CoordinatorLayout底部顯示的，但并不等于是在屏幕頂部

首先我們要知道Snackbar顯示的原理是什么

之前介紹中的第一個(gè)傳進(jìn)去的參數(shù)View，Snackbar會(huì)通過(guò)這個(gè)View控件找到它所在的根布局，我們來(lái)查看下源碼

 public static Snackbar make(@NonNull View view, @NonNull CharSequence text,
  @Duration int duration) {
 Snackbar snackbar = new Snackbar(findSuitableParent(view));
 snackbar.setText(text);
 snackbar.setDuration(duration);
 return snackbar;
 }

我們傳進(jìn)去的view會(huì)經(jīng)過(guò)findSuitableParent方法的處理，我們?cè)賮?lái)看下這個(gè)方法的具體實(shí)現(xiàn)

 private static ViewGroup findSuitableParent(View view) {
 ViewGroup fallback = null;
 do {
  if (view instanceof CoordinatorLayout) {
  // We've found a CoordinatorLayout, use it
  return (ViewGroup) view;
  } else if (view instanceof FrameLayout) {
  if (view.getId() == android.R.id.content) {
   // If we've hit the decor content view, then we didn't find a CoL in the
   // hierarchy, so use it.
   return (ViewGroup) view;
  } else {
   // It's not the content view but we'll use it as our fallback
   fallback = (ViewGroup) view;
  }
  }

  if (view != null) {
  // Else, we will loop and crawl up the view hierarchy and try to find a parent
  final ViewParent parent = view.getParent();
  view = parent instanceof View ? (View) parent : null;
  }
 } while (view != null);

 // If we reach here then we didn't find a CoL or a suitable content view so we'll fallback
 return fallback;
 }

詳細(xì)的過(guò)程google的工程師已經(jīng)寫(xiě)的非常的清楚了，我們主要需要了解的就是當(dāng)一個(gè)View的直接父布局為CoordinatorLayout時(shí)，就以這個(gè)CoordinatorLayout為標(biāo)準(zhǔn)來(lái)顯示Snackbar

我們可以做個(gè)小實(shí)驗(yàn)驗(yàn)證一下

在傳入的View控件外面套一層CoordinatorLayout

 <android.support.design.widget.CoordinatorLayout
 android:layout_width="match_parent"
 android:layout_height="100dp">

 <TextView
  android:id="@+id/tv_open_snackbar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:text="打開(kāi)Snackbar"
  android:textSize="28sp"/>
 </android.support.design.widget.CoordinatorLayout>

再運(yùn)行一下看看，效果就變成了下面這樣

所以說(shuō)Snackbar的顯示位置還是可以通過(guò)這個(gè)小技巧來(lái)改變的

如果嫌默認(rèn)的Snackbar太丑怎么辦？

我們可以來(lái)自定義它的外觀

1.改變按鈕的文字顏色

通過(guò)調(diào)用setActionTextColor方法即可改變按鈕的文字顏色

 Snackbar sb = Snackbar.make(mOpenTv, "消息內(nèi)容", Snackbar.LENGTH_SHORT);
 sb.setAction("確定", new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  }
 });
 sb.setActionTextColor(Color.YELLOW);
 sb.show();

2.改變消息內(nèi)容的文字顏色

Snackbar沒(méi)有給我們提供改變消息文本顏色的api接口，但在查看源碼時(shí)發(fā)現(xiàn)了這個(gè)方法getView

 /**
 * Returns the {@link Snackbar}'s view.
 */
 @NonNull
 public View getView() {
 return mView;
 }

這里返回的mView其實(shí)是一個(gè)SnackbarLayout布局，在SnackbarLayout的構(gòu)造方法中找到了它的布局文件design_layout_snackbar_include

  // Now inflate our content. We need to do this manually rather than using an <include>
  // in the layout since older versions of the Android do not inflate includes with
  // the correct Context.
  LayoutInflater.from(context).inflate(R.layout.design_layout_snackbar_include, this);

design_layout_snackbar_include布局文件里只有兩個(gè)控件，一個(gè)TextView，一個(gè)Button

<merge xmlns:android="http://schemas.android.com/apk/res/android">

 <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: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:visibility="gone"
  android:textColor="?attr/colorAccent"
  />
</merge>

相信看到這里大家應(yīng)該知道怎么做了，TextView的id為snackbar_text，我們通過(guò)getView()來(lái)獲取這個(gè)TextView控件

 Snackbar sb = Snackbar.make(mOpenTv, "消息內(nèi)容", Snackbar.LENGTH_SHORT);
 sb.setAction("確定", new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  }
 });
 sb.setActionTextColor(Color.YELLOW);
 View view = sb.getView();
 TextView tv = (TextView) view.findViewById(R.id.snackbar_text);
 tv.setTextColor(Color.RED);
 sb.show();

同樣的，我們也可以通過(guò)tv.setTextSize設(shè)置它的文字大小

3.改變消息內(nèi)容的背景

同理，根據(jù)以上方法，得到它的布局，調(diào)用對(duì)應(yīng)的api接口就好

  View view = sb.getView();
  view.setBackgroundColor(Color.RED);

像這種紅紅的給用戶(hù)警告的提示，是不是比Toast要來(lái)的炫酷多了呢

4.給消息內(nèi)容添加圖標(biāo)

獲取到消息內(nèi)容的TextView后，調(diào)用setCompoundDrawables方法設(shè)置它的圖標(biāo)，可自由選擇圖標(biāo)放置的位置，四個(gè)參數(shù)分別對(duì)應(yīng)TextView的左、上、右、下

  Snackbar sb = Snackbar.make(mOpenTv, "消息內(nèi)容", Snackbar.LENGTH_SHORT);
  sb.setAction("確定", new View.OnClickListener() {
   @Override
   public void onClick(View v) {
   }
  });
  sb.setActionTextColor(Color.YELLOW);
  View view = sb.getView();
  TextView tv = (TextView) view.findViewById(R.id.snackbar_text);
  Drawable d = ContextCompat.getDrawable(this, R.drawable.warn);
  d.setBounds(0, 0, d.getMinimumWidth(), d.getMinimumHeight());
  tv.setCompoundDrawables(d, null, null, null); // 給TextView左邊添加圖標(biāo)
  tv.setGravity(Gravity.CENTER); // 讓文字居中
  sb.show();
 }

上述內(nèi)容就是Snackbar怎么在Android中使用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。