网站建设资讯站/培训机构学校

Android-自己定义PopupWindow

2014年5月12日

PopupWindow在应用中应该是随处可见的，非经常常使用到，比方在旧版本号的微信其中就用到下拉的PopupWindow。那是自己定义的。新版微信5.2的ActionBar，有人已经模仿了它，但微信详细是使用了ActionBar还是其它的笔者倒是不太清楚。本篇博客主要介绍怎样自己定义一个PopupWindow来供自己在开发应用时使用。

由于笔者近期在开发一款应用时用到这个知识点，所以自己实现了相似新版微信的效果。

源代码下载：http://download.csdn.net/detail/wwj_748/7337175

效果图例如以下：

首先从布局開始

/14_CustomPopupWindow/res/layout/activity_swipe.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/animation_layout_content"android:layout_width="match_parent"android:layout_height="match_parent"android:clickable="true"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/abc_ab_bottom_solid_dark_holo"android:padding="12dip" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:gravity="center"android:orientation="horizontal" ><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:src="@drawable/ic_launcher" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dip"android:text="任务系统"android:textColor="@color/lightgray"android:textSize="18sp" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:gravity="center"android:orientation="horizontal" ><Buttonandroid:id="@+id/btnSearch"android:layout_width="30dp"android:layout_height="30dp"android:layout_marginRight="20dip"android:background="@drawable/actionbar_search_icon"android:visibility="gone" /><Buttonandroid:id="@+id/btnAdd"android:layout_width="30dp"android:layout_height="30dp"android:layout_marginRight="20dip"android:background="@drawable/actionbar_add_icon" /><Buttonandroid:id="@+id/btnSet"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/actionbar_more_icon" /></LinearLayout></RelativeLayout></LinearLayout>

/14_CustomPopupWindow/res/layout/add_popup_dialog.xml

<?

xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical" > <LinearLayout android:id="@+id/pop_layout2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:background="@drawable/abc_ab_bottom_solid_dark_holo" android:gravity="center_horizontal" android:orientation="vertical" > <LinearLayout android:id="@+id/add_task_layout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="8dp" > <ImageView android:layout_width="35dp" android:layout_height="35dp" android:scaleType="fitCenter" android:src="@drawable/ofm_add_icon" /> <TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginLeft="10dp" android:gravity="center" android:text="加入任务" android:textColor="@color/white" android:textSize="15dip" /> </LinearLayout> <TextView android:layout_width="fill_parent" android:layout_height="0.2dp" android:background="@color/black" /> <LinearLayout android:id="@+id/team_member_layout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="8dp" > <ImageView android:layout_width="35dp" android:layout_height="35dp" android:scaleType="fitCenter" android:src="@drawable/ofm_profile_icon" /> <TextView android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginLeft="10dp" android:gravity="center" android:text="团队成员" android:textColor="@color/white" android:textSize="15dip" /> </LinearLayout> </LinearLayout> </RelativeLayout>

/14_CustomPopupWindow/res/layout/more_popup_dialog.xml

<?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"android:gravity="center_horizontal"android:orientation="vertical" ><LinearLayoutandroid:id="@+id/pop_layout"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:background="@drawable/abc_ab_bottom_solid_dark_holo"android:gravity="center_horizontal"android:orientation="vertical" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp" ><ImageViewandroid:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/defalt_head" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:gravity="left|center_horizontal"android:orientation="vertical"android:padding="5dp" ><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="wwj"android:textColor="@color/white"android:textSize="15sp" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="whatswwj"android:textColor="@color/green"android:textSize="15sp" /></LinearLayout></LinearLayout><TextViewandroid:layout_width="fill_parent"android:layout_height="0.2dp"android:background="@color/black" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ofm_photo_icon" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="我的相冊"android:textColor="@color/white"android:textSize="15sp" /></LinearLayout><TextViewandroid:layout_width="fill_parent"android:layout_height="0.2dp"android:background="@color/black" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp"android:visibility="gone" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ofm_collect_icon" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="我的收藏"android:textColor="@color/white"android:textSize="15sp" /></LinearLayout><TextViewandroid:layout_width="fill_parent"android:layout_height="0.2dp"android:background="@color/black" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp"android:visibility="gone" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ofm_card_icon" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="我的银行卡"android:textColor="@color/white"android:textSize="15sp" /></LinearLayout><TextViewandroid:layout_width="fill_parent"android:layout_height="0.2dp"android:background="@color/black"android:visibility="gone" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ofm_setting_icon" /><TextViewandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:gravity="center"android:text="设置"android:textColor="@color/white"android:textSize="15sp" /></LinearLayout><TextViewandroid:layout_width="fill_parent"android:layout_height="0.2dp"android:background="@color/black" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp" ><ImageViewandroid:layout_width="35dp"android:layout_height="35dp"android:scaleType="fitCenter"android:src="@drawable/ofm_blacklist_icon" /><Buttonandroid:id="@+id/btn_cancel"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="10dp"android:background="@null"android:gravity="center"android:text="退出登录"android:textColor="@color/white"android:textSize="15sp" /></LinearLayout></LinearLayout></RelativeLayout>

以上各自是主页面和两个popupWindow布局

以下自己定义两个PopupWindow，自己封装自己想要的PopuoWindow。这里仅仅是给出演示样例

