Android UI进阶之弹窗的使用（2）--实现通讯录的弹窗效果


相信大家都体验过Android通讯录中的弹窗效果。

相关阅读：Android UI进阶之弹窗的使用

如图所示：


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. }  
  • 1
  • 2
  • 3
  • 下一页

相关内容