读书人

android UI进阶之弹窗的运用(2)-实现

发布时间: 2012-07-26 12:01:08 作者: rapoo

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

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

首先创建布局文件:

?><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中配置:

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

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

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

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

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

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

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

首先实现弹窗的布局:

?><set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:fromXScale="0.3" android:toXScale="1.0" android:fromYScale="0.3" android:toYScale="1.0" android:pivotX="50%" android:pivotY="100%" android:duration="@android:integer/config_shortAnimTime" /> <alpha android:interpolator="@android:anim/decelerate_interpolator" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="@android:integer/config_shortAnimTime" /></set>

  

  最后来看看实现效果:

android UI进阶之弹窗的运用(2)-实现通讯录的弹窗效果? ? ???android UI进阶之弹窗的运用(2)-实现通讯录的弹窗效果

? 好了 希望大家喜欢 ? 有问题可以留言交流~

?


转载http://www.cnblogs.com/noTice520??

读书人网 >Android

热点推荐