Android-自定义PopupWindow
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" > <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_initem> <item name="android:windowExitAnimation">@anim/fade_outitem> 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; } }}以上是代码实现，具体可以下载源码参考。
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow