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

相信大家都体验过android通讯录中的弹窗效果。如图所示：

android中提供了QuickContactBadge来实现这一效果。这里简单演示下。

首先创建布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <QuickContactBadge android:id="@+id/badge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon"> </QuickContactBadge> </LinearLayout>
很简单，在布局中添加一个QuickContactBadge组件即可。

在Activity中配置：

public class QuickcontactActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); QuickContactBadge smallBadge = (QuickContactBadge) findViewById(R.id.badge); // 从email关联一个contact smallBadge.assignContactFromEmail("notice520@gmail.com", true); // 设置窗口模式 smallBadge.setMode(ContactsContract.QuickContact.MODE_SMALL); }}
注意加入读通讯录的权限

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

实现效果如图：

但是这个组件局限性很大，弹出窗口中只能是一些contact操作。但是仔细一想，这样的操作并不难，不就是一个带动画的弹窗么。下面就来我们自己实现一个。

实现一个带动画的弹窗并不难，在我的之前一篇博客中有讲过弹窗PopupWindow的使用，不清楚弹窗的朋友可以去看下。在这里实现的难点主要有这些：

1.判断基准view在屏幕中的位置，从而确定弹窗弹出的位置以及动画。这是非常重要的一点，或许基准在屏幕上方，那么就要向下弹出。

2.动态的添加弹窗中的按钮，并实现点击

3.箭头位置的控制。箭头应该保持在基准的下方。

4.动画的匹配。里面有两种动画。一种是PopupWindow弹出动画，我们通过设置弹窗的style来实现（style的用法可以参考我之前的博客）。另一种是弹窗中间的布局的动画。

　　了解了难点以后，写起来就方便了。

首先实现弹窗的布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <FrameLayout android:layout_marginTop="10dip" android:id="@+id/header2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/quickcontact_top_frame"/> <ImageView android:id="@+id/arrow_up" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/quickcontact_arrow_up" /> <HorizontalScrollView android:id="@+id/scroll" android:layout_width="fill_parent" android:layout_height="wrap_content" android:fadingEdgeLength="0dip" android:layout_below="@id/header2" android:background="@drawable/quickcontact_slider_background" android:scrollbars="none"> <LinearLayout android:id="@+id/tracks" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="4dip" android:paddingBottom="4dip" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/quickcontact_slider_grip_left" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/quickcontact_slider_grip_right" /> </LinearLayout> </HorizontalScrollView> <FrameLayout android:id="@+id/footer" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/scroll" android:background="@drawable/quickcontact_bottom_frame" />&n

补充：移动开发 , Android ,