高仿微信朋友圈评论popwindow

版权声明:本文为博主原创文章,转载请标明出处。 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了

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

Android项目实战(五):TextView自适应大小

391120
来自专栏Android知识点总结

4-VIV-Android之PopupWindow

15820
来自专栏分享达人秀

ImageButton和ZoomButton使用大全

上一期我们学习了ImageView的使用,那么本期来学习ImageView的两个子控件ImageButton和ZoomButton的使用。 一、Imag...

22680
来自专栏Android开发经验

ScrollView里面基于某个View弹出PopupWindow,PopupWindow不会跟着View滚动?

22620
来自专栏Android干货

Android项目实战(三十二):圆角对话框Dialog

43860
来自专栏Android干货

Android项目实战(七):Dialog主题Activity实现自定义对话框效果

53480
来自专栏Android源码框架分析

三句代码创建全屏Dialog或者DialogFragment:带你从源码角度实现全屏Dialog

Dialog是APP开发中常用的控件,同Activity类似,拥有独立的Window窗口,但是Dialog跟Activity还是有一定区别的,最明显的就是:默认...

53440
来自专栏郭霖

Android 3D滑动菜单完全解析,实现推拉门式的立体特效

在上一篇文章中,我们学习了Camera的基本用法,并借助它们编写了一个例子,实现了类似于API Demos里的图片中轴旋转功能。不过那个例子的核心代码是来自于A...

403100
来自专栏向治洪

仿淘宝购买详情页购买缩小动画

偶尔一个时候,我们产品的详情页面也做的和淘宝神识,为了加强 的体验,我们加了一些动画,下面说说淘宝详情的缩放详情页的动画怎么做的吧。 先上两张图, ? ? 其实...

23280
来自专栏androidBlog

自定义View常用例子二(点击展开隐藏控件,九宫格图片控件)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

15110

扫码关注云+社区

领取腾讯云代金券