首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高仿微信朋友圈评论popwindow

高仿微信朋友圈评论popwindow

作者头像
Hankkin
发布2018-09-06 17:43:08
1.2K0
发布2018-09-06 17:43:08
举报
文章被收录于专栏:Android干货园Android干货园

版权声明:本文为博主原创文章,转载请标明出处。 https://cloud.tencent.com/developer/article/1330987

最近在工作中用到了评论和赞的功能,在网上搜了一下有类似的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了

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年08月04日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档