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

概述贡献/下载源码：https://github.com/mmlovesyy/PopupWindowDemo本文简单模仿微信朋友圈的点赞和评论d出框，布局等细节请忽略，着重实现d出框、发评论，及d出位置的控制。

贡献/下载源码：https://github.com/mmlovesyy/PopupWindowDemo

本文简单模仿微信朋友圈的点赞和评论d出框，布局等细节请忽略，着重实现d出框、发评论，及d出位置的控制。

1. 微信d出框

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

点击左下角的“更多”按钮，d出对话框；

点击评论，d出输入框，添加评论并在页面中实时显示；

 

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

2. 实际效果

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

 

3. 知识点清单

ListVIEw

自定义 Adapter，重写 getVIEw()方法；

PopupWindow

d出框使用PopupWindow实现，这是点赞和评论的载体，具体要涉及 PopupWindow 点击非窗口位置和再次点击消失以及显示位置的问题（根据相应更多按钮的位置确定 PopupWindow 的显示位置，关于 PopupWindow 的显示位置，可以参考我的另一篇文章 AndroID PopupWindow 的显示位置）；

LayoutInflater

使用LayoutInflater 动态加载PopupWindow 的布局，关于 LayoutInflater 的更多知识，参见我的另一篇博客 AndroID LayoutInflater ；

Activity 和 Item 的双向通信

通过自定义 OnCommentListener() 来实现 MainActivity（具体来说是屏幕底部评论框中的输入的内容）和 ItemVIEw（动态的获得上述输入的评论内容并展示在该ItemVIEw 中） 的通信，更多知识参见我的另一篇博客《 燕过留声：由 Activity 和 Fragment 的通信方法想到的》;

自定义控件

ListVIEw 中的每个 Item 是一个自定义的 ItemVIEw，记得要重写构造方法，否则会抛出 AndroID.vIEw.InflateException 异常；

如果想实现微信评论那样用户名和内容回复文字字体颜色不同，而且点击评论用户名触发页面跳转等功能，请参见 《布局优化技巧笔记》 之 ClickableSpan 章节；

4. 美工素材

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

 

文件夹r里存放图片

 

找到更多按钮

5. 关键代码

开发环境：AndroID Studio 1.4.1 for Mac + ADT 21 + JDK 1.8.0。

MainAcitivity.Java

package main.zhaizu.com.popupwindowdemo;@R_404_5565@ androID.content.Context;@R_404_5565@ androID.os.Bundle;@R_404_5565@ androID.support.v7.app.AppCompatActivity;@R_404_5565@ androID.text.TextUtils;@R_404_5565@ androID.vIEw.LayoutInflater;@R_404_5565@ androID.vIEw.VIEw;@R_404_5565@ androID.vIEw.VIEwGroup;@R_404_5565@ androID.Widget.BaseAdapter;@R_404_5565@ androID.Widget.EditText;@R_404_5565@ androID.Widget.ListVIEw;@R_404_5565@ java.util.ArrayList;@R_404_5565@ java.util.HashMap;@R_404_5565@ java.util.Iterator;@R_404_5565@ java.util.Map;@R_404_5565@ main.zhaizu.com.popupwindowdemo.model.Comment;@R_404_5565@ main.zhaizu.com.popupwindowdemo.model.Item;@R_404_5565@ main.zhaizu.com.popupwindowdemo.ui.ItemVIEw;public class MainActivity extends AppCompatActivity {private ListVIEw mListVIEw;private VIEw mCommentVIEw;private MyAdapter myAdapter;@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVIEw(R.layout.activity_main);mListVIEw = (ListVIEw) findVIEwByID(R.ID.ListvIEw);myAdapter = new MyAdapter(this,getData());mListVIEw.setAdapter(myAdapter);mCommentVIEw = findVIEwByID(R.ID.comment_vIEw);}// build dataprivate ArrayList<Item> getData() {int ITEM_COUNT = 20;ArrayList<Item> data = new ArrayList<>();data.add(new Item(R.drawable.xiaona,"薄荷栗","我学过跆拳道，都给我跪下唱征服","昨天"));data.add(new Item(R.drawable.xueyan,"欣然","走遍天涯海角，唯有我家风景最好，啊哈哈","昨天"));data.add(new Item(R.drawable.leishao,"陈磊_CL","老子以后要当行长的，都来找我借钱吧，Now","昨天"));data.add(new Item(R.drawable.yuhong,"永恒依然","房子车子都到碗里来","昨天"));data.add(new Item(R.drawable.lanshan,"蓝珊","你们这群傻×，我笑而不语","昨天"));return data;}// custom adapterprivate class MyAdapter extends BaseAdapter implements ItemVIEw.OnCommentListener {private Context context;private ArrayList<Item> mData;private Map<Integer,ItemVIEw> mCachedVIEws = new HashMap<>();public MyAdapter(Context context,ArrayList<Item> mData) {this.context = context;this.mData = mData;}@OverrIDepublic int getCount() {return mData.size();}@OverrIDepublic Object getItem(int position) {return mData.get(position);}@OverrIDepublic long getItemID(int position) {return position;}@OverrIDepublic VIEw getVIEw(int position,VIEw convertVIEw,VIEwGroup parent) {VIEw vIEw;if (convertVIEw != null) {vIEw = convertVIEw;} else {LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);vIEw = inflater.inflate(R.layout.ListvIEw_item,null,false);}if (vIEw instanceof ItemVIEw) {Item data = (Item) getItem(position);((ItemVIEw) vIEw).setData(data);((ItemVIEw) vIEw).setposition(position);((ItemVIEw) vIEw).setCommentListener(this);cacheVIEw(position,(ItemVIEw) vIEw);}return vIEw;}@OverrIDepublic voID onComment(int position) {showCommentVIEw(position);}private voID cacheVIEw(int position,ItemVIEw vIEw) {Iterator<Map.Entry<Integer,ItemVIEw>> entrIEs = mCachedVIEws.entrySet().iterator();while (entrIEs.hasNext()) {Map.Entry<Integer,ItemVIEw> entry = entrIEs.next();if (entry.getValue() == vIEw && entry.getKey() != position) {mCachedVIEws.remove(entry.getKey());break;}}mCachedVIEws.put(position,vIEw);}private voID showCommentVIEw(final int position) {mCommentVIEw.setVisibility(VIEw.VISIBLE);mCommentVIEw.findVIEwByID(R.ID.submit).setonClickListener(new VIEw.OnClickListener() {@OverrIDepublic voID onClick(VIEw v) {EditText et = (EditText) mCommentVIEw.findVIEwByID(R.ID.edit);String s = et.getText().toString();if (!TextUtils.isEmpty(s)) {// update modelComment comment = new Comment(s);mData.get(position).getComments().add(comment);// update vIEw maybeItemVIEw itemVIEw = mCachedVIEws.get(position);if (itemVIEw != null && position == itemVIEw.getposition()) {itemVIEw.addComment();}et.setText("");mCommentVIEw.setVisibility(VIEw.GONE);}}});}}}

ItemVIEw.java

package main.zhaizu.com.popupwindowdemo.ui;@R_404_5565@ androID.content.Context;@R_404_5565@ androID.graphics.drawable.BitmapDrawable;@R_404_5565@ androID.graphics.drawable.colorDrawable;@R_404_5565@ androID.util.AttributeSet;@R_404_5565@ androID.vIEw.LayoutInflater;@R_404_5565@ androID.vIEw.VIEw;@R_404_5565@ androID.vIEw.VIEwGroup;@R_404_5565@ androID.Widget.ImageVIEw;@R_404_5565@ androID.Widget.linearLayout;@R_404_5565@ androID.Widget.PopupWindow;@R_404_5565@ androID.Widget.TextVIEw;@R_404_5565@ main.zhaizu.com.popupwindowdemo.R;@R_404_5565@ main.zhaizu.com.popupwindowdemo.model.Comment;@R_404_5565@ main.zhaizu.com.popupwindowdemo.model.Item;/*** Created by cmm on 15/10/31.*/public class ItemVIEw extends linearLayout implements VIEw.OnClickListener {private int mposition;private Item mData;private ImageVIEw mPortraitVIEw;private TextVIEw mUsernameVIEw;private TextVIEw mContentVIEw;private TextVIEw mCreatedAtVIEw;private linearLayout mCommentLayout;private VIEw mMoreVIEw;private PopupWindow mMorePopupWindow;private int mShowMorePopupWindowWIDth;private int mShowMorePopupWindowHeight;private OnCommentListener mCommentListener;public ItemVIEw(Context context) {super(context);}public ItemVIEw(Context context,AttributeSet attrs) {super(context,attrs);}public interface OnCommentListener {voID onComment(int position);}@OverrIDeprotected voID onFinishInflate() {super.onFinishInflate();mPortraitVIEw = (ImageVIEw) findVIEwByID(R.ID.portrait);mUsernameVIEw = (TextVIEw) findVIEwByID(R.ID.nick_name);mContentVIEw = (TextVIEw) findVIEwByID(R.ID.content);mCreatedAtVIEw = (TextVIEw) findVIEwByID(R.ID.created_at);mCommentLayout = (linearLayout) findVIEwByID(R.ID.comment_layout);mMoreVIEw = findVIEwByID(R.ID.more_btn);}public voID setposition(int mposition) {this.mposition = mposition;}public voID setCommentListener(OnCommentListener l) {this.mCommentListener = l;}public voID setData(Item data) {mData = data;mPortraitVIEw.setimageResource(data.getPortraitID());mUsernameVIEw.setText(data.getNickname());mContentVIEw.setText(data.getContent());updateComment();mMoreVIEw.setonClickListener(this);}/*** d出点赞和评论框** @param moreBtnVIEw*/private voID showMore(VIEw moreBtnVIEw) {if (mMorePopupWindow == null) {LayoutInflater li = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);VIEw content = li.inflate(R.layout.layout_more,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);// 点赞的监听器comment.setonClickListener(this);}if (mMorePopupWindow.isShowing()) {mMorePopupWindow.dismiss();} else {int heightmoreBtnVIEw = moreBtnVIEw.getHeight();mMorePopupWindow.showAsDropDown(moreBtnVIEw,-mShowMorePopupWindowWIDth,-(mShowMorePopupWindowHeight + heightmoreBtnVIEw) / 2);}}private voID updateComment() {if (mData.hasComment()) {mCommentLayout.removeAllVIEws();mCommentLayout.setVisibility(VIEw.VISIBLE);for (Comment c : mData.getComments()) {TextVIEw t = new TextVIEw(getContext());t.setLayoutParams(new linearLayout.LayoutParams(new VIEwGroup.LayoutParams(VIEwGroup.LayoutParams.WRAP_CONTENT,VIEwGroup.LayoutParams.WRAP_CONTENT)));t.setBackgroundcolor(getResources().getcolor(R.color.colorCommentLayoutBg));t.setTextSize(16);t.setpadding(5,2,3);t.setlinespacing(3,(float) 1.5);t.setText(c.getComment());mCommentLayout.addVIEw(t);}} else {mCommentLayout.setVisibility(VIEw.GONE);}}@OverrIDepublic voID onClick(VIEw v) {int ID = v.getID();if (ID == R.ID.more_btn) {showMore(v);} else if (ID == R.ID.comment) {if (mCommentListener != null) {mCommentListener.onComment(mposition);if (mMorePopupWindow != null && mMorePopupWindow.isShowing()) {mMorePopupWindow.dismiss();}}}}public int getposition() {return mposition;}public voID addComment() {updateComment();}}

以上所述是小编给大家介绍的AndroID 仿微信朋友圈点赞和评论d出框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android 仿微信朋友圈点赞和评论d出框功能全部内容，希望文章能够帮你解决Android 仿微信朋友圈点赞和评论d出框功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。