Android-自己定义PopupWindow

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

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

效果图例如以下：
首先从布局開始
/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" >

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/abc_ab_bottom_solid_dark_holo"

        android:padding="12dip" >

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentLeft="true"

            android:gravity="center"

            android:orientation="horizontal" >

            <ImageView

                android:layout_width="30dp"

                android:layout_height="30dp"

                android:src="@drawable/ic_launcher" />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginLeft="10dip"

                android:text="任务系统"

                android:textColor="@color/lightgray"

                android:textSize="18sp" />

        </LinearLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentRight="true"

            android:gravity="center"

            android:orientation="horizontal" >

            <Button

                android:id="@+id/btnSearch"

                android:layout_width="30dp"

                android:layout_height="30dp"

                android:layout_marginRight="20dip"

                android:background="@drawable/actionbar_search_icon"

                android:visibility="gone" />

            <Button

                android:id="@+id/btnAdd"

                android:layout_width="30dp"

                android:layout_height="30dp"

                android:layout_marginRight="20dip"

                android:background="@drawable/actionbar_add_icon" />

            <Button

                android: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" >

    <LinearLayout

        android: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" >

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            android:padding="8dp" >

            <ImageView

                android:layout_width="50dp"

                android:layout_height="50dp"

                android:src="@drawable/defalt_head" />

            <LinearLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:gravity="left|center_horizontal"

                android:orientation="vertical"

                android:padding="5dp" >

                <TextView

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:text="wwj"

                    android:textColor="@color/white"

                    android:textSize="15sp" />

                <TextView

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:text="whatswwj"

                    android:textColor="@color/green"

                    android:textSize="15sp" />

            </LinearLayout>

        </LinearLayout>

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="0.2dp"

            android:background="@color/black" />

        <LinearLayout

            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_photo_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="15sp" />

        </LinearLayout>

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="0.2dp"

            android:background="@color/black" />

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            android:padding="8dp"

            android:visibility="gone" >

            <ImageView

                android:layout_width="35dp"

                android:layout_height="35dp"

                android:scaleType="fitCenter"

                android:src="@drawable/ofm_collect_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="15sp" />

        </LinearLayout>

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="0.2dp"

            android:background="@color/black" />

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            android:padding="8dp"

            android:visibility="gone" >

            <ImageView

                android:layout_width="35dp"

                android:layout_height="35dp"

                android:scaleType="fitCenter"

                android:src="@drawable/ofm_card_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="15sp" />

        </LinearLayout>

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="0.2dp"

            android:background="@color/black"

            android:visibility="gone" />

        <LinearLayout

            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_setting_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="15sp" />

        </LinearLayout>

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="0.2dp"

            android:background="@color/black" />

        <LinearLayout

            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_blacklist_icon" />

            <Button

                android: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的View

		this.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() {

			@Override

			public void onClick(View arg0) {

				AddPopWindow.this.dismiss();

			}

		});

		teamMemberLayout.setOnClickListener(new OnClickListener() {

			@Override

			public void onClick(View v) {

				AddPopWindow.this.dismiss();

			}

		});

	}

	/**

	 * 显示popupWindow

	 *

	 * @param parent

	 */

	public void showPopupWindow(View parent) {

		if (!this.isShowing()) {

			// 以下拉方式显示popupwindow

			this.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的View

		this.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;

	@Override

	protected 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);;

	}

	@Override

	public 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;

		}

	}

}

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

Android-自己定义PopupWindow的更多相关文章

  1. 47.Android 自己定义PopupWindow技巧

    47.Android 自己定义PopupWindow技巧 Android 自己定义PopupWindow技巧 前言 PopupWindow的宽高 PopupWindow定位在下左位置 PopupWin ...

  2. Android开发之PopupWindow

      /* *  Android开发之PopupWindow * *  Created on: 2011-8-8 *  Author: blueeagle *  Email: liujiaxiang@g ...

  3. Android自己定义DataTimePicker（日期选择器）

    Android自己定义DataTimePicker(日期选择器)  笔者有一段时间没有发表关于Android的文章了,关于Android自己定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇 ...

  4. Android UI--自定义ListView(实现下拉刷新+加载更多）

    Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就 ...

  5. Android自己定义组件系列【7】——进阶实践（4）

    上一篇<Android自己定义组件系列[6]--进阶实践(3)>中补充了关于Android中事件分发的过程知识.这一篇我们接着来分析任老师的<可下拉的PinnedHeaderExpa ...

  6. ANDROID自己定义视图——onLayout源代码 流程 思路具体解释

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简单介绍: 在自己定义view的时候.事实上非常easy.仅仅须要知道3步骤: 1.測量- ...

  7. Android 自己定义View (二) 进阶

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自己定义View之旅.前面已经介绍过一个自己定义View的基础 ...

  8. Android 自己定义ScrollView ListView 体验各种纵向滑动的需求

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38950509.本文出自[张鸿洋的博客] 1.概述 群里的一个哥们有个需求是这种: ...

  9. Android自己定义控件系列五：自己定义绚丽水波纹效果

    尊重原创!转载请注明出处:http://blog.csdn.net/cyp331203/article/details/41114551 今天我们来利用Android自己定义控件实现一个比較有趣的效果 ...

随机推荐

  1. Java数据库连接池-proxool

    连接池技术的思想: 连接复用(高效.安全),避免数据库频繁建立.关闭的开销 --------------------极客学院(参考lulei) 1.配置文件 <proxool> <! ...

  2. MySQL常用的数学函数

    在使用mysql自带的函数要慎重,说是会影响数据执行效率,代价太大.这个也要区分开,区分快软件的引用范畴,比如说内部系统业务逻辑比较复杂,功能点很细,但是并发量不是很大,这个时候用MySQL自带的函数 ...

  3. 最小生成树算法详解（prim+kruskal）

    最小生成树概念: 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边. 最小生成树可以用kruskal(克鲁斯卡尔)算法或prim(普里 ...

  4. RecyclerView 和 ListView 使用对比分析

    原文地址:http://blog.coderclock.com/2016/08/08/android/RecyclerView%20%E5%92%8C%20ListView%20%E4%BD%BF%E ...

  5. Codeforces Round #423 A Restaurant Tables（模拟）

    A. Restaurant Tables time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. 问题记载——keil中写for循环嵌套

    还是上次的工程,LED灯闪烁.我今天回想一下感觉上次调试的时候还是有点问题,LED0 1和0的翻转时间很奇怪. 所以今天又打开看了看,单步调试,发现for循环嵌套只执行前一个循环,后一个循环根本不执行 ...

  7. 【BZOJ 2744】 2744: [HEOI2012]朋友圈 (最大团，二分图匹配，构图)

    2744: [HEOI2012]朋友圈 Description 在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着.一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他 ...

  8. hdu 5868 2016 ACM/ICPC Asia Regional Dalian Online 1001 (burnside引理 polya定理）

    Different Circle Permutation Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K ...

  9. BZOJ 3450 Tyvj1952 Easy（期望）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3450 [题目大意] 给出一个字符串,包含o,x和?,一个字符串的得分为 每段连续的o的 ...

  10. 【二分】【三分】【计算几何】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem L. Lines and Polygon

    题意:给你一个凸多边形,和多次询问,每次询问给你一条直线,问你这条直线与凸包上的顶点的最近距离是多少. 记当前询问的直线的斜率为K, 先找到与这条直线距离最远的两个点: 就把凸包所有的边当做有向直线进 ...