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

效果图

背景

在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种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高度。

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

点击?阅读原文前往github查看具体代码。

原文发布于微信公众号 - 安卓小煜(AndroidTraveler)

原文发表时间:2018-05-07

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏angularejs学习篇

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用。

49420
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

229100
来自专栏王磊的博客

React Native顶|底部导航使用小技巧

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能...

31860
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

30040
来自专栏企鹅号快讯

漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

34960
来自专栏偏前端工程师的驿站

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type...

16830
来自专栏javascript趣味编程

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

14100
来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

33540
来自专栏HTML5学堂

Form表单 问题多多(中)

HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

36450
来自专栏前端笔记

【 前端相关 网页组件 】纯CSS3实现 “图片轮播” 效果

使用纯CSS3代码实现简单的图片轮播 image.png 原理介绍 跑马灯图 : image.png 灯图原理 : image.png 基本思路 1.基本...

39590

扫码关注云+社区

领取腾讯云代金券