在社交類應用開發中經常用到群管理功能,來約束訪問范圍。
本文講述的是如何實現類似微信群聊時成員管理的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。