提升用户体验,你不得不知道的事儿——三种提醒框的微技巧

大家都知道无论是android开发还是其他的开发,用户的体验都是很重要的事儿,下面就android开发中的三种提醒方式,Toast,SnackBar,Dialog做一些细节上的处理,或许能让你的产品更有用户亲和力。

 

1)Toast

Toast是一个轻量级的提醒框,相信各位小伙伴,肯定在平时开发中用到地方堪称最多,使用方式非常简单,简单的一句代码搞定。

1 Toast.makeText(this,"This is a toast...",Toast.LENGTH_SHORT).show();

使用Toast类的makeText方法,传入三个参数:context,显示的字符串,显示时间,最后再调用show方法。

而简单的这样写,一定会有一个小毛病,当用户多次点击触发这个Toast事件的时候,你一定会恼怒到,这个东西需要很久才可以取消掉,真的是烦,大概就是这样。

可见这样是及其的影响用户体验的,要是可以点击N次,还是只是覆盖显示最后一次的提示就好了,恩,其实这个还是很简单,再加上,我们一个app中肯定有一万个地方会用到Toast,所以不妨写一个专门处理UI的工具类,UIUtil。

 1 package com.example.nanchen.dialogtoastsnackbardemo;
 2 
 3 import android.app.ProgressDialog;
 4 import android.content.Context;
 5 import android.widget.Toast;
 6 
 7 /**
 8  * @author nanchen
 9  * @date 16-8-16 下午2:15
10  */
11 public class UIUtil {
12     private static Toast toast;
13     private static ProgressDialog pd;
14 
15     /**
16      * 解决无限Toast的封装方法
17      * @param context   上下文
18      * @param desc      显示内容
19      */
20     public static void showToast(Context context, String desc) {
21         if (toast == null){
22             toast = Toast.makeText(context, desc, Toast.LENGTH_SHORT);
23         }else {
24             toast.setText(desc);
25         }
26         toast.show();
27     }
28 
29     public static void showDialog(Context context){
30         pd = new ProgressDialog(context);
31         pd.setMessage("正在玩命加载中...");
32         pd.show();
33     }
34 
35     public static void cancelDialog(){
36         if (pd!=null){
37             pd.dismiss();
38         }
39     }
40 }

楼主在工具类里面简单写了三个方法,其中两个是显示进度条对话框的,这里没使用它,我们重点看看showToast方法,两个参数,一个context,一个显示的字符串,默认这里的显示时间是Toast.LENGTH_SHORT,我们在上面下功夫,当Toast不为空的时候,我们直接修改需要显示的字符串,当为空的时候才调用toast的makeText方法,这样就可以避免重复的弹出Toast了。

看看显示效果:

可见,这样不仅解决了重复弹框的问题,而且可以让我们体会到java封装的好处,似乎还是挺不错的。

综上,可见Toast的作用是告诉用户到底做了什么操作,可能很多用户会选择忽视它,但是比如你删除数据,就给一个提示说你删除了xxx,而不给用户选择是否删除的机会,这时候恐怕用户就要暴走了,为了解决这个问题,SnackBar应运而生。

 

2)SnackBar

SnackBar是google公司推出的design包下的一个介于Dialog和Toast之间的轻量级提示框。它的使用方法类似于Toast,但是可以通过setAction,添加动作事件,而且这个事件的数目是你可以随意的。另外对于design包,楼主不得不说这个包下的东西真的很强大,还没了解的童鞋建议去了解一下,无论是coordinatorLayout赋予各种子控件神奇的效果,还是各种简单的侧滑,又或是自动提示的EditText,可以说,真正可以简化很多代码,楼主前面的博客中也有完整的design包的介绍,大家也可以去看看:使用Design包实现QQ动画侧滑效果和滑动菜单导航,这只是一个仿QQ侧滑的,前面还有一些design包下其他控件的介绍,楼主这里就不一一给链接了,有兴趣的小伙伴请进到我的个人主页自行参阅:http://www.cnblogs.com/liushilin/tag/Design/

还是先带来SnackBar的简单使用:

1 Snackbar.make(view,"there will delete something...",Snackbar.LENGTH_SHORT)
2                         .setAction("撤销", new OnClickListener() {
3                             @Override
4                             public void onClick(View view) {
5                                 //撤销删除数据的相关操作
6                             }
7                         })
8                         .show();

