高仿微信聊天界面长按弹框样式

简介: 效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的。网上找了一下,没找到。Android现成的 ListPopupWindow又不能满足需求。

效果图

背景

在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的。

网上找了一下,没找到。

Android现成的 ListPopupWindow又不能满足需求。

因此在非上班时间撸一个出来,供大家使用。

示例代码

关键文件、示例代码及使用方法等我都放到github上了。

这篇文章就不展开说明了。

这篇文章重点说明下怎么把这个样式给撸出来的。

说明一些关键点。

让大家知其然,更加知其所以然。

代码传送门

关键代码解剖

PopupWindow默认宽高设置

我们知道,创建PopupWindow时可以指定显示的宽度和高度。

这边说下代码里面默认的宽高是如何设置的。

默认宽度=设备的宽度/3。

默认高度的设置就比较麻烦一点。

因为高度如果设置过少,可能显示的列表Item数目就会比较少。

如果设置过大,可能显示列表会撑满整个屏幕。

基于此,这边代码设置的默认高度是动态变化的。

变化算法如下:

最大默认高度=设备的高度/2。
列表高度=Item高度*Item数目。
如果列表高度<最大默认高度,默认高度=列表高度。
如果列表高度>最大默认高度,默认高度=最大默认高度。

至于Item高度如何计算,示例代码里面有,这边就不赘余阐释了。

PopupWindow显示位置确定

在说明显示位置之前,我们先来简单说下android的坐标系。

上面的图片简单画了一下,主要是说明

X轴方向,往右边X值变大。
Y轴方向,往下面Y值变大。

这个对于后面显示位置的计算有用。

接下来我们说下显示位置的,既然是一个位置,那么就会有两个维度值。

X轴(水平方向)

Y轴(竖直方向)

除了维度值,还有一个基准点,这里的基准点就是列表的左上角。

为了说明该PopupWindow适应各个位置,所以效果图里面有三个按钮,分别位于左下角,中间,右上角。

X坐标位置确定

由上图我们可以得出结论。

当显示的View在左边时,显示的X坐标=View的中心点X坐标。
当显示的View在右边时,显示的X坐标=View的中心点X坐标-PopupWindow宽度。

Y坐标位置确定

由上图我们可以得出结论。

当显示的View在上边时,显示的Y坐标=View的中心点Y坐标。
当显示的View在下边时,显示的Y坐标=View的中心点Y坐标-PopupWindow高度。

好了,到此高仿微信聊天界面长按弹框样式的代码剖析就结束了。

有任何问题欢迎评论留言。

欢迎关注个人公众号。一起学习,一起成长。


相关文章
|
4月前
|
SQL 存储 数据库
SQL实践篇(二):为什么微信用SQLite存储聊天记录
SQL实践篇(二):为什么微信用SQLite存储聊天记录
315 1
|
4月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
|
4月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
4月前
|
SQL 关系型数据库 数据库
微信为什么使用 SQLite 保存聊天记录?
微信为什么使用 SQLite 保存聊天记录?
|
4月前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
15天前
|
人工智能 小程序 Java
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
本文介绍了一款名为PyWxDump的开源工具,它可以获取微信账户信息、解密SQLite数据库以查看和备份聊天记录。此工具适用于已登录电脑版微信的用户,通过GitHub下载后简单几步即可操作。适合对数据恢复感兴趣的开发者,但请注意合法合规使用并尊重隐私。
135 2
【工具】轻松解锁SQLite数据库,一窥微信聊天记录小秘密
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
21天前
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
|
2月前
|
前端开发
css动画(仿微信聊天页面)
css动画(仿微信聊天页面)
|
2月前
|
小程序 前端开发
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
39 0

热门文章

最新文章