PopupWindow仿微信浮层弹出框效果

最近公司项目需要实现类似微信的浮层弹出框。研究发现是用PopupWindow实现的。而且可以自定义位置以及出现和退出时的动画,由于太晚了就不实现动画了,需要得同学请自己研究下。由于本人新手其中的不足和缺点请见谅。

代码如下:

首先是定义顶部按钮的main.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/main"
 android:orientation="vertical"
 tools:context=".MainActivity"
 android:background="@color/white" > 

 <RelativeLayout
 android:id="@+id/rl_action_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:padding="10dip"
 android:background="@color/gold" > 

 <Button
  android:id="@+id/more"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_marginRight="10dip"
  android:background="@drawable/more" />
 <Button
  android:id="@+id/add"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginRight="20dip"
  android:layout_toLeftOf="@+id/more"
  android:background="@drawable/add"
  />
 <Button
  android:id="@+id/search"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginRight="20dip"
  android:layout_toLeftOf="@+id/add"
  android:background="@drawable/search"
  />
 </RelativeLayout> 

</LinearLayout>

其次是定义弹出框PopupWindow的popupwindow_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/click"
 android:cacheColorHint="#00000000"
 android:orientation="vertical" >
 <ListView
 android:id="@+id/lv_dialog"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:cacheColorHint="#00000000"
 android:listSelector="@drawable/grouplist_item_bg_normal" >
 </ListView> 

</LinearLayout>

接着是每一个弹出框显示的文字text.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" > 

 <TextView
 android:id="@+id/tv_text"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dip"
 android:padding="5dp"
 android:textSize="20sp" /> 

</LinearLayout>

最后是主界面的MainActivity.java

package com.bn.weixindemo; 

import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener; 

/**
 *
 *@title 标题
 *@description 仿微信顶部弹出框的popuwindow
 *@author zhengxiaolin
 *@version 1.0
 *@created 2014-5-23 上午12:11:11
 *@changeRecord [修改记录]<br />
 */
public class MainActivity extends Activity implements OnClickListener{
 private Button mBtnMore,mBtnAdd,mBtnSearch;
 private PopupWindow popupWindow;
 private LinearLayout layout;
 private ListView listView;
 private String[] more = {"我的相册","我的收藏","我的银行卡","设置","意见反馈"};
 private String[] add ={"发起群聊","添加朋友","视屏聊天","扫一扫","拍照分享"};
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 mBtnMore = (Button) findViewById(R.id.more);
 mBtnAdd = (Button) findViewById(R.id.add);
 mBtnSearch = (Button) findViewById(R.id.search);
 setOnClickListener();
 } 

 private void setOnClickListener() {
 mBtnMore.setOnClickListener(this);
 mBtnAdd.setOnClickListener(this);
 mBtnSearch.setOnClickListener(this);
 } 

 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 switch (v.getId()) {
 case R.id.more:
  mBtnMore.getTop();
  int y = mBtnMore.getBottom() * 3 / 2;
  int x = getWindowManager().getDefaultDisplay().getWidth();
  showMorePopupWindow(x, y);
  break;
 case R.id.add:
  mBtnAdd.getTop();
  int y1 = mBtnAdd.getBottom() * 3 / 2;
  int x1 = getWindowManager().getDefaultDisplay().getWidth();
  showAddPopupWindow(x1, y1);
  break;
 case R.id.search:
  Toast.makeText(getBaseContext(), "搜索", 1).show();
 default:
  break;
 }
 } 

 public void showMorePopupWindow(int x, int y) {
 layout = (LinearLayout) LayoutInflater.from(MainActivity.this).inflate(
  R.layout.popupwindow_dialog, null);
 listView = (ListView) layout.findViewById(R.id.lv_dialog);
 listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,
  R.layout.text, R.id.tv_text, more)); 

 popupWindow = new PopupWindow(MainActivity.this);
 popupWindow.setBackgroundDrawable(new BitmapDrawable());
 popupWindow
  .setWidth(getWindowManager().getDefaultDisplay().getWidth() / 2);
 popupWindow.setHeight(420);
 popupWindow.setOutsideTouchable(true);
 popupWindow.setFocusable(true);
 popupWindow.setContentView(layout);
 popupWindow.showAtLocation(findViewById(R.id.main), Gravity.LEFT
  | Gravity.TOP, x, y);//需要指定Gravity,默认情况是center.
 listView.setOnItemClickListener(new OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
   long arg3) {
  Toast.makeText(getBaseContext(), "您选择了:"+more[arg2], 1).show();
  popupWindow.dismiss();
  popupWindow = null;
  }
 });
 }
 /**
 * 点击+时弹出的popuwindow
 */
 public void showAddPopupWindow(int x, int y) {
 layout = (LinearLayout) LayoutInflater.from(MainActivity.this).inflate(
  R.layout.popupwindow_dialog, null);
 listView = (ListView) layout.findViewById(R.id.lv_dialog);
 listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,
  R.layout.text, R.id.tv_text, add)); 

 popupWindow = new PopupWindow(MainActivity.this);
 popupWindow.setBackgroundDrawable(new BitmapDrawable());
 popupWindow
  .setWidth(getWindowManager().getDefaultDisplay().getWidth() / 2);
 popupWindow.setHeight(420);
 popupWindow.setOutsideTouchable(true);
 popupWindow.setFocusable(true);
 popupWindow.setContentView(layout);
 popupWindow.showAtLocation(findViewById(R.id.main), Gravity.LEFT
  | Gravity.TOP, x, y);//需要指定Gravity,默认情况是center.
 listView.setOnItemClickListener(new OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
   long arg3) {
  Toast.makeText(getBaseContext(), "您选择了:"+add[arg2], 1).show();
  popupWindow.dismiss();
  popupWindow = null;
  }
 });
 }
}

