Android Snackbar的使用

最新推荐文章于 2024-04-28 16:01:01 发布
最新推荐文章于 2024-04-28 16:01:01 发布
阅读量6.6k 收藏 14
点赞数 7
分类专栏： 控件 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/azhoup/article/details/117929028
版权

在项目中肯定有不少地方用到Toast，但是在项目各种各样的需求上，Toast已经不能满足我们的需求了。
其实google在Android 5.0的时候就推出了Snackbar，它算是Toast的一个进阶控件。
它是Material Design中的一个控件，与Toast的最大区别就是它可以与用户进行交互–也就是说它可以处理用户的点击事件。

用法

它需要配合CoordinatorLayout使用，可以在xml中写个CoordinatorLayout也可以使用下面的代码获取CoordinatorLayout

View decorView = getWindow().getDecorView();
CoordinatorLayout coordinatorLayout = decorView.findViewById(R.id.content);

简单用法

Snackbar.make(coordinatorLayout,"展示Snackbar",Snackbar.LENGTH_SHORT).show();

是不是看着很面熟，不能说给Toast的用法差不多，那简直是一模一样啊。上个Toast的用法对比一下：

Toast.makeText(this,"展示Snackbar",Toast.LENGTH_SHORT).show();

是不是看着一模一样。
用法是一样的，但是展示的位置是不一样的，Toast默认展示位置是靠近在屏幕的底部，而Snackbar的默认展示位置是在屏幕的底部。

在这里插入图片描述
靠上的那个是Toast所展示的内容，下面的撑满屏幕的则是Snackbar所展示的内容。

稍微进阶一点的用法
// Snackbar.make方法会返回一个Snackbar实例，可以拿到这个实例去执行show和dismiss等方法。
// Snackbar snackbar = Snackbar.make(coordinatorLayout, "展示Snackbar", Snackbar.LENGTH_SHORT);
// snackbar.show();
Snackbar.make(coordinatorLayout,"展示Snackbar",Snackbar.LENGTH_SHORT).setAction("关闭", v1 -> {
    Log.d("TAG", "点击了关闭");
    // snackbar.dismiss();
}).show();

在这里插入图片描述
多了个关闭的按钮，这个就是我们刚刚设置的Action
在这里插入图片描述
这是点击之后的log信息，点击关闭之后可以手动调用Snackbar的dismiss()方法关闭Snackbar。

到这里Snackbar的简单用法和稍微进阶一点点的用法已经介绍完了。

下面来讲一下进阶用法，比如说自定义布局，自定义位置等。

自定义布局

其实自定义布局也是非常简单：

  1. 通过Snackbar.getView获取到view
  2. 通过LayoutInflater去加载布局得到自定义的布局view
  3. 通过 1 中获取到的view添加 2 中加载好的布局view
  4. 通过 1 中得到的自定义布局获取里面的控件去执行一些操作，比如说点击事件，设置文字和文字颜色等等
View rootView = this.getWindow().getDecorView();
View coordinatorLayout = rootView.findViewById(android.R.id.content);
Snackbar snackbar = Snackbar.make(coordinatorLayout, "", Snackbar.LENGTH_SHORT);
// 上面的三行代码给咱们上面说过的是一样的，这里也就不添加注释了
// 获取到Snackbar.getView获取的Snackbar的view
Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView();
// 加载咱们自定义的布局
View inflate = LayoutInflater.from(snackbar.getView().getContext()).inflate(R.layout.snacbar_layout, null);
// 通过自定义布局中的控件
TextView text = inflate.findViewById(R.id.textView);
// 设置自定义的文案
text.setText("自定义布局的Snackbar");
// 通过自定义布局中的控件
ImageView imageView = inflate.findViewById(R.id.imageView);
// 设置点击事件
imageView.setOnClickListener(v1 -> Log.d("TAG", "点击了自定义布局中的控件"));
// 将获取的自定义布局view添加到SnackbarView中
snackbarView.addView(inflate);
// 展示
snackbar.show();

到这里加载自定义布局已经基本完成，但是在实践中发现了一个小坑。
在这里插入图片描述

这里我们自定义的布局并没有撑满到整个SnackbarView，而是在红框里面颜色比较深的就是Snackbar原来的布局背景颜色。所以这里我们需要处理一下这个情况：

View rootView = this.getWindow().getDecorView();
View coordinatorLayout = rootView.findViewById(android.R.id.content);
Snackbar snackbar = Snackbar.make(coordinatorLayout, "", Snackbar.LENGTH_SHORT);
// 上面的三行代码给咱们上面说过的是一样的，这里也就不添加注释了
// 设置SnackbarView的padding都为0，避免上图中出现黑色边框背景的情况
snackbar.getView().setPadding(0,0,0,0);
// 将SnackbarView的背景颜色设置为透明，避免在自定义布局中有圆角或者自适应宽度的时候显示一块黑色背景的情况
snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
// 获取到Snackbar.getView获取的Snackbar的view
Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView();
// 加载咱们自定义的布局
View inflate = LayoutInflater.from(snackbar.getView().getContext()).inflate(R.layout.snacbar_layout, null);
// 通过自定义布局中的控件
TextView text = inflate.findViewById(R.id.textView);
// 设置自定义的文案
text.setText("自定义布局的Snackbar");
// 通过自定义布局中的控件
ImageView imageView = inflate.findViewById(R.id.imageView);
// 设置点击事件
imageView.setOnClickListener(v1 -> Log.d("TAG", "点击了自定义布局中的控件"));
// 将获取的自定义布局view添加到SnackbarView中
snackbarView.addView(inflate);
// 展示
snackbar.show();

相比与上面的代码，下面修改过的代码只比上面的代码多了两行

// 设置SnackbarView的padding都为0，避免上图中出现黑色边框背景的情况
snackbar.getView().setPadding(0,0,0,0);
// 将SnackbarView的背景颜色设置为透明，避免在自定义布局中有圆角或者自适应宽度的时候显示一块黑色背景的情况
snackbar.getView().setBackgroundColor(Color.TRANSPARENT);

到这里自定义布局就基本完成了。

自定义位置

这里说一说自定义位置，在项目中Snackbar只显示在底部肯定是不能满足产品的变态需求的，所以就出现了这个问题。
其实这个自定义位置也是很简单

  1. 获取到SnackbarView的LayoutParams
  2. 通过1 中获取到的LayoutParams创建新的LayoutParams
  3. 给2中的LayoutParams设置Gravity
  4. 将新的LayoutParams设置给SnackbarView

废话不多说，上代码：

View rootView = this.getWindow().getDecorView();
View coordinatorLayout = rootView.findViewById(android.R.id.content);
Snackbar snackbar = Snackbar.make(coordinatorLayout, "", Snackbar.LENGTH_SHORT);
// 上面的三行代码给咱们上面说过的是一样的，这里也就不添加注释了
// 设置SnackbarView的padding都为0，避免上图中出现黑色边框背景的情况
snackbar.getView().setPadding(0,0,0,0);
// 将SnackbarView的背景颜色设置为透明，避免在自定义布局中有圆角或者自适应宽度的时候显示一块黑色背景的情况
snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
// 获取到Snackbar.getView获取的Snackbar的view
Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView();
// 获取到SnackbarView的LayoutParams
ViewGroup.LayoutParams layoutParams = snackbarView.getLayoutParams();
// 新建一个LayoutParams将SnackbarView的LayoutParams的宽高传入
FrameLayout.LayoutParams fl = new FrameLayout.LayoutParams(layoutParams.width, layoutParams.height);
// 设置新的元素位置
// Gravity有许多属性，基本上可以满足大众需求， 我们这里设置了处于屏幕的中央
fl.gravity = Gravity.CENTER;
// 将新的LayoutParams设置给SnackbarView
snackbarView.setLayoutParams(fl);
// 加载咱们自定义的布局
View inflate = LayoutInflater.from(snackbar.getView().getContext()).inflate(R.layout.snacbar_layout, null);
// 通过自定义布局中的控件
TextView text = inflate.findViewById(R.id.textView);
// 设置自定义的文案
text.setText("自定义布局的Snackbar");
// 通过自定义布局中的控件
ImageView imageView = inflate.findViewById(R.id.imageView);
// 设置点击事件
imageView.setOnClickListener(v1 -> Log.d("TAG", "点击了自定义布局中的控件"));
// 将获取的自定义布局view添加到SnackbarView中
snackbarView.addView(inflate);
// 展示
snackbar.show();

