android本身已經提供了progressdialog進度等待框,使用該dialog,我們可以為用戶提供更好的體驗:在網絡請求時,彈出此框等待網絡數據。 不過,既然是為了提高用戶體驗,我們肯定希望該dialog能更加炫酷,讓用戶看著更舒服。那如何做呢,當然是我們自己定義一個progressdialog了。
可以先看下,接下來將實現的dialog效果圖:
步驟1:要定義布局文件,該布局文件即是dialog的布局了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?xml version= "1.0" encoding= "utf-8" ?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:id= "@+id/dialog_view" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:background= "@drawable/dialog_load_bg" android:gravity= "center" android:minheight= "100dp" android:minwidth= "190dp" android:orientation= "vertical" android:padding= "10dp" > <imageview android:id= "@+id/img" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:src= "@drawable/publicloading" /> <textview android:id= "@+id/tiptextview" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_marginleft= "10dp" android:textcolor= "#acacac" android:textsize= "15sp" /> </linearlayout> |
在布局文件中,我們只定義了兩個組件,一個imageview,用于顯示旋轉圖,一個textview,用于顯示消息文本
步驟2:定義動畫,使得彈出框上的圖片可以不停的旋轉。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml version= "1.0" encoding= "utf-8" ?> <set android:shareinterpolator= "false" xmlns:android= "http://schemas.android.com/apk/res/android" > <rotate android:interpolator= "@android:anim/linear_interpolator" android:pivotx= "50%" android:pivoty= "50%" android:fromdegrees= "0" android:todegrees= "+360" android:duration= "1500" android:startoffset= "-1" android:repeatmode= "restart" android:repeatcount= "-1" /> </set> |
步驟3:實現自定義的dialog邏輯
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
/** * 公用的彈出框 * * @author lining */ public class loadingdialog { /** * 得到自定義的progressdialog * * @param context * @param msg * @return */ public static dialog createloadingdialog(context context, string msg) { // 首先得到整個view view view = layoutinflater.from(context).inflate( r.layout.loading_dialog_view, null ); // 獲取整個布局 linearlayout layout = (linearlayout) view .findviewbyid(r.id.dialog_view); // 頁面中的img imageview img = (imageview) view.findviewbyid(r.id.img); // 頁面中顯示文本 textview tiptext = (textview) view.findviewbyid(r.id.tiptextview); // 加載動畫,動畫用戶使img圖片不停的旋轉 animation animation = animationutils.loadanimation(context, r.anim.dialog_load_animation); // 顯示動畫 img.startanimation(animation); // 顯示文本 tiptext.settext(msg); // 創建自定義樣式的dialog dialog loadingdialog = new dialog(context, r.style.loading_dialog); // 設置返回鍵無效 loadingdialog.setcancelable( false ); loadingdialog.setcontentview(layout, new linearlayout.layoutparams( linearlayout.layoutparams.match_parent, linearlayout.layoutparams.match_parent)); return loadingdialog; } } |
代碼注釋已經很詳細了,有一處需要注意的,就是在創建dialog實例時,需要傳遞一個theme,該theme是dialog的風格:
1
2
3
4
5
6
7
8
|
<!-- 自定義loading dialog --> ;style name= "loading_dialog" parent= "android:style/theme.dialog" > <item name= "android:windowframe" > @null </item> <item name= "android:windownotitle" > true </item> <item name= "android:windowbackground" > @drawable /dialog_load_bg</item> <item name= "android:windowisfloating" > true </item> <item name= "android:windowcontentoverlay" > @null </item> ;/style> |
步驟4:使用自定義的progressdialog
接下來,我們可以直接使用已經定義好的dialog了,很簡單,只需要將dialog顯示和關閉即可,建議將講方法封裝起來,放在
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
baseactivity(基類)中,方便隨時調用。 /** * 顯示dialog */ private void showdialog() { if (dialog == null ) { dialog = loadingdialog.createloadingdialog( this , "正在加載中..." ); dialog.show(); } } /** * 關閉dialog */ private void closedialog() { if (dialog != null ) { dialog.dismiss(); dialog = null ; } } |
通過上面步驟,我們即完成了自定義的progressdialog,當然,具體在項目中需要什么樣的效果,可以調整。