这个小东西真的挺好用,体现在,它既不会像Dialog一样阻挡用户当前的操作,又不会像Toast一样过于轻量,所以这个东西在用户要删除某个数据的时候,添加一个撤销的按钮,那就真的太棒了。当然,使用它必须添加design包支持。

1 compile 'com.android.support:design:24.1.1'

看看简单的运行效果图:

可以看到,snackBar默认从底部弹出,并且点击多次不会像Toast一样无限弹窗,都说数据无价,比如用户想删除一个东西的时候,你给他一个可以撤销的东西,对用户来说肯定是更加青睐的。

 

3)Dialog

再来看看Dialog,对话框这个东西,可以说历史相当古老了吧,在我所了解的可视化编程中,貌似还没有说没有对话框这玩意儿的。

相信大家肯定用的非常多,带来一个常见用法。

 1 AlertDialog.Builder builder = new AlertDialog.Builder(this);
 2                 builder.setTitle("title")
 3                         .setMessage("message content")
 4                         .setPositiveButton("确定", new DialogInterface.OnClickListener() {
 5                             @Override
 6                             public void onClick(DialogInterface dialogInterface, int i) {
 7                                 //这里显示确定需要做的事情
 8                             }
 9                         })
10                         .setNegativeButton("取消", new DialogInterface.OnClickListener() {
11                             @Override
12                             public void onClick(DialogInterface dialogInterface, int i) {
13                                 //这里显示取消需要做的事情
14                             }
15                         })
16                         .show();

看看运行效果:

嘿,貌似还不错,这风格还是挺棒的,但是这个和android版本有关系,要是你用的是之前较低的版本,比如2.3版本的,那你的美感可能就有点不堪入目了,不过还好,没关系,官方为我们出谋划策,你只需要使用v7支持包下的AlertDialog就好了。

 

额,这只是一个简单的alertDialog,你可能会想,我们在实际开发中,可能会更多的应用到的是自定义的dialog,好吧,随便写一个。

 1 final AlertDialog dialog = new AlertDialog.Builder(this).create();
 2                 dialog.show();
 3                 Window window = dialog.getWindow();
 4                 window.setContentView(R.layout.dialog_layout);
 5                 window.setLayout(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
 6                 window.setGravity(Gravity.BOTTOM);
 7                 Button button = (Button) window.findViewById(R.id.btn_test);
 8                 button.setOnClickListener(new OnClickListener() {
 9                     @Override
10                     public void onClick(View view) {
11                         dialog.dismiss();
12                     }
13                 });
14                 break;

看看运行效果:

 咦,好像哪里不对?额,我明明设置的是Match_Parent,和显示在底部,为什么下面三边都有边缘,啊,真丑,让人很受不了。怎么才可以让它满屏呢?

有的小伙伴可能会说,用popWindow吧,完美解决。这是一个办法,不过我们就要用alertDialog呢,其实也不是没有办法,

只需要自己定义一个Dialog的样式:

1  <style name="dialog_style" parent="Theme.AppCompat.DayNight.DialogWhenLarge">
2         <item name="android:windowIsFloating">true</item>
3         <item name="android:windowNoTitle">true</item>
4         <item name="android:windowBackground">@color/dialog_bg</item>
5     </style>

这里可以设置你所有项设置的东西。

然后再回到代码修改一丢丢。

 1 final AlertDialog dialog = new AlertDialog.Builder(this,R.style.dialog_style).create();
 2                 dialog.show();
 3                 Window window = dialog.getWindow();
 4                 window.setContentView(R.layout.dialog_layout);
 5                 window.setLayout(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
 6                 window.setGravity(Gravity.BOTTOM);
 7                 Button button = (Button) window.findViewById(R.id.btn_test);
 8                 button.setOnClickListener(new OnClickListener() {
 9                     @Override
10                     public void onClick(View view) {
11                         dialog.dismiss();
12                     }
13                 });

看看运行效果:

小伙伴又想吐槽了,你这全屏和刚刚的有一个非常相似的共同点,也是唯一的有点,恩,丑的有模有样!!!

别介呀,小伙伴,这只是楼主布局稍微丑了点,实际上其实你看楼主前几篇文章,可以看楼主就是因为不全屏才很丑的。

 

———————————————————————我是性感的分割线————————————————————————————

 

恩,说了这么多,对于到底什么场景区分使用这三个提醒框,简单总结一下:

1)Toast:基于Toast的属性,只是为了告诉用户做了什么,而这些事情不那么重要,这时候你可以使用Toast,比如登陆时候弹出密码错误,注册时用户已注册等。

2)Dialog:当提示的信息至关重要,并且需要用户做出相应操作才能继续的时候,或者想提示一个自定义的对话框,通常会使用Dialog。

