模仿微信群聊管理功能(头像管理效果)

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