提升用戶體驗,你不得不知道的事兒——三種提醒框的微技巧


大家都知道無論是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或許是你最好的選擇。

 

細節決定成敗,希望每一位小伙伴都千里之行,始於足下,用細節規范自己,用細節追求成功!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM