模仿微信群聊管理功能(头像管理效果)
jopen
12年前
在社交类应用开发中经常用到群管理功能,来约束访问范围。
本文讲述的是如何实现类似微信群聊时成员管理的UI效果。
先上效果图:
(添加状态)
(删除状态)
(添加成功)
UI效果概述:
1. +图标,单击添加一个头像。
2. 长按任意一个头像,进入删除状态,头像出现删除标识,+图标消失。此时单击头像图标,则该图标被删除。
3. 在删除状态下,单击空白区域,进入正常添加状态,删除标识消失,+图标出现。
实现思路:
用GridView来实现头像的布局显示。
GridView的Item布局用FrameLayout实现,删除标识固定在左上角并影藏。在代码中根据是删除状态还是添加状态控制删除标识的显示与否。
设置GridView的OnItemClickListener和OnItemLongClickListener来处理点击事件。
注意的一点是,GridView不能设置OnClickListener,因为会与OnItemClickListener冲突,那么怎么处理在删除状态下点击GridView的空白区域呢?
本文最后是用空白的Item填充了GridView的空白区域,这样点击空白区域触发的就是ItemClickListener。
这样处理会是Item的计算复杂一点,每次增加,删除一个头像,删除状态和正常状态的变换,都需要考虑是否要换行(或者减少一行)和重新计算空白的Item个数。
具体计算规则请看源码
https://github.com/devxiaobai/headman
转自:http://www.cnblogs.com/devxiaobai/archive/2012/09/11/headman.html