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


在社交類應用開發中經常用到群管理功能,來約束訪問范圍。

本文講述的是如何實現類似微信群聊時成員管理的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

 

寫的比較匆忙,有任何錯誤,請見諒。

devxiaobai。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM