android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果
相信大家都体验过android通讯录中的弹窗效果。如图所示:
android中提供了QuickContactBadge来实现这一效果。这里简单演示下。
首先创建布局文件:
view plain- <?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中配置:
view plain
- 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的用法可以参考我之前的博客)。另一种是弹窗中间的布局的动画。
了解了难点以后,写起来就方便了。
首先实现弹窗的布局:
view plain- <?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。这些都是服务于第二个难点。
view plain- 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和设置动画效果。
代码如下:
view plain- /**
- *继承弹窗,构造我们需要的弹窗
- */
- 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
更多相关文章
- android:fitsSystemWindows
- TextView——文本省略显示
- Android(安卓)界面的基本属性
- 有关布局问题:TextView、EditText……(二)
- android 状态栏沉浸
- Android(安卓)OpenGL 开发
- 设置activity为Dialog类型的设置
- Android(安卓)ImageView图片显示点击背景切换
- 【Android开发基础】应用界面主题Theme使用方法