3)SnackBar:这个东西介于两者之间,若是上面两个都不太适合的场景下,SnackBar或许是你最好的选择。

 

细节决定成败,希望每一位小伙伴都千里之行,始于足下,用细节规范自己,用细节追求成功!

转载于:https://www.cnblogs.com/liushilin/p/5776642.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-table列宽设置百分比无效;el-table使用min-width设置百分比;el-table百分比设置无效;

废话不多说&#xff0c;直接给每个el-table-column&#xff0c;设置 width"auto" min-width"25%"即可。 总的百分比还是要等于100%哈。 点赞收藏吧 感谢 代码可以直接复制使用&#xff1a; <template><div style"width:1300px;">&…

VIM使用系统剪切板

在 Linux 终端模式下使用 vim 编辑器时发现经常需要在vim打开的文本文档进行复制粘贴&#xff0c;那么下面就跟着我的思路一步步往下走吧。 一、首先确认当前 vim 配置是不是支持系统剪切板&#xff0c;可以在终端模式下输入命令&#xff1a; vim --version | grep clipboard…

python操作Excel读写--使用xlrd

From: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 一、安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装&#xff0c;前提是已经安装了python 环境。 也可以在命令行执行&#xff1a;easy_install xlrd (注意权限) 二、使用介绍…

el-table自动充满,且无滚动条;el-table某列的列宽自适应,其他列按比例分配。

情景一&#xff1a;例如首列按照内容自适应展开&#xff0c;其余列有各自的比例。这样设置&#xff0c;就不会出现滚动条。 注意点&#xff1a; 给需要自适应展开的列加 :width"flexColumnWidth"计算方法 就可以自适应展开需要给余下所有的列都设置 width“auto” mi…

DataGridView控件中显示图片及其注意事项 【z】

windows Forms编程里面有一个DataGridView控件&#xff0c;它不光是可以显示数据&#xff0c;可以显示按钮&#xff0c;复选框&#xff0c;甚至还可以显示图片。这些图片可以来自于数据库&#xff08;用二进制的方式存储的&#xff09;&#xff0c;也可以来自文件系统。下面是一…

在winform上内嵌入其它的程序

这段代码很有意义,用于把一个程序的界面嵌入到我们自己程序的某个指定窗体上. 比如在某个项目里,我需要把基恩士的激光扫描轮廓显示给客户看,但是激光的DLL中并没有这种功能提供. 于是我想先启动激光的官方程序用以显示轮廓, 然后再把这种显示界面嵌入到我自己程序的界面上指定…

SPI总线时序

SPI&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在芯片的管脚上只占用四根线&#xff0c;节约了芯片的管脚&#xff0c;同时为PCB的布局上节省空间&#xff0c;提供方便&#xff0c;正是出于这种简单易用的特性&#xff0c;现在越来…

js计算浮点数出现小数;解决js计算小数问题;js数组相加出现小数;

原博1 原博2 方案1和方案2都是有效的 注意参数一定要是数字 而不能是字符串 否则会计算错误 情景&#xff1a; 在计算浮点数时候&#xff0c;出现多余小数。 例如&#xff1a; 1.11 1 2.1100000000000003 为什么计算小数会出现误差&#xff1f; 浮点数值的最高进度是17位…

VMware安装系统时没有弹出分区设置

在安装虚拟机系统的时候&#xff0c;有时候会遇到在安装一些镜像时没有弹出分区设置的画面&#xff0c;比如&#xff0c;我在使用 VMware 安装 CentOS 的时候&#xff0c;在选择完镜像&#xff0c;设置好启动安装的时候系统自动为我划分了 3 个分区&#xff1a;/boot、/、swap分…

如何在postgresql中模拟oracle的dual表,来测试数据库最基本的连接功能?

