wjntekaqskfhwktpgpvzhp

1. 微信弹出框

微信朋友圈的点赞和评论功能，有2个组成部分：

左下角的“更多”按钮；

点击该按钮后弹出的对话框；

微信朋友圈点赞和评论功能

2. 实际效果

本文将建一个 ListView，在其 Item 中简单模仿微信的布局，然后着重实现弹出窗，忽略具体布局细节。具体效果如下：

3. 知识点

知识点清单：

4. 美工素材

由于 .apk 本质上是个压缩包，我们可以通过解压得到该 .apk 文件的图片素材和布局文件，更多获得素材的方法参见我的另一篇博文 如何获得Android素材图片。通过这种方式得到颜色、更多按钮的样式等素材，仅供学习之用，，请勿做侵犯版权之事。尊重知识版权既是大势所趋，也是终将使每个开发者受益的事。

文件夹r里存放图片

找到更多按钮

5. 关键代码

开发环境：Android Studio 1.3.2 for Mac + ADT 21 + JDK 1.8.0。

MainAcitivity.java

package com.example.cmm.helloworld;

import android.app.AlertDialog;

import android.content.Context;

import android.graphics.drawable.BitmapDrawable;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.ListView;

import android.widget.PopupWindow;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

{

private PopupWindow mMorePopupWindow;

private int mShowMorePopupWindowWidth;

private int mShowMorePopupWindowHeight;

(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ListView lv = (ListView) findViewById(R.id.listview);

lv.setAdapter(new MyAdapter(MainActivity.this, getData()));

}

private List getData() {

List data = new ArrayList<>();

data.add(new Data(R.drawable.xiaona, "薄荷栗", "我学过跆拳道，都给我跪下唱征服", "昨天"));

data.add(new Data(R.drawable.xueyan, "欣然", "走遍天涯海角，唯有我家风景最好，啊哈哈", "昨天"));

data.add(new Data(R.drawable.leishao, "陈磊_CL", "老子以后要当行长的，都来找我借钱吧，now", "昨天"));

data.add(new Data(R.drawable.yuhong, "永恒依然", "房子车子都到碗里来", "昨天"));

data.add(new Data(R.drawable.lanshan, "蓝珊", "你们这群傻×，我笑而不语", "昨天"));

return data;

}

class MyAdapter extends BaseAdapter {

private List listdata;

private Context context;

public MyAdapter(Context context, List listdata) {

this.context = context;

this.listdata = listdata;

}

() {

return listdata.size();

}

@Override

public Object getItem(int arg0) {

return listdata.get(arg0);

}

(int arg0) {

return arg0;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView = inflater.inflate(R.layout.listview_item, null, false);

// 带赋值区域

ImageView ivPortrait = (ImageView) convertView.findViewById(R.id.portrait);

TextView tvNickName = (TextView) convertView.findViewById(R.id.nick_name);

TextView tvContent = (TextView) convertView.findViewById(R.id.content);

TextView tvCreatedAt = (TextView) convertView.findViewById(R.id.created_at);

ImageView moreBtn = (ImageView) convertView.findViewById(R.id.more_btn);

// 赋值

Data data = listdata.get(position);

ivPortrait.setImageResource(data.getPortraitId());

tvNickName.setText(data.getNickName());

tvContent.setText(data.getContent());

tvCreatedAt.setText(data.getCreatedAt());

// 更多按钮的点击事件

moreBtn.setOnClickListener(new View.OnClickListener() {

(View v) {

showMore(v);

}

});

return convertView;

}

/**

* 弹出点赞和评论框

*

*@param moreBtnView

*/

(View moreBtnView) {

if (mMorePopupWindow == null) {

LayoutInflater li = (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View content = li.inflate(R.layout.layout_more, null, false);

mMorePopupWindow = new PopupWindow(content, ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

mMorePopupWindow.setBackgroundDrawable(new BitmapDrawable());

mMorePopupWindow.setOutsideTouchable(true);

mMorePopupWindow.setTouchable(true);

content.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);

mShowMorePopupWindowWidth = content.getMeasuredWidth();

mShowMorePopupWindowHeight = content.getMeasuredHeight();

View parent = mMorePopupWindow.getContentView();

TextView like = (TextView) parent.findViewById(R.id.like);

TextView comment = (TextView) parent.findViewById(R.id.comment);

// 点赞的监听器

like.setOnClickListener(new View.OnClickListener() {

(View v) {

final AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);

alert.setTitle("点赞");

alert.setNegativeButton("取消", null);

alert.show();

}

});

// 评论的监听器

comment.setOnClickListener(new View.OnClickListener() {

(View v) {

final AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);

alert.setTitle("评论");

alert.setNegativeButton("取消", null);

alert.show();

}

});

}

if (mMorePopupWindow.isShowing()) {

mMorePopupWindow.dismiss();

} else {

int heightMoreBtnView = moreBtnView.getHeight();

mMorePopupWindow.showAsDropDown(moreBtnView, -mShowMorePopupWindowWidth,

-(mShowMorePopupWindowHeight + heightMoreBtnView) / 2);

}

}

}

class Data {

String nickName; String createdAt; (int portraitId, String nickName, String content, String createdAt) {

this.portraitId = portraitId;

this.nickName = nickName;

this.content = content;

this.createdAt = createdAt;

}

() {

return portraitId;

}

public String getNickName() {

return nickName;

}

public String getContent() {

return content;

}

public String getCreatedAt() {

return createdAt;

}

}

}

6. 感谢

本文中 listview 的布局改编自 ，感谢该作者的分享。

如需完整工程，请留下邮箱。