首页 > 代码库 > Snackbar使用详解及其相关框架TSnackbar
Snackbar使用详解及其相关框架TSnackbar
简述:
Snackbar 是 Android design support library 中的一个组件,它的作用和Toast类似,显示吐司,但Snackbar的特别之处在于Snackbar显示的提示信息可以和用户交互,更好地获取用户反馈信息。同时,它显示的吐司带有动画效果,从屏幕下方慢慢展开显示。Goggle官方这样介绍:“SnackBars提供了一个轻量级的反馈操作。他们在屏幕的底部显示一条简短的信息,如果是较大的设备就显示在左下角。SnackBar出现在屏幕中所有其他元素的上方,同一时间仅仅只有一条SnackBar”。总之,SnackBar的特点大致下面几条:
①与Toast一样可以进行吐司信息;
②可以与用户交互操作;③一个时刻只能有唯一一个 Snackbar 显示。
我们先来感受一下它的强大吧,请看效果图:
基本使用方法
1、简单使用
上面的效果图代码实现:
import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.Button; public class MainActivity extends AppCompatActivity { private Button btn_show; private ViewGroup frameLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); } private void initViews() { frameLayout = (ViewGroup) findViewById(android.R.id.content); btn_show = (Button) findViewById(R.id.btn_show); btn_show.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"Hello SnackBar!",Snackbar.LENGTH_SHORT).show(); } }); } }其实使用的核心代码就一句:
Snackbar.make(view,"Hello SnackBar!",Snackbar.LENGTH_SHORT).show();使用起来类似于Toast,但也有与Toast的不同之处,Toast的使用:
Toast.makeText(MainActivity.this, "真的能够交互", Toast.LENGTH_SHORT).show();他们的第一个参数不同,Toast第一个参数是Context,而Snackbar第一个参数为View,这个View就是Toast的父布局。与Toast不同的是Snackbar显示时长有三种:
①Snackbar.LENGTH_SHORT:与Toast.LENGHT_SHORT(大约1.x秒)一样显示较短时长后自动消失。
②Snackbar.LENGTH_LONG:与Toast.LENGHT_LONG(大约3秒)一样显示相对较长时间后自动消失。
③Snackbar.LENGTH_INDEFINITE:永不消失除非手动调用dismiss()方法去除Snackbar。
2、可交互的Snackbar
刚才已经说过Snackbar比Toast强大,其中有一点就是Snackbar可以用来与用户交互,我们看一下效果:
核心代码:
final Snackbar snackbar = Snackbar.make(frameLayout, "Hello SnackBar!", Snackbar.LENGTH_INDEFINITE); snackbar.setAction("OK?", new View.OnClickListener() { @Override public void onClick(View view) { // snackbar.dismiss(); //doSomething } }); snackbar.show();setAction(CharSequence text, View.OnClickListener listener)方法为用户交互的点击事件,第一个参数是点击事件的信息,第二个就是一个View.OnClickListener点击监听器。
3、可反馈的Snackbar
Snackbar可以反馈指的是它可以监听Snackbar的显示与退出(也包括各种退出的类型的监听),来张效果图:
核心代码:
final Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "反馈监听的Snackbar", Snackbar.LENGTH_LONG); snackbar.setAction("能交互吗", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "真的能够交互", Toast.LENGTH_SHORT).show(); } }); snackbar.setCallback(new Snackbar.Callback() { @Override public void onDismissed(Snackbar snackbar, int event) { super.onDismissed(snackbar, event); switch (event) { case Snackbar.Callback.DISMISS_EVENT_ACTION: Toast.makeText(MainActivity.this, "Snackbar通过Action的点击事件退出", Toast.LENGTH_SHORT).show(); break; case Snackbar.Callback.DISMISS_EVENT_CONSECUTIVE: Toast.makeText(MainActivity.this, "Snackbar由于新的Snackbar显示而退出", Toast.LENGTH_SHORT).show(); break; case Snackbar.Callback.DISMISS_EVENT_MANUAL: Toast.makeText(MainActivity.this, "Snackbar通过调用dismiss()方法退出", Toast.LENGTH_SHORT).show(); break; case Snackbar.Callback.DISMISS_EVENT_SWIPE: Toast.makeText(MainActivity.this, "Snackbar右划退出", Toast.LENGTH_SHORT).show(); break; case Snackbar.Callback.DISMISS_EVENT_TIMEOUT: Toast.makeText(MainActivity.this, "Snackbar自然退出", Toast.LENGTH_SHORT).show(); break; } } @Override public void onShown(Snackbar snackbar) { super.onShown(snackbar); Toast.makeText(MainActivity.this, "Snackbar显示", Toast.LENGTH_SHORT).show(); } }); snackbar.show();
监听的实现是通过CallBack接口实现的,setCallback(Snackbar.Callback callback):Snackbar的显示与隐藏的回调接口,在该接口中可以重写两个方法:一个是onShow()在Snackbar显示时回调,另一个是onDismissed()在Snackbar隐藏时回调。另外一点就是在onDismissed()方法中可以监听到Snackbar退出的五种原因类型:
①Snackbar.Callback.DISMISS_EVENT_SWIPE=0:Indicates that the Snackbar was dismissed via a swipe。
该事件下Snackbar退出的原因是;意思是“Snackbar右划退出事件”,注意这个右划事件只有在父布局为CoordinatorLayout才会被触发,其他布局如LinearLayout、RelativeLayout等是不会出发的。
②Snackbar.Callback.DISMISS_EVENT_ACTION = 1:Indicates that the Snackbar was dismissed via an action click。
该事件下Snackbar退出的原因是:Snackbar通过Action点击事件触发退出。
③Snackbar.Callback.DISMISS_EVENT_TIMEOUT = 2:Indicates that the Snackbar was dismissed via a timeout。
该事件下Snackbar退出的原因是:Snackbar超出通过setDuration()方法所设置的规定时间后退出,这也是正常的自然退出。
④Snackbar.Callback.DISMISS_EVENT_MANUAL = 3:Indicates that the Snackbar was dismissed via a call to dismiss()。
该事件下Snackbar提出的原因是:通过手动调用了dismiss()方法。
⑤Snackbar.Callback.DISMISS_EVENT_CONSECUTIVE = 4:Indicates that the Snackbar was dismissed from a new Snackbar being shown。
该事件下Snackbar提出的原因:由于新的Snackbar的显示而退出。
4、自定义Snackbar
在自定义Snackbar之前需要弄清Snackbar的内部构造,打开Snackbar源码可以看到其有一个内部类Snackbar.SnackbarLayout,该内部类就是Snackbar布局,然后找到Snackbar.SnackbarLayout的布局资源文件design_layout_snackbar_include.xml,打开该文件看到一个TextView(吐司左边的信息)和一个Button(显示SnackBar右侧与用户交互的按钮)。
<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>如果我们能够获取到该View岂不是就能随意的更改一些Snackbar的背景样式、吐司信息、吐司文字的颜色及大小、交互按钮Button的颜色与文字大小等信息了吗?不错,Snackbar提供了一个getView()方法,这个方法就可以获取到Snackbar.SnackbarLayout的实例。那么下面就来尝试一下。
核心代码:
final Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "自定义Snackbar", Snackbar.LENGTH_LONG); snackbar.setAction("是否OK", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this, "真的能够交互", Toast.LENGTH_SHORT).show(); } }); final Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView(); if (snackbarView != null){ //设置SnackBar背景与透明度 snackbarView.setBackgroundResource(R.drawable.background); snackbarView.setAlpha((float) 0.4); //设置Action的字体颜色与大小 final Button snackbar_action = (Button) snackbarView.findViewById(android.support.design.R.id.snackbar_action); snackbar_action.setTextColor(Color.RED); snackbar_action.setTextSize(convertSpToPixel(snackbarView.getContext(),10)); //这是Text的文字颜色与大小 final TextView snackbar_text = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text); snackbar_text.setTextColor(Color.RED); snackbar_text.setTextSize(convertSpToPixel(snackbarView.getContext(),10)); //设置左侧icon Drawable drawable = ContextCompat.getDrawable(MainActivity.this, R.mipmap.ic_core); if (drawable != null) { drawable = fitDrawable(getResources(), drawable, (int) convertDpToPixel(24, MainActivity.this)); } else { throw new IllegalArgumentException("resource_id is not a valid drawable!"); } final Drawable[] compoundDrawables = snackbar_text.getCompoundDrawables(); snackbar_text.setCompoundDrawables(drawable, compoundDrawables[1], compoundDrawables[2], compoundDrawables[3]); } snackbar.show();对于自定义我们首先得获取Snackbar的布局:
final Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView();
拿到布局以后我们可以对Snackbar的背景和透明度进行设置:
snackbarView.setBackgroundResource(R.drawable.background); snackbarView.setAlpha((float) 0.4);还记得刚才我们看的Snackbar的布局文件吗?里面就是一个TextView和一个Button,如果我们想要对他们进行自定义我们可以先拿到他们的布局view,首先我们看一下Button:
final Button snackbar_action = (Button) snackbarView.findViewById(android.support.design.R.id.snackbar_action);我们拿到Button实例之后就可以对其进行自定义了:
snackbar_action.setTextColor(Color.RED); snackbar_action.setTextSize(convertSpToPixel(snackbarView.getContext(),10));我们在对Snackbar里的TextView进行自定义:
final TextView snackbar_text = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);对其设置字体大小和字体颜色:
snackbar_text.setTextColor(Color.RED); snackbar_text.setTextSize(convertSpToPixel(snackbarView.getContext(),10));对于TextView本身来说还有一个方法就是可以通过setCompoundDrawables(left,top,right,bottom)设置图标Icon,现在我们对Snackbar里的TextView进行左侧图标Icon的设置:
//设置左侧icon Drawable drawable = ContextCompat.getDrawable(MainActivity.this, R.mipmap.ic_core); if (drawable != null) { drawable = fitDrawable(getResources(), drawable, (int) convertDpToPixel(24, MainActivity.this)); } else { throw new IllegalArgumentException("resource_id is not a valid drawable!"); } final Drawable[] compoundDrawables = snackbar_text.getCompoundDrawables(); snackbar_text.setCompoundDrawables(drawable, compoundDrawables[1], compoundDrawables[2], compoundDrawables[3]);这里的代码还用到的方法如下:
/** * 方法描述:将drawable压缩为指定宽高的drawable * * @param resources * @param drawable 原始drawable * @param sizePx 指定的drawable压缩宽高 * @return */ private static Drawable fitDrawable(Resources resources, Drawable drawable, int sizePx) { if (drawable.getIntrinsicWidth() != sizePx || drawable.getIntrinsicHeight() != sizePx) { if (drawable instanceof BitmapDrawable) { drawable = new BitmapDrawable(resources, Bitmap.createScaledBitmap(getBitmap(drawable), sizePx, sizePx, true)); } } drawable.setBounds(0, 0, sizePx, sizePx); return drawable; } /** * 方法描述:将Drawable转化为Bitmap * * @param drawable * @return */ private static Bitmap getBitmap(Drawable drawable) { if (drawable instanceof BitmapDrawable) { return ((BitmapDrawable) drawable).getBitmap(); } else if (drawable instanceof VectorDrawable) { return getBitmap((VectorDrawable) drawable); } else { throw new IllegalArgumentException("unsupported drawable type"); } } /** * 方法描述:将VectorDrawable转化为Bitmap * * @param vectorDrawable * @return */ @TargetApi(Build.VERSION_CODES.LOLLIPOP) private static Bitmap getBitmap(VectorDrawable vectorDrawable) { Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); vectorDrawable.draw(canvas); return bitmap; }好了,Snackbar的基本用法已经差不多了,现在封装一个Snackbar的工具类吧!!!
5、封装工具类
import android.annotation.TargetApi; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.graphics.drawable.VectorDrawable; import android.os.Build; import android.support.annotation.Nullable; import android.support.design.widget.Snackbar; import android.support.v4.content.ContextCompat; import android.util.TypedValue; import android.view.View; import android.widget.Button; import android.widget.TextView; /** * 类描述:Snackbar工具类 * Created by lizhenya on 16/7/14. */ public class SnackbarUtil { private static Snackbar.SnackbarLayout getSnackbarLayout(Snackbar snackbar) { final Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView(); return snackbarView; } public static Snackbar shortMake(View view, CharSequence message) { final Snackbar snackbar = Snackbar.make(view, message, Snackbar.LENGTH_SHORT); return snackbar; } public static Snackbar shortMake(View view, int messageId) { final Snackbar snackbar = Snackbar.make(view, messageId, Snackbar.LENGTH_LONG); return snackbar; } public static Snackbar longMake(View view, CharSequence message) { final Snackbar snackbar = Snackbar.make(view, message, Snackbar.LENGTH_SHORT); return snackbar; } public static Snackbar longMake(View view, int messageId) { final Snackbar snackbar = Snackbar.make(view, messageId, Snackbar.LENGTH_LONG); return snackbar; } public static Snackbar indefiniteMake(View view, CharSequence message) { final Snackbar snackbar = Snackbar.make(view, message, Snackbar.LENGTH_INDEFINITE); return snackbar; } public static Snackbar indefiniteMake(View view, int messageId) { final Snackbar snackbar = Snackbar.make(view, messageId, Snackbar.LENGTH_INDEFINITE); return snackbar; } /** * 方法描述:设置Snackbar的透明度 * * @param snackbar * @param alpha */ public static void setSnackbarAlpha(Snackbar snackbar, float alpha) { final Snackbar.SnackbarLayout snackbarView = getSnackbarLayout(snackbar); if (snackbarView == null) return; snackbarView.setAlpha(alpha); } /** * 方法描述:设置Snackbar的背景颜色 * * @param snackbar * @param color */ public static void setSnackbarBackgroundColor(Snackbar snackbar, int color) { final Snackbar.SnackbarLayout snackbarView = getSnackbarLayout(snackbar); if (snackbarView == null) return; snackbarView.setBackgroundColor(color); } /** * 方法描述:设置Snackbar的背景图片资源 * * @param snackbar * @param resId */ public static void setSnackbarBackgroudResource(Snackbar snackbar, int resId) { final Snackbar.SnackbarLayout snackbarView = getSnackbarLayout(snackbar); if (snackbarView == null) return; snackbarView.setBackgroundResource(resId); } /** * 方法描述:设置Snackbar中Action的字体颜色 * * @param snackbar * @param color */ public static void setActionTextColor(Snackbar snackbar, int color) { //snackbar.setActionTextColor(color); final Snackbar.SnackbarLayout snackbarView = getSnackbarLayout(snackbar); if (snackbarView == null) return; final Button snackbar_action = (Button) snackbarView.findViewById(android.support.design.R.id.snackbar_action); snackbar_action.setTextColor(color); } /** * 方法描述:设置Snackbar中Action的字体大小 * * @param snackbar * @param size Action的字体大小(单位为sp) */ public static void setActionTextSize(Snackbar snackbar, float size) { final Snackbar.SnackbarLayout snackbarView = getSnackbarLayout(snackbar); if (snackbarView == null) return; final Button snackbar_action = (Button) snackbarView.findViewById(android.support.design.R.id.snackbar_action); snackbar_action.setTextSize(sp2px(snackbarView.getContext(), size)); } /** * 方法描述:设置SnackBar左侧TextView控件的文字颜色和大小 * * @param snackbar * @param color TextView控件的文字颜色 * @param size TextView控件的文字大小 */ public static void setTextColorAndSize(Snackbar snackbar, @Nullable int color, @Nullable float size) { final Snackbar.SnackbarLayout snackbarView = getSnackbarLayout(snackbar); if (snackbarView == null) return; final TextView snackbar_text = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text); if (color != 0) { snackbar_text.setTextColor(color); } if (size != 0) { snackbar_text.setTextSize(size); } } /** * 方法描述:在Snackbar左侧添加icon * * @param snackbar Snackbar实例 * @param drawableResId 添加的icon资源ID * @param sizeDp icon的宽度与高度值 */ public static void setIconLeft(Snackbar snackbar, int drawableResId, float sizeDp) { final Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) getSnackbarLayout(snackbar); if (snackbarView == null) return; //snackbar不同于Toast,snackbar依赖于Activity而存在 final Context mContext = snackbarView.getContext(); if (mContext == null) { return; } final TextView snackbar_text = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text); Drawable drawable = ContextCompat.getDrawable(mContext, drawableResId); if (drawable != null) { drawable = fitDrawable(mContext.getResources(), drawable, (int) convertDpToPixel(sizeDp, mContext)); } else { throw new IllegalArgumentException("resource_id is not a valid drawable!"); } final Drawable[] compoundDrawables = snackbar_text.getCompoundDrawables(); snackbar_text.setCompoundDrawables(drawable, compoundDrawables[1], compoundDrawables[2], compoundDrawables[3]); } /** * 方法描述:将drawable压缩为指定宽高的drawable * * @param resources * @param drawable 原始drawable * @param sizePx 指定的drawable压缩宽高 * @return */ private static Drawable fitDrawable(Resources resources, Drawable drawable, int sizePx) { if (drawable.getIntrinsicWidth() != sizePx || drawable.getIntrinsicHeight() != sizePx) { if (drawable instanceof BitmapDrawable) { drawable = new BitmapDrawable(resources, Bitmap.createScaledBitmap(getBitmap(drawable), sizePx, sizePx, true)); } } drawable.setBounds(0, 0, sizePx, sizePx); return drawable; } /** * 方法描述:将Drawable转化为Bitmap * * @param drawable * @return */ private static Bitmap getBitmap(Drawable drawable) { if (drawable instanceof BitmapDrawable) { return ((BitmapDrawable) drawable).getBitmap(); } else if (drawable instanceof VectorDrawable) { return getBitmap((VectorDrawable) drawable); } else { throw new IllegalArgumentException("unsupported drawable type"); } } /** * 方法描述:将VectorDrawable转化为Bitmap * * @param vectorDrawable * @return */ @TargetApi(Build.VERSION_CODES.LOLLIPOP) private static Bitmap getBitmap(VectorDrawable vectorDrawable) { Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); vectorDrawable.draw(canvas); return bitmap; } /** * 方法描述:dp转化为px * * @param dpValue * @param context * @return */ private static float convertDpToPixel(float dpValue, Context context) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics()); } /** * sp转px * * @param context * @param spVal * @return */ public static int convertSpToPixel(Context context, float spVal) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, context.getResources().getDisplayMetrics()); } public static int sp2px(Context context, float spValue) { final float fontScale = context.getResources().getDisplayMetrics().scaledDensity; return (int) (spValue * fontScale + 0.5f); } }
顶部展示的SnackBar
文章最后介绍一个第三方框架。系统默认的Snackbar是从屏幕底部弹出的,如果想要改变其弹出位置可以将其父控件置于想要弹出的屏幕位置,但是即使这样做也不能改变动画,现在介绍一个从顶部弹出的Snackbar框架TSnackbar,github链接:https://github.com/AndreiD/TSnackBar。
Snackbar使用源码下载:http://download.csdn.net/detail/u012810020/9594379
Snackbar使用详解及其相关框架TSnackbar