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 {  
2.   
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);  
8.   
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">  
5.           
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"/>  
12.           
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" />  
18.          
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">  
27.   
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">  
35.           
36.             <ImageView  
37.                 android:layout_width="wrap_content"  
38.                 android:layout_height="wrap_content"  
39.                 android:src="@drawable/quickcontact_slider_grip_left" />  
40.   
41.             <ImageView  
42.                 android:layout_width="wrap_content"  
43.                 android:layout_height="wrap_content"  
44.                 android:src="@drawable/quickcontact_slider_grip_right" />  
45.                   
46.         </LinearLayout>  
47.               
48.     </HorizontalScrollView>  
49.   
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" />  
56.   
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" />  
64.   
65. </RelativeLayout>  

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

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

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