Snackbars & Toasts¶
Snack Bar¶
摘自 google material design 文档
Snackbars 通过在屏幕底部显示一个简短的信息,提供了关于一个操作的轻量反馈。
如何添加?¶
I. 在你的 build.grade
文件末尾添加最新的 design
库。
dependencies { // optionally, Snackbar can be used in pair // with CoordinatorLayout // compile 'com.android.support:appcompat-v7:X.X.X' compile 'com.android.support:design:X.X.X' // where X.X.X version }
II. 用 make()
方法创建一个 Snackbar
实例,然后调用 show()
方法。
Snackbar .make(view, "No network connection.",Snackbar.LENGTH_SHORT) .show();
参数 view
被用来查找父视图。Snackbar 将被显示在它的上面。
备注
Snackbar 将尝试并找到一个父视图去控制 Snackbar's 视图。Snackbar 将沿着视图树去尝试找到一个合适的父视图,它被定义为一个 CoordinatorLayout
或者窗口的 decor's 内容视图,以先找到的为准。
Duration¶
指定 Snackbar
在屏幕上显示多长时间使用 setDuration
方法。
// 预定义的持续时间常量 Snackbar.LENGTH_SHORT // 1500 millis Snackbar.LENGTH_LONG // 2750 millis Snackbar.LENGTH_INDEFINITE // 你可设置自己定义的持续时间 snackbar.setDuration(TimeUnit.MINUTES.toMillis(1));
Dismiss¶
使用 dismiss()
方法可以在任何时候 dismiss 掉 Snackbar
。
Snackbar snackBar = Snackbar.make(view, text, duration); snackBar.dismiss(); //hide snackbar
Events¶
每当 Snackbar
被显示或者隐藏的时候可以使用 setCallback
方法来追踪。
Snackbar .make(...) .setCallback(new Snackbar.Callback() { @Override public void onDismissed(Snackbar snackbar, int event) { // do some action on dismiss } @Override public void onShown(Snackbar snackbar) { // do some action when snackbar is showed } })
参数 event
来自于 onDismissed()
,是 Snackbar.Callback 内预定义的常量之一。
Actions¶
Snackbar 可以包含一个 action 。通过调用 setAction()
方法添加它。
Snackbar .make(...) .setAction("Retry", new View.OnClickListener() { @Override public void onClick(View v) { // retry to send email here } })
要开启滑动 dismiss 和自动的移动像 FloatingActionButton 这样的组件需要使用 CoordinatorLayout 作为根布局。
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:src="@android:drawable/ic_menu_call"/> </android.support.design.widget.CoordinatorLayout>
如何设置样式?¶
通过主题¶
I. 在你的 values/styles.xml
文件内定义自定义样式。
<style name="SnackbarTheme" parent="Theme.AppCompat.Light"> <item name="colorAccent">@color/indigo</item> <item name="android:textColor">@color/pink</item> </style>
II. 在 AndroidManifest.xml
中通过android:theme
属性应用这个样式到你的 Activity
。
<activity android:name=".SnackbarActivity" android:theme="@style/AppTheme"> </activity>
备注
应用主题到 Activity
将会应用 colorAccent
和 android:textColor
到它内部的所有 view。
通过代码¶
使用 getView()
方法获取 Snackbar
视图并改变它的属性。
// 创建实例 Snackbar snackbar = Snackbar.make(view, text, duration); // 设置动作按钮颜色 snackbar.setActionTextColor(getResources().getColor(R.color.indigo)); // 获取 snackbar 视图 View snackbarView = snackbar.getView(); // 改变 snackbar 文本颜色 int snackbarTextId = android.support.design.R.id.snackbar_text; TextView textView = (TextView)snackbarView.findViewById(snackbarTextId); textView.setTextColor(getResources().getColor(R.color.indigo)); // 改变 snackbar 背景 snackbarView.setBackgroundColor(Color.MAGENTA);
通过自定义 view¶
I. 在你的 values/layout 文件夹里添加一个自定义布局。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <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"/> <TextView android:gravity="center_vertical|right" 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"/> </LinearLayout>
备注
Use @dimen/design_snackbar
values to match material design guidelines.
Use ?attr/colorAccent
to apply your Application Theme changes to Snackbar
.
II. 继承自 BaseTransientBottomBar 类.
public class CustomSnackbar extends BaseTransientBottomBar<CustomSnackbar> { /** * Constructor for the transient bottom bar. * * @param parent The parent for this transient bottom bar. * @param content The content view for this transient bottom bar. * @param contentViewCallback The content view callback for this transient bottom bar. */ private CustomSnackbar(ViewGroup parent, View content, ContentViewCallback contentViewCallback) { super(parent, content, contentViewCallback); } }
III. 添加 BaseTransientBottomBar.ContentViewCallback
public class CustomSnackbar ... { ... private static class ContentViewCallback implements BaseTransientBottomBar.ContentViewCallback { // view inflated from custom layout private View content; public ContentViewCallback(View content) { this.content = content; } @Override public void animateContentIn(int delay, int duration) { // add custom *in animations for your views // e.g. original snackbar uses alpha animation, from 0 to 1 ViewCompat.setScaleY(content, 0f); ViewCompat.animate(content) .scaleY(1f).setDuration(duration) .setStartDelay(delay); } @Override public void animateContentOut(int delay, int duration) { // add custom *out animations for your views // e.g. original snackbar uses alpha animation, from 1 to 0 ViewCompat.setScaleY(content, 1f); ViewCompat.animate(content) .scaleY(0f) .setDuration(duration) .setStartDelay(delay); } } }
IV. 通过自定义布局和方法来创建 Snackbar
public class final CustomSnackbar ...{ ... public static CustomSnackbar make(ViewGroup parent, @Duration int duration) { // inflate custom layout LayoutInflater inflater = LayoutInflater.from(parent.getContext()); View content = inflater.inflate(R.layout.snackbar_view, parent, false); // create snackbar with custom view ContentViewCallback callback= new ContentViewCallback(content); CustomSnackbar customSnackbar = new CustomSnackbar(parent, content, callback); // set snackbar duration customSnackbar.setDuration(duration); return customSnackbar; } // set text in custom layout public CustomSnackbar setText(CharSequence text) { TextView textView = (TextView) getView().findViewById(R.id.snackbar_text); textView.setText(text); return this; } // set action in custom layout public CustomSnackbar setAction(CharSequence text, final OnClickListener listener) { Button actionView = (Button) getView().findViewById(R.id.snackbar_action); actionView.setText(text); actionView.setVisibility(View.VISIBLE); actionView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { listener.onClick(view); // Now dismiss the Snackbar dismiss(); } }); return this; } }
V. 创建 CustomSnackbar
实例对象并调用 show()
方法。
CustomSnackbar customSnackbar = CustomSnackbar.make(rooView, CustomSnackbar.LENGTH_INDEFINITE); customSnackbar.setText("No network connection!"); customSnackbar.setAction("Retry", new View.OnClickListener() { @Override public void onClick(View v) { // handle click here } }); customSnackbar.show();
Toast¶
摘自 google material design 文档
Android 另外提供了一个 toast,主要用于系统消息。Toasts 跟 snackers 类似,但是不能包含 actions 和 不能懂屏幕滑动关闭掉。
如何添加?¶
用 make() 方法创建一个 Toast
实例,然后调用 show() 方法。
Toast.makeText(context, "No network connection.", duration).show();
Duration¶
使用 makeText()
方法的 duration
参数 或者 setDuration
方法指定 Snackbar 在屏幕上显示多长时间。
// you can use only those 2 predefined constants duration = Toast.LENGTH_SHORT; // 2000 millis duration = Toast.LENGTH_LONG; // 3500 millis toast.setDuration(duration);
Cancel¶
可以在任何时候使用 cancel()
方法手动的去隐藏 Toast
。
Toast toast= Toast.make(view, text, duration).show(); toast.cancel(); //hide toast
备注
如果在它显示的时候关闭它或者在不想显示的时候它仍然显示,通常你不需要去调用这个方法。它会在持续适当的时间之后自己消失。
Positioning¶
用 setGravity()
可以改变 Toast
的显示位置。
int gravity = Gravity.CENTER; // the position of toast int xOffset = 0; // horizontal offset from current gravity int yOffset = 0; // vertical offset from current gravity Toast toast= Toast.make(view, text, duration); toast.setGravity(gravity, xOffset, yOffset);
如何设置样式?¶
用代码¶
// 创建 Toast 实例 Toast toast = Toast.makeText(context, text, duration); // 设置消息颜色 TextView textView= (TextView) toast.getView().findViewById(android.R.id.message); textView.setTextColor(Color.YELLOW); // 设置背景颜色 toast.getView().setBackgroundColor(getResources().getColor(R.color.indigo));
用自定义 View¶
I. 在 layout.xml
文件内的任意位置声明你的自定义 View。
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/txtMessage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableStart="@drawable/ic_report_problem" android:drawablePadding="8dp" android:paddingTop="8dp" android:paddingBottom="8dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:gravity="center" android:textColor="@android:color/white" android:textSize="16dp" android:text="No connection." android:background="@color/indigo"/>
II. 通过 setView()
方法设置你的自定义 View 到 Toast
。
// 创建 Toast 实例 Toast toast = new Toast(getApplicationContext()); // 创建自定义 view View view = getLayoutInflater().inflate(R.layout.toast_view, null); // 设置自定义 view toast.setView(view); // 设置显示持续时间 toast.setDuration(Toast.LENGTH_LONG); // 设置位置 int margin = getResources().getDimensionPixelSize(R.dimen.toast_vertical_margin); toast.setGravity(Gravity.BOTTOM | Gravity.CENTER_VERTICAL, 0, margin); // 显示 Toast toast.show();
翻译水平有限,欢迎批评指正
原文作者:Yakiv Mospan 原文地址:Snackbars & Toasts