/14_CustomPopupWindow/src/com/wwj/popupwindow/AddPopWindow.java

package com.wwj.popupwindow;import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.PopupWindow;/*** 自己定义popupWindow* * @author wwj* * */
public class AddPopWindow extends PopupWindow {private View conentView;public AddPopWindow(final Activity context) {LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);conentView = inflater.inflate(R.layout.add_popup_dialog, null);int h = context.getWindowManager().getDefaultDisplay().getHeight();int w = context.getWindowManager().getDefaultDisplay().getWidth();// 设置SelectPicPopupWindow的Viewthis.setContentView(conentView);// 设置SelectPicPopupWindow弹出窗口的宽this.setWidth(w / 2 + 50);// 设置SelectPicPopupWindow弹出窗口的高this.setHeight(LayoutParams.WRAP_CONTENT);// 设置SelectPicPopupWindow弹出窗口可点击this.setFocusable(true);this.setOutsideTouchable(true);// 刷新状态this.update();// 实例化一个ColorDrawable颜色为半透明ColorDrawable dw = new ColorDrawable(0000000000);// 点back键和其它地方使其消失,设置了这个才干触发OnDismisslistener ，设置其它控件变化等操作this.setBackgroundDrawable(dw);// mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);// 设置SelectPicPopupWindow弹出窗口动画效果this.setAnimationStyle(R.style.AnimationPreview);LinearLayout addTaskLayout = (LinearLayout) conentView.findViewById(R.id.add_task_layout);LinearLayout teamMemberLayout = (LinearLayout) conentView.findViewById(R.id.team_member_layout);addTaskLayout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {AddPopWindow.this.dismiss();}});teamMemberLayout.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {AddPopWindow.this.dismiss();}});}/*** 显示popupWindow* * @param parent*/public void showPopupWindow(View parent) {if (!this.isShowing()) {// 以下拉方式显示popupwindowthis.showAsDropDown(parent, parent.getLayoutParams().width / 2, 18);} else {this.dismiss();}}
}

/14_CustomPopupWindow/src/com/wwj/popupwindow/MorePopWindow.java

package com.wwj.popupwindow;import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.PopupWindow;public class MorePopWindow extends PopupWindow {private View conentView;public MorePopWindow(final Activity context) {LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);conentView = inflater.inflate(R.layout.more_popup_dialog, null);int h = context.getWindowManager().getDefaultDisplay().getHeight();int w = context.getWindowManager().getDefaultDisplay().getWidth();// 设置SelectPicPopupWindow的Viewthis.setContentView(conentView);// 设置SelectPicPopupWindow弹出窗口的宽this.setWidth(w / 2 + 50);// 设置SelectPicPopupWindow弹出窗口的高this.setHeight(LayoutParams.WRAP_CONTENT);// 设置SelectPicPopupWindow弹出窗口可点击this.setFocusable(true);this.setOutsideTouchable(true);// 刷新状态this.update();// 实例化一个ColorDrawable颜色为半透明ColorDrawable dw = new ColorDrawable(0000000000);// 点back键和其它地方使其消失,设置了这个才干触发OnDismisslistener 。设置其它控件变化等操作this.setBackgroundDrawable(dw);// mPopupWindow.setAnimationStyle(android.R.style.Animation_Dialog);// 设置SelectPicPopupWindow弹出窗口动画效果this.setAnimationStyle(R.style.AnimationPreview);}public void showPopupWindow(View parent) {if (!this.isShowing()) {this.showAsDropDown(parent, parent.getLayoutParams().width / 2, 18);} else {this.dismiss();}}
}

上面用到一个动画样式效果：

/14_CustomPopupWindow/res/values/styles.xml

 <style name="AnimationPreview"><item name="android:windowEnterAnimation">@anim/fade_in</item><item name="android:windowExitAnimation">@anim/fade_out</item></style>

用到两个动画资源

/14_CustomPopupWindow/res/anim/fade_in.xml

<?

xml version="1.0" encoding="utf-8"?> <!-- 左上角扩大--> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="0.001" android:toXScale="1.0" android:fromYScale="0.001" android:toYScale="1.0" android:pivotX="100%" android:pivotY="10%" android:duration="200" />

/14_CustomPopupWindow/res/anim/fade_out.xml

<?xml version="1.0" encoding="utf-8"?

> <!-- 左上角缩小 --> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="1.0" android:toXScale="0.001" android:fromYScale="1.0" android:toYScale="0.001" android:pivotX="100%" android:pivotY="10%" android:duration="200" />

/14_CustomPopupWindow/src/com/wwj/popupwindow/MainActivity.java

package com.wwj.popupwindow;import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;public class MainActivity extends Activity implements OnClickListener{private Button setButton;private Button addButton;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_swipe);setButton = (Button) findViewById(R.id.btnSet);addButton = (Button) findViewById(R.id.btnAdd);setButton.setOnClickListener(this);addButton.setOnClickListener(this);;}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btnSet:MorePopWindow morePopWindow = new MorePopWindow(MainActivity.this);morePopWindow.showPopupWindow(setButton);break;case R.id.btnSearch:break;case R.id.btnAdd:AddPopWindow addPopWindow = new AddPopWindow(MainActivity.this);addPopWindow.showPopupWindow(addButton);break;default:break;}}
}

以上是代码实现。详细能够下载源代码參考。