相比于前一段代码也只是多了几行

// 获取到SnackbarView的LayoutParams
ViewGroup.LayoutParams layoutParams = snackbarView.getLayoutParams();
// 新建一个LayoutParams将SnackbarView的LayoutParams的宽高传入
FrameLayout.LayoutParams fl = new FrameLayout.LayoutParams(layoutParams.width, layoutParams.height);
// 设置新的元素位置
// Gravity有许多属性，基本上可以满足大众需求， 我们这里设置了处于屏幕的中央
fl.gravity = Gravity.CENTER;
// 将新的LayoutParams设置给SnackbarView
snackbarView.setLayoutParams(fl);

到这里自定义Snackbar基本就完成了。

这里还有一个小坑，就是在Android SDK 21的时候添加了一个深度属性Elevation，如果有其他的控件设置了这个属性的话，可能会把Snackbar遮挡住。
解决方法也很简单，只需要加入一个判断就行

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    snackBar.getView().setElevation(0);
}

到这里基本上就大功告成了！
写了个Util已经上传到github，觉得有用的话可以点个star

azhoup
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【kotlin组件】SnackbarHost消息提示机制，compose中进行消息提示
qq_39317095的博客
05-18 486
SnackbarHost消息提示机制，compose中进行消息提示
Android Snackbar使用详解
cekiasoo的博客
12-24 1772
一、Snackbar是什么鬼 Snackbar是属于design包下的，功能类似于Toast的一种轻量级反馈消息，Snackbar是从底部弹出消息的。 二、Snackbar长什么样的 这就是Snackbar，很简单，左边一个TextView，右边一个Button。 三、Snackbar的基本使用。 （一）最简单的用法 使用前先导入design包， androi
Android中如何指定SnackBar在屏幕的位置及小问题解决
01-20
Android指定SnackBar在屏幕的位置 Snackbar 常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方，并且是在屏幕所有层的最上方。如果要指定它在屏幕出现的位置，可以把SnackBar放置在android.support.design.widget.CoordinatorLayout内。 在RelativeLayout里添加CoordinatorLayout如下： <android.support.design.widget.CoordinatorLayout android:layout_width=match_parent android:layout_he
Android---简易Snackbar
qq_44950283的博客
01-09 2430
Snackbar 的简单使用，以及其自身特性。同时简介了 Snackbar 与 Toast 的差异。简易实现了一个 Demo。能够帮助新手快手上手。
MaterialDesign之Snackbar学习笔记
snow_Lu的博客
05-12 3617
近期实在太忙了，看到好的文章先转载，后续自己慢慢消化吧！  转载 http://www.jianshu.com/p/cd1e80e64311#rd 没时间解释了，快使用Snackbar!——Android Snackbar花式使用指南 字数2405 阅读1628 评论4 喜欢54 本文是在《Design Support Library第三部分：Snackba
Android Snackbar
zenmela2011的专栏
11-02 573
②查看是否是NextSnackbar，如果是，更新数据，如果不是创建新的NextSnackbar。Snackbar的show()方法会调用SnackbarManager的show(int, Callback)方法，而mManagerCallback会回调Snackbar的showView()和hideView(int)方法。Snackbar snackbar = Snackbar.make(view, "这是一个snackbar", Snackbar.LENGTH_SHORT);
android studio gradle 两种更新方法更新
最新发布
2401_84538278的博客
04-28 662
都说三年是程序员的一个坎，能否晋升或者提高自己的核心竞争力，这几年就十分关键。技术发展的这么快，从哪些方面开始学习，才能达到高级工程师水平，最后进阶到Android架构师/技术专家？我总结了这 5大块；我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。
“玩弄一下”Android Jetpack Compose 中的 Snackbar
Android 开发架构
01-11 963
开始写Compose的时候，真的有点不习惯。思考方式和以前完全不同，有点类似ReactNative。 写习惯了之后，还真有点欲罢不能，行云流水~ Snackbar感觉就是Toast Plus版，可以自定义视图，还可以进行交互，可以用在很多地方实现意想不到的效果。
Android-Snackbar工具类
08-13
 Snackbar在项目中的使用场景越来越多,可全面的替代Toast,比Toast有更好的体验.该工具类可以方便的对Snackbar的样式,显示时间,位置等属性进行设置,方法比较丰富,调用简单,应该可以满足Snackbar绝大部分的使用场景!
