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. DotNetCore 微服务上传附件

    后台接口升级成netcore 2.0了,然后之前的上传图片的接口就不再使用了.新的接口形式 #region IFormCollection /// <summary> /// IFormC ...

  2. Oracle 使用序列、触发器实现自增

    之前项目开发多用mysql,对于id自增长设置,只需要简单修改列属性便好.最近改用ORACLE,头大一圈.ORACLE的相关操作,多用脚本.想短平快,难.最终用sql developer通过UI进行修 ...

  3. Python生成随机数的一些函数

    头文件: import random 1.生成一个随机浮点数,范围是0-1: print random.random() 2.生成指定范围内的随机浮点数: print random.uniform(a ...

  4. RMQ入门

    注:为方便描述算法 便于记忆 所以ST的代码用Pascal书写 见谅 RMQ,即Range Minimum/Maximum Query问题,给定一个区间,询问不同子区间的最值问题. 当询问次数较少时, ...

  5. Spring 异常

    Java Web项目整体异常处理机制   http://www.51testing.com/html/90/n-823590.html spring mvc 异常统一处理方式 http://www.c ...

  6. 【BZOJ 1018】【SHOI 2008】堵塞的交通traffic

    http://www.lydsy.com/JudgeOnline/problem.php?id=1018 线段树维护连通性. 把每一列看成一个节点,对于线段树上的每一个节点,维护8个信息,前6个字面意 ...

  7. [Codeforces #190] Tutorial

    Link: Codeforces #190 传送门 A: 明显答案为$n+m-1$且能构造出来 #include <bits/stdc++.h> using namespace std; ...

  8. python3-开发进阶Django-form组件中model form组件

    Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库中有这样 ...

  9. python基础之面向过程编程,模块

    面向过程编程 面向过程的核心是过程,指的是解决问题的步骤,即先干什么再干什么,就好像设计一条流水线. 优点:复杂的问题流程化,进而简单化 缺点:可扩展性差,修改流水线的任意一个阶段,都会牵一发而动全身 ...

  10. [转]OpenSessionInView模式

    OpenSessionInView模式解决的问题:   * hibernate事物边界问题   * 因session关闭导致hibernate延迟加载例外的问题 事物边界:     一个事物的完成应该 ...