在城市列表的快速檢索項目中,左側(cè)的26個英文字母Bar是自己畫出來的,因此暫且把這個小項目也歸類到自定義View中吧。
項目邏輯:
1.左邊是一個自定義從A-Z的快速索引,它能夠獲取到觸摸它的時候獲取到的字母的索引。
2.右邊是一個ListView,按照字母分類排序里面的內(nèi)容,并且根據(jù)觸摸的字母,去自己列表找首字母和觸摸字母相同的那個
item,然后讓item放置到屏幕頂端(setSelection(position));
3.需要用到文字轉(zhuǎn)拼音。
下面就開始來一步步的實現(xiàn)這個功能吧。
一、自定義26個字母索引View:QuickIndexBar
1)繪制文字:使用canvas.drawText(text,x,y,paint)來實現(xiàn)。其中x,y在默認情況下(Paint.Align.LEFT模式下)分別是所繪制的文字左下角的坐標。

通過上圖可以分析出,畫文字時的x,y坐標的值,x值就是自定義View寬度的一半:getMeasureWidth/2, y值是格子高度/2 + 文字高度/2 ,如果是B之后的字母,還需要加上格子的高度,因此,我們可以得到y(tǒng)值:格子高度/2 + 文字高度/2 + position*格子高度
在豎直方向上,我們要把26個字母平均分配到自定義View中,因此每個格子的高度是getMeasureHeight()/26,重點是求文本的高度。
獲取x值和格子的高度:

在自定義View中用canvas繪制文字時,可以通過這樣一個方法去獲得文字的高度:

定義一個矩形bounds,當這個方法執(zhí)行完成之后,我們所要測量的文字就滿滿的填充在bounds之中,此時我們獲取矩形的高度即可以得到文字的高度。

高度獲取之后,我們就可以來繪制文字了。
初始化畫筆,可以設置文字的大小,顏色等。


效果圖:

2)按下和移動時計算觸摸字母Bar時對應的字母值。(int)按下的y值/cellHeight就是字母的position,移動時也是這樣一個邏輯,但是手指在屏幕上移動會產(chǎn)生無數(shù)個移動事件,這里就需要控制一下,只有當position改變時,才獲取字母的值。

實現(xiàn)每次選中的字母都會變色,在每一次移動,按下,抬起時都要重繪界面,在onDraw()中判斷 lastIndex == i ,如果相等那么重繪時,把第i個字母的顏色改變,其他字母仍然是黑色。

3)設置回調(diào),把每次獲取的字母傳出去,用于與外界的ListView的數(shù)據(jù)交互。
編寫接口和setXXXListener()

在獲取字母的地方,調(diào)用接口中的方法,把數(shù)據(jù)傳遞出去。

在外界獲取數(shù)據(jù)。

這里有關(guān)于字母索引條的開發(fā)就完成了,下面開始左側(cè)ListView的開發(fā)。
二、左側(cè)ListView的開發(fā)
1)設置ListView的Item
左側(cè)ListView的Item分為上下兩部分,上部分是顯示首字母,下部分是顯示名稱。如圖,下部分填充的是姓名,上部分填充的是姓名的首字母。

2)將姓名轉(zhuǎn)化成拼音,使用到的是pinyin4j.jar

在Adapter中設置數(shù)據(jù)

此時效果圖是這樣的

3)對姓名進行排序
使用Collections中的sort(),但是該方法要求參數(shù)中的實體類必須實現(xiàn) Comparable<T>接口,實現(xiàn)其中的compareTo()


4)對于相同首字母的條目,item上部分顯示字母的部分只留一個,其它隱藏起來。跟上一個Item比較,如果是相同的首字母就要隱藏上半部分

此時的效果圖

5)手指點擊或移動到某個字母上,ListView會把相應首字母的Item放置屏幕的頂端

6)點擊相應的字母,屏幕中間彈出對話框,這里屏幕中間的對話框使用TextView,沒有點擊的情況下,TextView是隱藏狀態(tài),當需要顯示TextView時,顯示出來

效果圖:
