首页 / 操作系统 / Linux / Android UI进阶之弹窗的使用（2）--实现通讯录的弹窗效果

相信大家都体验过Android通讯录中的弹窗效果。相关阅读：Android UI进阶之弹窗的使用 http://www.linuxidc.com/Linux/2012-01/52254.htm如图所示：

android中提供了QuickContactBadge来实现这一效果。这里简单演示下。首先创建布局文件：[html]

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中配置：[java]

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（"notice520@gmail.com", 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的用法可以参考我之前的博客）。另一种是弹窗中间的布局的动画。 了解了难点以后，写起来就方便了。首先实现弹窗的布局：[html]

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。这些都是服务于第二个难点。[java]

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. }