好了,主要代码就完成了,实现效果如下所示

由于本人没有图片,所以弹出框的背景图没有处理,弹出框中的每一项的前面也没有添加图片,有需要得同学可以自行添加。(效果已经出来了,细节没有调整,请大家见谅)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android实现底部半透明弹出框PopUpWindow效果
  • Android中自定义PopupWindow实现弹出框并带有动画效果
  • Android实现可输入数据的弹出框
  • Android 多种简单的弹出框样式设置代码
  • Android使用Dialog风格弹出框的Activity
  • react-native 封装选择弹出框示例(试用ios&android)
  • Android 仿微信朋友圈点赞和评论弹出框功能
  • 高仿IOS的Android弹出框
  • Android仿微信进度弹出框的实现方法
时间: 2018-04-23

Android仿微信进度弹出框的实现方法

MainActivity: package com.ruru.dialogproject; import android.app.Activity; import android.os.Bundle; import android.view.View; public class MainActivity extends Activity implements Runnable { LoadingDialog dialog; @Override protected void onCreate(Bu

Android实现可输入数据的弹出框

之前一篇文章,介绍了如何定义从屏幕底部弹出PopupWindow即<Android Animation实战之屏幕底部弹出PopupWindow>,写完之后,突然想起之前写过自定义内容显示的弹出框,就随手写了两个实例,分享出来: 第一种实现方式:继承Dialog  1.1 线定义弹出框要显示的内容:create_user_dialog.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

高仿IOS的Android弹出框

先看一下效果图,不过这是网上的图片. 效果不错,就借此拿来与大伙分享分享. github源码地址:https://github.com/saiwu-bigkoo/Android-AlertView. 1.怎么用:添加依赖. compile 'com.bigkoo:alertview:1.0.3' 2.实例demo(大家可以根据需要来选择自己需要的框框). package com.example.my.androidalertview; import android.app.Activity; i

Android实现底部半透明弹出框PopUpWindow效果

Android底部半透明弹出框PopUpWindow,供大家参考,具体内容如下 layout布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" androi

react-native 封装选择弹出框示例(试用ios&android)

在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

Android中自定义PopupWindow实现弹出框并带有动画效果

使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { public Lost lost; public void onLost(Lost lost){ this.lost = lost; } private View conentView; public View getConentView() { return conentView; } public L

Android使用Dialog风格弹出框的Activity

在Android中经常会遇到需要使用Dialog风格弹出框的activity,首先我们可能会首先想到的是在XML布局文件中设置android:layout_height="wrap_content"属性,让activity的高度自适应,显然这还不行,我们还需要为其DialogActivity设置自定义一个样式 <style name="dialogstyle"> <!--设置dialog的背景--> <item name="a

Android 仿微信朋友圈点赞和评论弹出框功能

贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

Android 多种简单的弹出框样式设置代码

简介 这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 项目地址:http://www.github.com/jjdxmashl/jjdxm_dialogui 特性 1.使用链式开发代码简洁明了 2.所有的弹出框样式都在DialogUIUtils这个类中完成,方便查阅方法 3.可以自定义弹出框字体样式 4.简单的类似加载框的样式可以支持两种主题更改默认白色和灰色 截图 demo下载 demo apk下载 D

android自定义弹出框样式的实现方法

前言: 做项目时,感觉android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomDialog类,继承自Dialog,实现里面方法,在里面加载自定义样式的弹出框: 3.使用时,与使用Dialog一样 具体代码 dialog_normal_layout.xml样式文件 <?xml version="1.0" encoding="utf-8"?>

Android 简单的弹出框(在屏幕中间,传string[],根据内容框框大小自适应)

先给大家展示效果图: 实现代码也很简单,代码如下所示: private void showLabelAlert() { new AlertDialog.Builder(上下文) .setTitle("选择标签") .setItems(addressLabels, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { if (wh

uniapp 仿微信的右边下拉选择弹出框的实现代码

在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件 这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单 这里首先用一个单独的页面存放这个组件 <template> //这里是搜索框的输入框 不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arriv

Flutter 超实用简单菜单弹出框 PopupMenuButton功能

相信在实际开发过程当中,肯定少不了这样的功能: 点击 AppBar 右上角的按钮,弹出一个菜单供用户选择. 幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果. PopupMenuButton 还是老规矩,先看官方的说明: Displays a menu when pressed and calls onSelected [1] when the menu is dismissed because an item was selected. The value pa

js简单的弹出框有关闭按钮

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jquery简单的弹出层浮动层代码

jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln