高仿微信朋友圈评论popwindow

简介: 版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47283619 最近在工作中用到了评论和赞的功能,在网上搜了一下有类似的Demo,个人觉得不太好用,就稍微的做了一下优化和修改。
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47283619
最近在工作中用到了评论和赞的功能,在网上搜了一下有类似的Demo,个人觉得不太好用,就稍微的做了一下优化和修改。
这个功能用到了Popwindow,也就是可以自己定义动画的弹出框。

首先是popwindow的布局文件
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="165dp"
    android:layout_height="35dp"
    android:layout_gravity="center"
    android:gravity="center_vertical" >
    <TextView
            android:id="@+id/popu_praise"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/zan_left"
            android:drawableLeft="@drawable/zan"
            android:text="赞"
            android:drawablePadding="@dimen/small_space"
            android:gravity="center_vertical"
            android:paddingLeft="@dimen/middle_space"
            android:textColor="#ffffffff"
            android:textSize="@dimen/smaller_textSize" />

    <TextView
            android:id="@+id/popu_cancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableLeft="@drawable/zan_left"
            android:layout_gravity="center_horizontal"
            android:text="取消"
            android:drawablePadding="@dimen/small_space"
            android:gravity="center_vertical"
            android:paddingLeft="@dimen/middle_space"
            android:visibility="gone"
            android:textColor="#ffffffff"
            android:textSize="16sp" />

    <LinearLayout
            android:background="#4d5054"
            android:layout_marginTop="1px"
            android:layout_marginBottom="1px"
            android:layout_width="wrap_content"
            android:layout_height="match_parent">
        <View
                android:layout_width="0.5dp"
                android:layout_height="18dp"
                android:layout_gravity="center_vertical"
                android:background="#3b3f43" />
    </LinearLayout>

    <TextView
        android:id="@+id/popu_comment"
        android:background="@drawable/zan_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:drawablePadding="@dimen/small_space"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/middle_space"
        android:layout_weight="1"
        android:drawableLeft="@drawable/pinglun"
        android:text="评论"
        android:textColor="#ffffffff"
        android:textSize="@dimen/smaller_textSize" />

</LinearLayout></span>


接下来说一下具体实现步骤:
1.自定义继承popwindow,并且实现赞、评论的按钮点击事件....

/**
 *  功能描述:标题按钮上的弹窗(继承自PopupWindow)
 */
public class TitlePopup extends PopupWindow {

	private TextView priase;
	private TextView comment;
	private TextView cancel;

	private Context mContext;

	// 列表弹窗的间隔
	protected final int LIST_PADDING = 10;

	// 实例化一个矩形
	private Rect mRect = new Rect();

	// 坐标的位置(x、y)
	private final int[] mLocation = new int[2];

	// 屏幕的宽度和高度
	private int mScreenWidth, mScreenHeight;

	// 判断是否需要添加或更新列表子类项
	private boolean mIsDirty;

	// 位置不在中心
	private int popupGravity = Gravity.NO_GRAVITY;

	// 弹窗子类项选中时的监听
	private OnItemOnClickListener mItemOnClickListener;

	// 定义弹窗子类项列表
	private ArrayList<ActionItem> mActionItems = new ArrayList<ActionItem>();

	public TitlePopup(Context context) {
		// 设置布局的参数
		this(context, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
	}

	public TitlePopup(Context context, int width, int height) {
		this.mContext = context;

		// 设置可以获得焦点
		setFocusable(true);
		// 设置弹窗内可点击
		setTouchable(true);
		// 设置弹窗外可点击
		setOutsideTouchable(true);

		// 获得屏幕的宽度和高度
//		mScreenWidth = Util.getScreenWidth(mContext);
//		mScreenHeight = Util.getScreenHeight(mContext);

		// 设置弹窗的宽度和高度
		setWidth(width);
		setHeight(height);

		setBackgroundDrawable(new BitmapDrawable());

		// 设置弹窗的布局界面
		View view = LayoutInflater.from(mContext).inflate(
				R.layout.comment_popu, null);
		setContentView(view);
		Log.e("",
				"3333==========" + view.getHeight() + "    " + view.getWidth());
		priase = (TextView) view.findViewById(R.id.popu_praise);
		comment = (TextView) view.findViewById(R.id.popu_comment);
		cancel = (TextView) view.findViewById(R.id.popu_cancel);
		priase.setOnClickListener(onclick);
		comment.setOnClickListener(onclick);
	}

	/**
	 * 显示弹窗列表界面
	 */
	public void show(final View c) {
		// 获得点击屏幕的位置坐标
		c.getLocationOnScreen(mLocation);
		// 设置矩形的大小
		mRect.set(mLocation[0], mLocation[1], mLocation[0] + c.getWidth(),
				mLocation[1] + c.getHeight());
		priase.setText(mActionItems.get(0).mTitle);
		// 判断是否需要添加或更新列表子类项
		if (mIsDirty) {
			// populateActions();
		}
		Log.e("", "333  " + this.getHeight());// 50
		Log.e("", "333  " + c.getHeight());// 96
		Log.e("", "333  " + this.getWidth());

		Log.e("", "333  " + (mLocation[1]));

		// 显示弹窗的位置
		// showAtLocation(view, popupGravity, mScreenWidth - LIST_PADDING
		// - (getWidth() / 2), mRect.bottom);
		showAtLocation(c, Gravity.NO_GRAVITY, mLocation[0] - this.getWidth()
				- 10, mLocation[1] - ((this.getHeight() - c.getHeight()) / 2));
	}

	OnClickListener onclick = new OnClickListener() {
		@Override
		public void onClick(View v) {

			switch (v.getId()) {
				case R.id.popu_comment:
					mItemOnClickListener.onItemClick(mActionItems.get(1), 1);
					dismiss();
					break;
				case R.id.popu_praise:
					mItemOnClickListener.onItemClick(mActionItems.get(0), 0);
					dismiss();
					break;

			}
		}

	};

	/**
	 * 添加子类项
	 */
	public void addAction(ActionItem action) {
		if (action != null) {
			mActionItems.add(action);
			mIsDirty = true;
		}
	}

	/**
	 * 清除子类项
	 */
	public void cleanAction() {
		if (mActionItems.isEmpty()) {
			mActionItems.clear();
			mIsDirty = true;
		}
	}

	/**
	 * 根据位置得到子类项
	 */
	public ActionItem getAction(int position) {
		if (position < 0 || position > mActionItems.size())
			return null;
		return mActionItems.get(position);
	}

	/**
	 * 移除指定位置Item
	 * @param position
	 */
	public void removeActionItem(int position){
		if (position < 0 || position > mActionItems.size()&&mActionItems!=null){
			return ;
		}else{
			mActionItems.remove(position);
		}
	}

	/**
	 * 移除指定位置Item
	 * @param position
	 */
	public void addPositionActionItem(int position,ActionItem item){
		if (position < 0 || position > mActionItems.size()&&mActionItems!=null){
			return ;
		}else{
			mActionItems.add(position,item);
		}
	}

	/**
	 * 设置监听事件
	 */
	public void setItemOnClickListener(
			OnItemOnClickListener onItemOnClickListener) {
		this.mItemOnClickListener = onItemOnClickListener;
	}

	/**
	 * @author yangyu 功能描述:弹窗子类项按钮监听事件
	 */
	public static interface OnItemOnClickListener {
		public void onItemClick(ActionItem item, int position);
	}
}

2.在使用的地方初始化TitlePop,就可以了
<span style="font-size:12px;">/*赞评论点击弹出的popwindow*/
    private TitlePopup titlePopup;</span>
<pre class="java" name="code"><span style="font-size:12px;">titlePopup = new TitlePopup(this, ZanPinglunUtil.dip2px(this, 165), ZanPinglunUtil.dip2px(
                this, 40));</span>

 
 
3.初始化赞和评论按钮执行点击事件就ok了

最后的执行效果如下图所示:



  
相关文章
|
3月前
|
Java API
java调用个人微信API接口收发朋友圈,删除评论朋友圈
java调用个人微信API接口收发朋友圈,删除评论朋友圈
|
小程序
云开发(微信-小程序)笔记(十六)---- 评论
云开发(微信-小程序)笔记(十六)---- 评论
119 0
|
安全 机器人
超简单!两步实现Wordpress评论微信通知~
超简单!两步实现Wordpress评论微信通知~
超简单!两步实现Wordpress评论微信通知~
|
小程序
微信小程序开发之实现一个弹幕评论
微信小程序开发之实现一个弹幕评论
微信小程序开发之实现一个弹幕评论
|
机器人
WordPress博客评论微信通知功能!(更新版)
WordPress博客评论微信通知功能!(更新版)
|
SQL JSON API
Python爬取微信公众号文章和评论 (基于Fiddler抓包分析)
背景说明   感觉微信公众号算得是比较难爬的平台之一,不过一番折腾之后还是小有收获的。没有用Scrapy(估计爬太快也有反爬限制),但后面会开始整理写一些实战出来。
3882 0
微信公众平台新增评论管理功能 可显示用户评论
  一大早打开微信公众平台,发现插件那边新增了“评论管理”功能组件,查看了一下,可以显示用户评论。微信公众平台要整合微社区的节奏?   通过腾讯微信相关公告消息称,开通微信认证的公众号可以申请添加该功能模块,发布之前选择开启评论才能评论。
799 0
|
29天前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
260 65
|
22天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
8天前
|
存储 移动开发 监控
微信支付开发避坑指南
【9月更文挑战第11天】在进行微信支付开发时,需遵循官方文档,确保权限和参数配置正确。开发中应注重安全,验证用户输入,合理安排接口调用顺序,并处理异常。上线后需实时监控支付状态,定期检查配置,关注安全更新,确保系统稳定运行。

热门文章

最新文章