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

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

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

首先创建布局文件：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns: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中配置：

[java] view plain copy

publicclassQuickcontactActivityextendsActivity{
/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
QuickContactBadgesmallBadge=(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的用法可以参考我之前的博客）。另一种是弹窗中间的布局的动画。

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

首先实现弹窗的布局：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns: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"/>
<ImageView
android:id="@+id/arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-1dip"
android:layout_below="@id/footer"
android:src="@drawable/quickcontact_arrow_down"/>
</RelativeLayout>

窗体内部使用一个HorizontalScrollView可以实现一个滑动效果。我们可以动态的在这个布局中添加按钮，我们称作Actionitem。

　　写一个ActionItem类，使得我们可以用一个ArrayList做容器，动态的添加这些actionitem。这些都是服务于第二个难点。

[java] view plain copy

packagecom.notice.quickaction;
importandroid.graphics.drawable.Drawable;
importandroid.view.View.OnClickListener;
/**
*Actionitem,每个item里面都有一个ImageView和一个TextView
*/
publicclassActionItem{
privateDrawableicon;
privateStringtitle;
privateOnClickListenerlistener;
/**
*构造器
*/
publicActionItem(){
}
/**
*带Drawable参数的构造器
*/
publicActionItem(Drawableicon){
this.icon=icon;
}
/**
*设置标题
*/
publicvoidsetTitle(Stringtitle){
this.title=title;
}
/**
*获得标题
*
*@returnactiontitle
*/
publicStringgetTitle(){
returnthis.title;
}
/**
*设置图标
*/
publicvoidsetIcon(Drawableicon){
this.icon=icon;
}
/**
*获得图标
*/
publicDrawablegetIcon(){
returnthis.icon;
}
/**
*绑定监听器
*/
publicvoidsetOnClickListener(OnClickListenerlistener){
this.listener=listener;
}
/**
*获得监听器
*/
publicOnClickListenergetListener(){
returnthis.listener;
}
}

接下来就是这个弹窗的实现了，我们继承PopupWindow类。在这个类中我们需要实现通过位置设置动画及弹出位置，并且给出一个方法供实现类调用，来动态添加item和设置动画效果。

代码如下：

[java] view plain copy

/**
*继承弹窗，构造我们需要的弹窗
*/
publicclassQuickActionsextendsPopupWindow{
privatefinalViewroot;
privatefinalImageViewmArrowUp;
privatefinalImageViewmArrowDown;
privatefinalAnimationmTrackAnim;
privatefinalLayoutInflaterinflater;
privatefinalContextcontext;
protectedfinalViewanchor;
protectedfinalPopupWindowwindow;
privateDrawablebackground=null;
protectedfinalWindowManagerwindowManager;
protectedstaticfinalintANIM_GROW_FROM_LEFT=1;
protectedstaticfinalintANIM_GROW_FROM_RIGHT=2;
protectedstaticfinalintANIM_GROW_FROM_CENTER=3;
protectedstaticfinalintANIM_AUTO=4;
privateintanimStyle;
privatebooleananimateTrack;
privateViewGroupmTrack;
privateArrayList<ActionItem>actionList;
/**
*构造器，在这里初始化一些内容
*
*@paramanchor像我之前博客所说的理解成一个基准弹窗以此为基准弹出
*/
publicQuickActions(Viewanchor){
super(anchor);
this.anchor=anchor;
this.window=newPopupWindow(anchor.getContext());
//在popwindow外点击即关闭该window
window.setTouchInterceptor(newOnTouchListener(){
@Override
publicbooleanonTouch(Viewv,MotionEventevent){
if(event.getAction()==MotionEvent.ACTION_OUTSIDE){
QuickActions.this.window.dismiss();
returntrue;
}
returnfalse;
}
});
//得到一个windowManager对象，用来得到窗口的一些属性
windowManager=(WindowManager)anchor.getContext().getSystemService(Context.WINDOW_SERVICE);
actionList=newArrayList<ActionItem>();
context=anchor.getContext();
inflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//装载布局，root即为弹出窗口的布局
root=(ViewGroup)inflater.inflate(R.layout.quickaction,null);
//得到上下两个箭头
mArrowDown=(ImageView)root.findViewById(R.id.arrow_down);
mArrowUp=(ImageView)root.findViewById(R.id.arrow_up);
setContentView(root);
mTrackAnim=AnimationUtils.loadAnimation(anchor.getContext(),R.anim.rail);
//设置动画的加速效果
mTrackAnim.setInterpolator(newInterpolator(){
publicfloatgetInterpolation(floatt){
finalfloatinner=(t*1.55f)-1.1f;
return1.2f-inner*inner;
}
});
//这个是弹出窗口内的水平布局
mTrack=(ViewGroup)root.findViewById(R.id.tracks);
animStyle=ANIM_AUTO;//设置动画风格
animateTrack=true;
}
/**
*设置一个flag来标识动画显示
*/
publicvoidanimateTrack(booleananimateTrack){
this.animateTrack=animateTrack;
}
/**
*设置动画风格
*/
publicvoidsetAnimStyle(intanimStyle){
this.animStyle=animStyle;
}
/**
*增加一个action
*/
publicvoidaddActionItem(ActionItemaction){
actionList.add(action);
}
/**
*弹出弹窗
*/
publicvoidshow(){
//预处理，设置window
preShow();
int[]location=newint[2];
//得到anchor的位置
anchor.getLocationOnScreen(location);
//以anchor的位置构造一个矩形
RectanchorRect=newRect(location[0],location[1],location[0]+anchor.getWidth(),location[1]
+anchor.getHeight());
root.setLayoutParams(newLayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
root.measure(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
introotWidth=root.getMeasuredWidth();
introotHeight=root.getMeasuredHeight();
//得到屏幕的宽
intscreenWidth=windowManager.getDefaultDisplay().getWidth();
//设置弹窗弹出的位置的x/y
intxPos=(screenWidth-rootWidth)/2;
intyPos=anchorRect.top-rootHeight;
booleanonTop=true;
//在底部弹出
if(rootHeight>anchorRect.top){
yPos=anchorRect.bottom;
onTop=false;
}
//根据弹出位置，设置不同方向箭头图片
showArrow(((onTop)?R.id.arrow_down:R.id.arrow_up),anchorRect.centerX());
//设置弹出动画风格
setAnimationStyle(screenWidth,anchorRect.centerX(),onTop);
//创建actionlist
createActionList();
//在指定位置弹出弹窗
window.showAtLocation(this.anchor,Gravity.NO_GRAVITY,xPos,yPos);
//设置弹窗内部的水平布局的动画
if(animateTrack)mTrack.startAnimation(mTrackAnim);
}
/**
*预处理窗口
*/
protectedvoidpreShow(){
if(root==null){
thrownewIllegalStateException("需要为弹窗设置布局");
}
//背景是唯一能确定popupwindow宽高的元素，这里使用root的背景，但是需要给popupwindow设置一个空的BitmapDrawable
if(background==null){
window.setBackgroundDrawable(newBitmapDrawable());
}else{
window.setBackgroundDrawable(background);
}
window.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
window.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
window.setTouchable(true);
window.setFocusable(true);
window.setOutsideTouchable(true);
//指定布局
window.setContentView(root);
}
/**
*设置动画风格
*
*@paramscreenWidth屏幕宽底
*@paramrequestedX距离屏幕左边的距离
*@paramonTop一个flag用来标识窗口的显示位置，如果为true则显示在anchor的顶部
*/
privatevoidsetAnimationStyle(intscreenWidth,intrequestedX,booleanonTop){
//取得屏幕左边到箭头中心的位置
intarrowPos=requestedX-mArrowUp.getMeasuredWidth()/2;
//根据animStyle设置相应动画风格
switch(animStyle){
caseANIM_GROW_FROM_LEFT:
window.setAnimationStyle((onTop)?R.style.Animations_PopUpMenu_Left:R.style.Animations_PopDownMenu_Left);
break;
caseANIM_GROW_FROM_RIGHT:
window.setAnimationStyle((onTop)?R.style.Animations_PopUpMenu_Right:R.style.Animations_PopDownMenu_Right);
break;
caseANIM_GROW_FROM_CENTER:
window.setAnimationStyle((onTop)?R.style.Animations_PopUpMenu_Center:R.style.Animations_PopDownMenu_Center);
break;
caseANIM_AUTO:
if(arrowPos<=screenWidth/4){
window.setAnimationStyle((onTop)?R.style.Animations_PopUpMenu_Left:R.style.Animations_PopDownMenu_Left);
}elseif(arrowPos>screenWidth/4&&arrowPos<3*(screenWidth/4)){
window.setAnimationStyle((onTop)?R.style.Animations_PopUpMenu_Center:R.style.Animations_PopDownMenu_Center);
}else{
window.setAnimationStyle((onTop)?R.style.Animations_PopDownMenu_Right:R.style.Animations_PopDownMenu_Right);
}
break;
}
}
/**
*创建actionlist
*/
privatevoidcreateActionList(){
Viewview;
Stringtitle;
Drawableicon;
OnClickListenerlistener;
intindex=1;
for(inti=0;i<actionList.size();i++){
title=actionList.get(i).getTitle();
icon=actionList.get(i).getIcon();
listener=actionList.get(i).getListener();
//得到actionitem
view=getActionItem(title,icon,listener);
view.setFocusable(true);
view.setClickable(true);
//将其加入布局
mTrack.addView(view,index);
index++;
}
}
/**
*获得actionitem
*
*@paramtitleaction的标题
*@paramiconaction的图标
*@paramlisteneraction的点击事件监听器
*@returnaction的item
*/
privateViewgetActionItem(Stringtitle,Drawableicon,OnClickListenerlistener){
//装载action布局
LinearLayoutcontainer=(LinearLayout)inflater.inflate(R.layout.action_item,null);
ImageViewimg=(ImageView)container.findViewById(R.id.icon);
TextViewtext=(TextView)container.findViewById(R.id.title);
if(icon!=null){
img.setImageDrawable(icon);
}else{
img.setVisibility(View.GONE);
}
if(title!=null){
text.setText(title);
}else{
text.setVisibility(View.GONE);
}
if(listener!=null){
container.setOnClickListener(listener);
}
returncontainer;
}
/**
*显示箭头
*
*@param箭头资源id
*@param距离屏幕左边的距离
*/
privatevoidshowArrow(intwhichArrow,intrequestedX){
finalViewshowArrow=(whichArrow==R.id.arrow_up)?mArrowUp:mArrowDown;
finalViewhideArrow=(whichArrow==R.id.arrow_up)?mArrowDown:mArrowUp;
finalintarrowWidth=mArrowUp.getMeasuredWidth();
showArrow.setVisibility(View.VISIBLE);
ViewGroup.MarginLayoutParamsparam=(ViewGroup.MarginLayoutParams)showArrow.getLayoutParams();
//以此设置距离左边的距离
param.leftMargin=requestedX-arrowWidth/2;
hideArrow.setVisibility(View.INVISIBLE);
}
}

　有点长，不过注释都写的很清楚了。show()方法完成窗口的弹出。里面调用其他方法设置了窗口弹出的位置，设置了相应的动画弹出风格和箭头朝向以及位置，创建了action item。大家可以从这个方法里开始看，看每个的实现。

　　最后写个测试类。放一个Button在屏幕顶部，一个在屏幕底部。点击弹出弹窗。

[java] view plain copy

packagecom.notice.quickaction;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.Button;
importandroid.widget.Toast;
/**
*实现activity
*/
publicclassMyQuickextendsActivity{
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//得到一个actionItem对象
finalActionItemchart=newActionItem();
//设置标题，图标，点击事件
chart.setTitle("Chart");
chart.setIcon(getResources().getDrawable(R.drawable.chart));
chart.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
Toast.makeText(MyQuick.this,"Chartselected",Toast.LENGTH_SHORT).show();
}
});
finalActionItemproduction=newActionItem();
production.setTitle("Products");
production.setIcon(getResources().getDrawable(R.drawable.production));
production.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
Toast.makeText(MyQuick.this,"Productsselected",Toast.LENGTH_SHORT).show();
}
});
Buttonbtn1=(Button)this.findViewById(R.id.btn1);
//点击按钮弹出
btn1.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
//初始化一个QuickActions
QuickActionsqa=newQuickActions(v);
//为他添加actionitem
qa.addActionItem(chart);
qa.addActionItem(production);
qa.addActionItem(production);
qa.addActionItem(production);
//设置动画风格
qa.setAnimStyle(QuickActions.ANIM_AUTO);
qa.show();
}
});
finalActionItemdashboard=newActionItem();
dashboard.setIcon(getResources().getDrawable(R.drawable.dashboard));
dashboard.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
Toast.makeText(MyQuick.this,"dashboardselected",Toast.LENGTH_SHORT).show();
}
});
finalActionItemusers=newActionItem();
users.setIcon(getResources().getDrawable(R.drawable.users));
users.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
Toast.makeText(MyQuick.this,"Productsselected",Toast.LENGTH_SHORT).show();
}
});
Buttonbtn2=(Button)this.findViewById(R.id.btn2);
btn2.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
QuickActionsqa=newQuickActions(v);
qa.addActionItem(dashboard);
qa.addActionItem(users);
qa.setAnimStyle(QuickActions.ANIM_GROW_FROM_CENTER);
qa.show();
}
});
}
}

再讲下PopupWindow的风格的实现。其中一个风格代码如下：

[html] view plain copy

<stylename="Animations.PopDownMenu.Left">
<itemname="@android:windowEnterAnimation">@anim/grow_from_topleft_to_bottomright</item>
<itemname="@android:windowExitAnimation">@anim/shrink_from_bottomright_to_topleft</item>
</style>

　写两个item，分别实现弹出和消失动画。因为篇幅有限（好像已经很长了。。。），就不全部贴出来了。动画都是一个scale加一个alpha，对动画不熟悉的朋友可以自己研究下，从底部弹出的动画文件grow_from_bottom.xml：

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<setxmlns: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>

最后来看看实现效果：

更多相关文章

随机推荐