高仿微信聊天介面長按彈框樣式

AndroidTraveler發表於2018-11-04

高仿微信聊天介面長按彈框樣式

效果圖

高仿微信聊天介面長按彈框樣式

背景

在公司做的專案裡面,剛好有需要用到微信聊天介面長按彈框樣式這種 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高度。

好了,到此高仿微信聊天介面長按彈框樣式的程式碼剖析就結束了。

有任何問題歡迎評論留言。

歡迎關注個人公眾號。一起學習,一起成長。

高仿微信聊天介面長按彈框樣式

相關文章