六.自定義View之城市列表快速檢索

在城市列表的快速檢索項目中,左側(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之中,此時我們獲取矩形的高度即可以得到文字的高度。

獲取文本高度

高度獲取之后,我們就可以來繪制文字了。

初始化畫筆,可以設置文字的大小,顏色等。

初始化畫筆


畫出文字

效果圖:

左側(cè)索引欄

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

把漢字轉(zhuǎn)換成拼音

在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時,顯示出來

效果圖:





最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,034評論 25 709
  • 【Android 自定義View之繪圖】 基礎圖形的繪制 一、Paint與Canvas 繪圖需要兩個工具,筆和紙。...
    Rtia閱讀 12,162評論 5 34
  • 在研究如何穿衣打扮之前,先給自己一個明確的定位,制定屬于你的著裝策略。 這個道理非常簡單: 你是誰? 我即將成為一...
    曾曾的麻麻閱讀 229評論 0 0
  • 今天想寫兩個人,很普通很普通的人,但在她們身上我看到了好的品質(zhì),是我需要的,也是應該好好學習的。 那就是專注和堅持...
    藍珊瑚coral閱讀 467評論 4 3
  • iOS調(diào)試 - NSLog iOS調(diào)試 - 斷點 iOS調(diào)試 - LLDB iOS調(diào)試 - EXC_BAD_ACC...
    Stago閱讀 494評論 1 11

友情鏈接更多精彩內(nèi)容