还好&#xff0c;网上弄到的&#xff0c;&#xff0c;没有dual的数据库&#xff0c;可以试图用select函数不带from数据表的方式来实现返回值。 一段测试代码&#xff1a; try:conn psycopg2.connect(databasedb.service_name, userdb.username, passwordpassword, hostdb.ip, …

vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查

以下代码可以直接复制使用 一、情景&#xff1a; 列表是一个树状表格&#xff0c;可以无限添加下级&#xff0c;以及对列表的某一行进行增删改查&#xff08;目前查没有写&#xff09;。 原博链接 二、本篇是在原博主的代码基础上添加了部分功能。 功能1&#xff1a; 给树状表格…

ISCSI 1-由零开始

iSCSI的概念 iSCSI&#xff0c;即Internet SCSI&#xff0c;是IETF制订的一项标准&#xff0c;用于将SCSI数据块映射为以太网数据包。从根本上说&#xff0c;它是一种基于IP Storage理论的新型存储技术&#xff0c;该技术将存储行业广泛应用的SCSI接口技术与IP网络技术相结合&a…

存储技术与iSCSI

本章主要介绍基于IP SAN的网络存储iSCSI。iSCSI技术以其低廉的构建成本和优秀的存储性能&#xff0c;博得了很多CIO和存储管理员的喜爱&#xff0c;目前陆续进入企业应用领域&#xff0c;推动了企业的存储环境向集中式转变。虽然&#xff0c;目前对于iSCSI应该在什么样的环境中…

lvs和HA的高可用性

Heartbeat实现Lvs高可用和HA高可用效果图如下1、heartbeat的介绍Heartbeat 项目是 Linux-HA 工程的一个组成部分&#xff0c;它实现了一个高可用集群系统。心跳服务和集群通信是高可用集群的两个关键组件&#xff0c;在 Heartbeat 项目里&#xff0c;由 heartbeat 模块实现了这…

输入框限制只能输入数字,正数、负数、0,最多两位小数;数字输入框可以输入负数,并最多保留两位小数;el-number-input去掉四舍五入和自动补齐小数;

场景&#xff1a; –要求1&#xff1a;输入框只能输入数字&#xff0c;可以使正数、负数、0&#xff0c;小数点最多保留两位。 –要求2&#xff1a;不需要自动补齐小数点&#xff0c;也不需要自动四舍五入。 element-ui的数字输入框el-input-number只能满足要求1&#xff0c;所…

【工具】Win 7/8/10 下使用 VC++6.0

Microsoft Visual C&#xff08;也就是 MSVC或者VC&#xff09;&#xff0c;是大部分计算机专业学生接触的第一款编译器。它具有轻量&#xff0c;界面简洁等优点&#xff0c;也是许多计算机考试的指定工具。VC6.0已经推出近20年&#xff0c;仍旧深受许多编程人员的喜爱&#xf…

【maven3学习之一】window7下maven环境搭建

2019独角兽企业重金招聘Python工程师标准>>> 软件准备&#xff1a; jdk-7u10-windows-i586 apache-maven-3.0.4-bin maven介绍&#xff1a; 按照一般的套路老说应该要说明一下maven&#xff0c;觉得maven就是一个项目管理的框架&#xff0c;因为之前的一个项目对mav…

解决去除“请输入有效值。两个最接近的有效值分别为1和2“提示

场景&#xff1a;el-input输入框&#xff0c;hover上去会有"请输入有效值。两个最接近的有效值分别为1和2"提示。 只需要给el-input加上属性 :step“0.01” 即可&#xff0c;注意精确度与你的小数点位数有关。也就是说如果你是三位小数点&#xff0c;那就是:step“0.…

【贪心】Vijos P1615 旅行

题目链接&#xff1a; https://vijos.org/p/1615 题目大意&#xff1a; N条路&#xff0c;路的高度给你&#xff0c;走一条路的耗费体力是从上一条路的高度到当前路高度的绝对值差。 可以改变一条路的高度&#xff0c;耗费的体力等于改变前后的路高度差。求最小耗费体力。 题目…

向 Web 开发人员推荐35款 JavaScript 图形图表库

From: http://www.cnblogs.com/lhb25/p/35-javascript-chart-and-graph-libraries.html 图表是数据图形化的表示&#xff0c;通过形象的图表来展示数据&#xff0c;比如条形图&#xff0c;折线图&#xff0c;饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据&#xff…