Android中Snackbar的使用方法及小技巧
前言
Snackbar和Toast相似,都是為了給用戶提供交互信息,Snackbar是固定在底部的,顯示時從下往上滑出
要使用Snackbar,需要在項目的build.gradle中添加依賴
dependencies { compile 'com.android.support:design:23.4.0' }
Snackbar的使用方法和Toast很相似
Snackbar.make(mOpenTv, "消息內容", Snackbar.LENGTH_SHORT) .setAction("確定", new View.OnClickListener() { @Override public void onClick(View v) { } }) .show();
第一個參數(shù)需要傳入一個View,可以是界面當中的任意一個View控件,Snackbar會自動根據(jù)這個控件找到最外層的布局來顯示
第二個參數(shù)就是我們需要顯示的內容,注意這里的內容最多顯示兩行哦,超出兩行后的內容會變成“…”
第三個參數(shù)為Snackbar顯示的時長,有三種模式供選擇
- LENGTH_SHORT:短時間顯示
- LENGTH_LONG:長時間顯示
- LENGTH_INDEFINITE:一直顯示,只有當用戶觸發(fā)Action點擊事件或手動刪除時才會消失
Snackbar可以通過setAction方法設置一個點擊事件,和用戶進行交互
我們還可以通過setCallback方法來監(jiān)聽Snackbar的顯示和關閉
Snackbar sb = Snackbar.make(mOpenTv, "消息內容", Snackbar.LENGTH_SHORT); sb.setCallback(new Snackbar.Callback() { @Override public void onDismissed(Snackbar snackbar, int event) { super.onDismissed(snackbar, event); // Snackbar關閉時回調 } @Override public void onShown(Snackbar snackbar) { super.onShown(snackbar); // Snackbar打開時回調 } }); sb.show();
Snackbar還支持滑出刪除,需要在布局文件中使用CoordinatorLayout作為根布局
建議要使用Snackbar的時候最好是以CoordinatorLayout作為根布局,如果以其它RelativeLayout,LinearLayout等作為根布局的話,會出現(xiàn)以下這種情況
FloatingActionButton被遮到了,使用CoordinatorLayout作為根布局可以避免這種情況
Snackbar只能在底部顯示嗎?
是也不是,為啥這么說呢,Snackbar確實是在CoordinatorLayout底部顯示的,但并不等于是在屏幕頂部
首先我們要知道Snackbar顯示的原理是什么
之前介紹中的第一個傳進去的參數(shù)View,Snackbar會通過這個View控件找到它所在的根布局,我們來查看下源碼
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; }
我們傳進去的view會經過findSuitableParent方法的處理,我們再來看下這個方法的具體實現(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; }
詳細的過程google的工程師已經寫的非常的清楚了,我們主要需要了解的就是當一個View的直接父布局為CoordinatorLayout時,就以這個CoordinatorLayout為標準來顯示Snackbar
我們可以做個小實驗驗證一下
在傳入的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="打開Snackbar" android:textSize="28sp"/> </android.support.design.widget.CoordinatorLayout>
再運行一下看看,效果就變成了下面這樣
所以說Snackbar的顯示位置還是可以通過這個小技巧來改變的
如果嫌默認的Snackbar太丑怎么辦?
我們可以來自定義它的外觀
1.改變按鈕的文字顏色
通過調用setActionTextColor方法即可改變按鈕的文字顏色
Snackbar sb = Snackbar.make(mOpenTv, "消息內容", Snackbar.LENGTH_SHORT); sb.setAction("確定", new View.OnClickListener() { @Override public void onClick(View v) { } }); sb.setActionTextColor(Color.YELLOW); sb.show();
2.改變消息內容的文字顏色
Snackbar沒有給我們提供改變消息文本顏色的api接口,但在查看源碼時發(fā)現(xiàn)了這個方法getView
/** * Returns the {@link Snackbar}'s view. */ @NonNull public View getView() { return mView; }
這里返回的mView其實是一個SnackbarLayout布局,在SnackbarLayout的構造方法中找到了它的布局文件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布局文件里只有兩個控件,一個TextView,一個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" style="?attr/borderlessButtonStyle"/> </merge>
相信看到這里大家應該知道怎么做了,TextView的id為snackbar_text,我們通過getView()來獲取這個TextView控件
Snackbar sb = Snackbar.make(mOpenTv, "消息內容", 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();
同樣的,我們也可以通過tv.setTextSize設置它的文字大小
3.改變消息內容的背景
同理,根據(jù)以上方法,得到它的布局,調用對應的api接口就好
View view = sb.getView(); view.setBackgroundColor(Color.RED);
像這種紅紅的給用戶警告的提示,是不是比Toast要來的炫酷多了呢
4.給消息內容添加圖標
獲取到消息內容的TextView后,調用setCompoundDrawables方法設置它的圖標,可自由選擇圖標放置的位置,四個參數(shù)分別對應TextView的左、上、右、下
Snackbar sb = Snackbar.make(mOpenTv, "消息內容", 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左邊添加圖標 tv.setGravity(Gravity.CENTER); // 讓文字居中 sb.show(); }
注意要設置setGravity使其居中,不然文字默認在上面不好看啊
就先介紹這么多,其實只要拿到了它的布局,接下來怎么整就看各位的喜好啦
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
mac系統(tǒng)下載、安裝、使用AndroidStudio
本文給大家介紹的是在Mac系統(tǒng)中下載安裝以及使用AndroidStudio的詳細教程,非常的實用,有需要的小伙伴可以參考下2017-10-10Android開發(fā)獲取傳感器數(shù)據(jù)的方法示例【加速度傳感器,磁場傳感器,光線傳感器,方向傳感器】
這篇文章主要介紹了Android開發(fā)獲取傳感器數(shù)據(jù)的方法,結合實例形式分析了Android獲取加速度傳感器、磁場傳感器、光線傳感器及方向傳感器數(shù)據(jù)的相關操作技巧,需要的朋友可以參考下2017-11-11Android使用Kotlin和RxJava 2.×實現(xiàn)短信驗證碼倒計時效果
本篇文章主要介紹了Android使用Kotlin和RxJava 2.×實現(xiàn)短信驗證碼倒計時效果,非常具有實用價值,需要的朋友可以參考下2017-12-12Android編程使用GestureDetector實現(xiàn)簡單手勢監(jiān)聽與處理的方法
這篇文章主要介紹了Android編程使用GestureDetector實現(xiàn)簡單手勢監(jiān)聽與處理的方法,簡單講述了Android手勢監(jiān)聽的原理并結合實例形式分析了GestureDetector實現(xiàn)手勢監(jiān)聽與處理的相關操作技巧,需要的朋友可以參考下2017-09-09Android上實現(xiàn)easyconfig(airkiss)方法
本篇文章主要給大家講解了在Android系統(tǒng)上實現(xiàn)easyconfig(airkiss)的方法,有這方面需要的朋友參考學習下吧。2018-01-01Android自動測試工具Monkey的實現(xiàn)方法
本文主要介紹Android Monkey 實現(xiàn)方法,Monkey測試是一種為了測試軟件的穩(wěn)定性、健壯性的快速有效的方法,具有非常重要的參考價值,希望對小伙伴有所幫助2016-07-07