Android使用提示窗Snackbar的代码例子
02-09
Android使用提示窗Snackbar的代码例子。主要包括两个方面：自定义Toast提示窗，以及新版的Snackbar弹窗用法。
Android重要控件SnackBar使用方法详解
09-02
主要为大家详细介绍了Android重要控件SnackBar使用方法，以及使用SnackBar的心得，感兴趣的小伙伴们可以参考一下
snackbar动画效果
11-09
类似于浏览器下面底部上啦隐藏下拉显示，在网上没有这样的资源我这很值得噢也可以找我发私信噢
顶部弹出Snackbars
10-12
自定义顶部弹出的Snackbars，在Snackbars上可以添加图标，以及动作。
Snackbar的使用和顶部Snackbar实现
08-17
顶部显示Snackbar，文字可以设置居中
android snackbar用法
09-18
今天我们就来温故一下SnackBar控件，它是一种类似Android Toast（显示提示信息） 与 对话框的控件，经常用于给用户提示信息，比如“您还没有登录，请点击登录”. SnackBar是介于Toast与对话框之间的产物，为什么这么...
Android中Snackbar的使用方法及小技巧
08-27
Android中Snackbar的使用方法及小技巧 Snackbar是Android中的一种提示信息控件，类似于Toast，但Snackbar具有更多的交互性和自定义性。下面是关于Android中Snackbar的使用方法及小技巧。 Snackbar的使用方法 要...
Android studio使用Snackbar点击按钮带图标方式显示消息提示
04-03
要在Android Studio中使用Snackbar点击按钮带图标方式显示消息提示，需要遵循以下步骤： 1.在app/build.gradle文件中添加以下依赖项： ``` implementation 'com.android.support:design:28.0.0' ``` 这将添加支持Snackbar的Material Design库。 2.在布局文件中添加一个Button和一个Snackbar容器View： ``` <RelativeLayout android:id="@+id/main_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Snackbar"/> <LinearLayout android:id="@+id/snackbar_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"/> </RelativeLayout> ``` 3.在Activity中获取Button和Snackbar容器View的引用： ``` Button myButton = findViewById(R.id.my_button); View snackbarContainer = findViewById(R.id.snackbar_container); ``` 4.在Button的onClick事件中，创建Snackbar实例并设置消息内容和图标： ``` myButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar snackbar = Snackbar.make(snackbarContainer, "This is a Snackbar message", Snackbar.LENGTH_LONG); //设置Snackbar中的图标 Drawable icon = getResources().getDrawable(R.drawable.ic_info_outline); icon.setBounds(0, 0, icon.getIntrinsicWidth(), icon.getIntrinsicHeight()); TextView textView = snackbar.getView().findViewById(android.support.design.R.id.snackbar_text); textView.setCompoundDrawables(icon, null, null, null); textView.setCompoundDrawablePadding(getResources().getDimensionPixelOffset(R.dimen.snackbar_icon_padding)); snackbar.show(); } }); ``` 这将创建一个Snackbar实例，将其附加到Snackbar容器View中，并在Snackbar消息中添加一个带有指定图标的TextView。 现在，当用户点击按钮时，Snackbar将显示在屏幕底部，并显示指定的消息和图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值