Android UI進階之彈窗的使用（2）--實現通訊錄的彈窗效果

相信大家都體驗過Android通訊錄中的彈窗效果。

相關閱讀：Android UI進階之彈窗的使用 http://www.linuxidc.com/Linux/2012-01/52254.htm

如圖所示：

android中提供了QuickContactBadge來實現這一效果。這裡簡單演示下。

首先創建布局文件：

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. >
7. <QuickContactBadge
8. android:id="@+id/badge"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:src="@drawable/icon">
12. </QuickContactBadge>
13. </LinearLayout>

很簡單，在布局中添加一個QuickContactBadge組件即可。

在Activity中配置：

1. public class QuickcontactActivity extends Activity {
3. /** Called when the activity is first created. */
4. @Override
5. public void onCreate(Bundle savedInstanceState) {
6. super.onCreate(savedInstanceState);
7. setContentView(R.layout.main);
9. QuickContactBadge smallBadge = (QuickContactBadge) findViewById(R.id.badge);
10. // 從email關聯一個contact
11. smallBadge.assignContactFromEmail("[email protected]", true);
12. // 設置窗口模式
13. smallBadge.setMode(ContactsContract.QuickContact.MODE_SMALL);
14. }
15. }

注意加入讀通訊錄的權限

<uses-permission android:name="android.permission.READ_CONTACTS"></uses-permission>　　

實現效果如圖：

但是這個組件局限性很大，彈出窗口中只能是一些contact操作。但是仔細一想，這樣的操作並不難，不就是一個帶動畫的彈窗麼。下面就來我們自己實現一個。

實現一個帶動畫的彈窗並不難，在我的之前一篇博客中有講過彈窗PopupWindow的使用，不清楚彈窗的朋友可以去看下。在這裡實現的難點主要有這些：

1.判斷基准view在屏幕中的位置，從而確定彈窗彈出的位置以及動畫。這是非常重要的一點，或許基准在屏幕上方，那麼就要向下彈出。

2.動態的添加彈窗中的按鈕，並實現點擊

3.箭頭位置的控制。箭頭應該保持在基准的下方。

4.動畫的匹配。裡面有兩種動畫。一種是PopupWindow彈出動畫，我們通過設置彈窗的style來實現（style的用法可以參考我之前的博客）。另一種是彈窗中間的布局的動畫。

　　了解了難點以後，寫起來就方便了。

首先實現彈窗的布局：

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content">
6. <FrameLayout
7. android:layout_marginTop="10dip"
8. android:id="@+id/header2"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:background="@drawable/quickcontact_top_frame"/>
13. <ImageView
14. android:id="@+id/arrow_up"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:src="@drawable/quickcontact_arrow_up" />
19. <HorizontalScrollView
20. android:id="@+id/scroll"
21. android:layout_width="fill_parent"
22. android:layout_height="wrap_content"
23. android:fadingEdgeLength="0dip"
24. android:layout_below="@id/header2"
25. android:background="@drawable/quickcontact_slider_background"
26. android:scrollbars="none">
28. <LinearLayout
29. android:id="@+id/tracks"
30. android:layout_width="wrap_content"
31. android:layout_height="wrap_content"
32. android:paddingTop="4dip"
33. android:paddingBottom="4dip"
34. android:orientation="horizontal">
36. <ImageView
37. android:layout_width="wrap_content"
38. android:layout_height="wrap_content"
39. android:src="@drawable/quickcontact_slider_grip_left" />
41. <ImageView
42. android:layout_width="wrap_content"
43. android:layout_height="wrap_content"
44. android:src="@drawable/quickcontact_slider_grip_right" />
46. </LinearLayout>
48. </HorizontalScrollView>
50. <FrameLayout
51. android:id="@+id/footer"
52. android:layout_width="fill_parent"
53. android:layout_height="wrap_content"
54. android:layout_below="@id/scroll"
55. android:background="@drawable/quickcontact_bottom_frame" />
57. <ImageView
58. android:id="@+id/arrow_down"
59. android:layout_width="wrap_content"
60. android:layout_height="wrap_content"
61. android:layout_marginTop="-1dip"
62. android:layout_below="@id/footer"
63. android:src="@drawable/quickcontact_arrow_down" />
65. </RelativeLayout>

窗體內部使用一個HorizontalScrollView可以實現一個滑動效果。我們可以動態的在這個布局中添加按鈕，我們稱作Actionitem。

　　寫一個ActionItem類，使得我們可以用一個ArrayList做容器，動態的添加這些actionitem。這些都是服務於第二個難點。

1. package com.notice.quickaction;
3. import android.graphics.drawable.Drawable;
4. import android.view.View.OnClickListener;
6. /**
7. * Action item, 每個item裡面都有一個ImageView和一個TextView
8. */
9. public class ActionItem {
11. private Drawable icon;
12. private String title;
13. private OnClickListener listener;
15. /**
16. * 構造器
17. */
18. public ActionItem() {
19. }
21. /**
22. * 帶Drawable參數的構造器
23. */
24. public ActionItem(Drawable icon) {
25. this.icon = icon;
26. }
28. /**
29. * 設置標題
30. */
31. public void setTitle(String title) {
32. this.title = title;
33. }
35. /**
36. * 獲得標題
37. *
38. * @return action title
39. */
40. public String getTitle() {
41. return this.title;
42. }
44. /**
45. * 設置圖標
46. */
47. public void setIcon(Drawable icon) {
48. this.icon = icon;
49. }
51. /**
52. * 獲得圖標
53. */
54. public Drawable getIcon() {
55. return this.icon;
56. }
58. /**
59. * 綁定監聽器
60. */
61. public void setOnClickListener(OnClickListener listener) {
62. this.listener = listener;
63. }
65. /**
66. * 獲得監聽器
67. */
68. public OnClickListener getListener() {
69. return this.listener;
70. }
71. }