效果圖
背景
在公司做的項目里面,剛好有需要用到微信聊天界面長按彈框樣式這種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高度。
好了,到此高仿微信聊天界面長按彈框樣式的代碼剖析就結束了。
有任何問題歡迎評論留言。