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. Nuget私服使用

    首先前提是师父已经搭好私服环境了(怎么搭建参考https://www.cnblogs.com/liupengblog/archive/2012/09/10/2678508.html). 然后在vs中打 ...

  2. 6.Spark streaming技术内幕 : Job动态生成原理与源码解析

    原创文章,转载请注明:转载自 周岳飞博客(http://www.cnblogs.com/zhouyf/)   Spark streaming 程序的运行过程是将DStream的操作转化成RDD的操作, ...

  3. ARK登录信息

    101,389B,382:仙境353:中心岛380:畸变404:孤岛371:焦土487:灭绝 eaglexmw:389b[65493013] : 初级畸变,高级飞升,TEK全解(有380权限),黑鬼, ...

  4. linux 把用户加入一个组&从这个组中移除

    # usermod -a -G www zhou // zhou这个用户现在属于两个组 zhou www # groups zhou zhou : zhou www # gpasswd -d zhou ...

  5. NYOJ 228 士兵杀敌(五)【差分标记裸题】

    题目链接 所有元素初始值为0才能这么做: ①l--r全加1 a[l]++; a[r+1]--; 求一遍前缀和为元素本身. 求两遍前缀和为元素前缀和. #include<cstdio> #i ...

  6. 28、Flask实战第28天:cms后台模板渲染

    这节开始,我们需要用到前端模板.^_^..如果需要模板素材的同学,可以点击博客的右侧二维码进行打赏(10元),截图发送到邮箱463951510@qq.com,写明索取flask论坛素材即可,博主收到邮 ...

  7. CSS3选择器、低版本解决方案及各浏览器私有前缀

    一.基本选择器 通配选择器:* 元素选择器:div.p… ID选择器:#id 类选择器:.className 群组选择器:选择器1,选择器2 主流浏览器全部支持 二.层次选择器 后代选择器: div ...

  8. Codeforces Round #449 (Div. 2)ABCD

    又掉分了0 0. A. Scarborough Fair time limit per test 2 seconds memory limit per test 256 megabytes input ...

  9. 【推导】【贪心】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem D. Clones and Treasures

    给你一行房间,有的是隐身药水,有的是守卫,有的是金币. 你可以任选起点,向右走,每经过一个药水或金币就拿走,每经过一个守卫必须消耗1个药水,问你最多得几个金币. 药水看成左括号,守卫看成右括号, 就从 ...

  10. MySort的后续学习

    本周老师在课上布置的一个MySort的任务 在结合了老师的模板后,我在课上写出了如下代码: import java.util.*; public class MySort { public stati ...