簡(jiǎn)介面向有一定安卓基礎(chǔ)的開發(fā)者通過實(shí)現(xiàn)字母導(dǎo)航欄掌握自定義View的完整流程適用于通訊錄、城市列表、商品分類等快速索引場(chǎng)景也可作為課程設(shè)計(jì)或畢設(shè)選題的參考。壓縮包僅6.66MB共977個(gè)文件以XML布局、PNG圖片、JSON配置為主同時(shí)包含Java源碼、class字節(jié)碼、jar庫、AIDL接口及可直接運(yùn)行的APK示例工程結(jié)構(gòu)相當(dāng)完整便于按需取用。已有423人學(xué)習(xí)下載。內(nèi)容從繼承LinearLayout創(chuàng)建AlphabetNavigationBar開始覆蓋字母列表生成、按鈕點(diǎn)擊監(jiān)聽、構(gòu)造函數(shù)初始化等核心步驟并實(shí)現(xiàn)與ListView/RecyclerView的聯(lián)動(dòng)借助getPositionForSection和smoothScrollToPosition完成快速定位同時(shí)涉及View的測(cè)量、布局、繪制等生命周期要點(diǎn)并提供懸浮提示、觸摸滑動(dòng)等擴(kuò)展思路。開發(fā)者可復(fù)用源碼結(jié)構(gòu)與實(shí)現(xiàn)邏輯快速遷移到聯(lián)系人、城市索引等實(shí)際項(xiàng)目中提升列表交互體驗(yàn)。1. 用 200 行代碼解決通訊錄滑不到底的老大難手機(jī)通訊錄里存了八百多個(gè)聯(lián)系人每次想找“張”開頭的名字拇指在列表上反復(fù)搓都搓不到目標(biāo)區(qū)域搓到手指發(fā)酸還是錯(cuò)過。這不是手機(jī)性能問題是列表缺少一個(gè)精準(zhǔn)定位的錨點(diǎn)。字母導(dǎo)航欄A-Z index bar就是貼在右側(cè)的那一列 26 個(gè)字母按下“Z”直達(dá) Z 區(qū)松手列表停住。這個(gè)項(xiàng)目就是一套 Android 自定義 View 的完整實(shí)現(xiàn)不依賴第三方庫一個(gè) Kotlin 類繼承 View重寫 onTouchEvent 完成按下、滑動(dòng)、松開的整條鏈路再通過一個(gè)回調(diào)接口把當(dāng)前字母拋給 RecyclerView 去 smoothScrollToPosition。適合兩類人照抄一是應(yīng)用里需要聯(lián)系人、城市選擇、歌曲列表這類長(zhǎng)列表索引進(jìn)來的業(yè)務(wù)開發(fā)二是想把自定義 View 的 measure、draw、touch 三件套一次過明白的進(jìn)階學(xué)習(xí)者。2. 架構(gòu)設(shè)計(jì)繼承 View 重繪還是組合 ViewGroup2.1 技術(shù)選型三種自定義 View 路線的取舍實(shí)現(xiàn)字母導(dǎo)航欄業(yè)界常見有三條路線取舍點(diǎn)分別在繪制成本、事件分發(fā)難度和靈活性上。第一種是直接繼承 View在 onDraw 里把 26 個(gè)字母逐個(gè)畫出來。這是最“原生”的做法也是本項(xiàng)目選的路線。它的好處是整塊區(qū)域完全由自己掌控寬高、字母顏色、按壓背景、圓角矩形都能在 draw 階段精確控制觸摸事件也只有這一個(gè) View 在響應(yīng)不存在事件被子 View 攔截的問題。缺點(diǎn)是所有字母的點(diǎn)擊區(qū)域判定都要自己算但這恰恰是學(xué)習(xí) hit test碰撞檢測(cè)的好素材。第二種是繼承 ViewGroup里面放 26 個(gè) TextView靠 layout 擺放位置。這種寫法的上手門檻低TextView 自帶文字居中觸摸時(shí)通過 child 的 bounds 判斷點(diǎn)擊了哪個(gè)。但問題也明顯26 個(gè)子 View 意味著 26 次 measure 和 layout性能上有冗余而且當(dāng)你想給導(dǎo)航欄加按壓變色、粘性氣泡這類效果時(shí)要處理的位置關(guān)系比直接繪制復(fù)雜得多。第三種是組合 View把字母導(dǎo)航欄作為 RecyclerView 的 header/footer 或者懸浮層來加不重寫繪制只是把系統(tǒng)控件擺個(gè)造型。這個(gè)方案只適合“看起來像導(dǎo)航欄”的靜態(tài)展示交互體驗(yàn)基本談不上。所以我在拆這個(gè)項(xiàng)目時(shí)最重要的是看清它的核心思路一個(gè) View一管 Paint一組字母坐標(biāo)計(jì)算外加四個(gè)觸摸事件分支。沒有層級(jí)嵌套沒有資源文件依賴邏輯鏈非常干凈。2.2 項(xiàng)目結(jié)構(gòu)與主流程一個(gè)類撐起整條交互鏈路整個(gè)工程的結(jié)構(gòu)很小但麻雀雖小五臟俱全拆開看是這樣的app/ ├── src/main/ │ ├── java/com/example/indexbar/ │ │ ├── IndexBarView.kt # 導(dǎo)航欄核心類繼承 View │ │ ├── OnLetterChangedListener.kt # 回調(diào)接口 │ │ └── MainActivity.kt # 演示頁綁定列表聯(lián)動(dòng) │ ├── res/layout/ │ │ ├── activity_main.xml # RecyclerView IndexBarView │ │ └── item_contact.xml # 列表項(xiàng)布局 │ └── res/values/ │ └── attrs.xml # 自定義屬性文字大小、顏色等IndexBarView.kt 是絕對(duì)主角主流程可以分成三段第一段是繪制準(zhǔn)備在 onMeasure 里確定 View 的寬高在 onDraw 里循環(huán) 26 個(gè)字母算坐標(biāo)并畫出來第二段是事件處理onTouchEvent 里按下時(shí)記錄索引滑動(dòng)時(shí)實(shí)時(shí)更新當(dāng)前字母抬起時(shí)通知列表定位第三段是回調(diào)接口把當(dāng)前字母通過 Listener 暴露給外部去操作 RecyclerView。MainActivity 只負(fù)責(zé)把 IndexBarView 和 RecyclerView 接起來給 IndexBarView 設(shè)置監(jiān)聽器在回調(diào)里根據(jù)字母找到列表里第一個(gè)以該字母開頭的位置然后 smoothScrollToPosition。整個(gè)數(shù)據(jù)流是單向的手指 → IndexBarView → Listener → RecyclerView。這里有一個(gè)容易想岔的點(diǎn)很多新手會(huì)糾結(jié)“導(dǎo)航欄怎么知道每個(gè)字母對(duì)應(yīng)列表的哪個(gè)位置”其實(shí)導(dǎo)航欄不需要知道。它只負(fù)責(zé)告訴你“手指現(xiàn)在按在哪個(gè)字母上”具體這個(gè)字母對(duì)應(yīng)列表哪個(gè) index是 Activity 里根據(jù)數(shù)據(jù)源算出來的。職責(zé)分離是這個(gè)項(xiàng)目最值得抄的設(shè)計(jì)之一。3. 核心繪制拆解字母怎么算坐標(biāo)、怎么畫上去3.1 OnMeasure給導(dǎo)航欄一個(gè)合理的寬高自定義 View 的第一步不是畫而是量尺寸。onMeasure 決定了這個(gè) View 在布局里占多大地方。導(dǎo)航欄的寬高不能直接寫死因?yàn)椴煌瑱C(jī)型屏幕密度不同寫死 40dp 在低密度手機(jī)上顯得太大在高密度上又可能太小。這里用了一個(gè)常見的測(cè)量套路寬高都根據(jù)模式來區(qū)分處理。override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { // 寬度如果沒有明確指定默認(rèn) 40dp val defaultWidth dp2px(40f) val widthMode MeasureSpec.getMode(widthMeasureSpec) val widthSize MeasureSpec.getSize(widthMeasureSpec) val finalWidth when (widthMode) { MeasureSpec.EXACTLY - widthSize MeasureSpec.AT_MOST - minOf(defaultWidth, widthSize) else - defaultWidth } // 高度如果沒有明確指定默認(rèn)撐滿父布局剩余空間 val defaultHeight resources.displayMetrics.heightPixels val heightMode MeasureSpec.getMode(heightMeasureSpec) val heightSize MeasureSpec.getSize(heightMeasureSpec) val finalHeight when (heightMode) { MeasureSpec.EXACTLY - heightSize MeasureSpec.AT_MOST - minOf(defaultHeight, heightSize) else - heightSize } setMeasuredDimension(finalWidth, finalHeight) }測(cè)量邏輯的核心是 MeasureSpec 的三種模式EXACTLY 表示父布局給了確定的尺寸比如 layout_width 寫成 40dp 或 match_parent這種情況直接用父布局給的數(shù)值A(chǔ)T_MOST 對(duì)應(yīng) wrap_content意思是父布局說“你最多不能超過這個(gè)值”我們需要取默認(rèn)值和約束值的最小值UNSPECIFIED 表示父布局沒給任何限制直接用默認(rèn)值。上面這段代碼里有一個(gè)細(xì)節(jié)默認(rèn)高度直接取了屏幕高度像素值這是暗示這個(gè)導(dǎo)航欄“默認(rèn)應(yīng)該填滿可用的縱向空間”。因?yàn)樽帜笇?dǎo)航欄在實(shí)際使用中通常貼著屏幕右邊從頂部到底部這樣 26 個(gè)字母才能均勻分布在整個(gè)可用高度上。如果你在布局里給它 wrap_content 又不做處理它可能只顯示很小一塊這就是很多新手第一次跑出來字母擠成一團(tuán)的原因。3.2 OnDraw26 個(gè)字母的坐標(biāo)與繪制細(xì)節(jié)測(cè)量完了接下來就是繪制。onDraw 階段要做的事情分兩步先算出每個(gè)字母的中心坐標(biāo)然后調(diào)用 canvas.drawText 把它畫出來。這里的核心算法是“均分”。override fun onDraw(canvas: Canvas) { super.onDraw(canvas) if (letters.isEmpty()) return val itemHeight height / letters.size.toFloat() paint.textSize textSize paint.isAntiAlias true paint.color textColor for (index in letters.indices) { // 字母中心 Y每個(gè)字母占據(jù)一格中心點(diǎn)就是該格子垂直方向的中點(diǎn) val centerY itemHeight * index itemHeight / 2f // 獲取字母的寬度和高度用于計(jì)算 baseline保證文字垂直居中 val textBounds Rect() paint.getTextBounds(letters[index], 0, letters[index].length, textBounds) val textWidth textBounds.width() val textHeight textBounds.height() // X 方向水平居中 val centerX (width - textWidth) / 2f // 關(guān)鍵點(diǎn)drawText 的 y 參數(shù)是 baseline不是文字中心 // 需要通過中心點(diǎn)反推 baseline 的位置 val baselineY centerY - (textBounds.top textBounds.bottom) / 2f if (index currentIndex) { paint.color selectedTextColor // 畫選中的高亮背景 canvas.drawRoundRect( 0f, itemHeight * index itemHeight / 2f - itemHeight / 2f, width.toFloat(), itemHeight * index itemHeight / 2f itemHeight / 2f, 8f, 8f, bgPaint ) } else { paint.color textColor } canvas.drawText( letters[index], index, 1, centerX, baselineY, paint ) } }這段代碼里最容易被忽略的是 baselineY 的計(jì)算。canvas.drawText 的 y 參數(shù)并不是文字矩形的中心而是字體 baseline基線的位置。直接傳 centerY 畫出來的字會(huì)整體偏上因?yàn)?baseline 在字母底部附近文字的實(shí)際主體在 baseline 往上的區(qū)域。所以要先用 getTextBounds 拿到文字的上下邊界再通過centerY - (top bottom) / 2把中心點(diǎn)換算成 baseline 位置。還有一個(gè)細(xì)節(jié)是 drawRoundRect 的背景繪制范圍選中的字母會(huì)有一個(gè)圓角矩形的底色這個(gè)矩形的 top 和 bottom 分別是當(dāng)前格子的上下邊界left 是 0right 是 width意味著高亮背景橫貫整個(gè)導(dǎo)航欄寬度視覺上就是按下字母時(shí)那一格整條亮起來。圓角半徑 8f 對(duì)應(yīng) 8px在高分辨率屏上偏小更好的做法是用 dp 轉(zhuǎn)換后的值這個(gè)在避坑章節(jié)里再展開。字母數(shù)據(jù)源 letters 在構(gòu)造函數(shù)里初始化默認(rèn)是 A 到 Z 的 26 個(gè)大寫字母。實(shí)際項(xiàng)目中可能存在只有部分字母有數(shù)據(jù)的情況導(dǎo)航欄仍然顯示全量 26 個(gè)字母但點(diǎn)擊到?jīng)]有對(duì)應(yīng)數(shù)據(jù)的字母時(shí)列表回調(diào)里需要加一個(gè)兜底判斷否則 smoothScrollToPosition 會(huì)越界崩潰。再補(bǔ)一個(gè)參數(shù)說明textSize 和 textColor 是構(gòu)造時(shí)從自定義屬性里讀出來的分別對(duì)應(yīng) attrs.xml 里定義的 indexBarTextSize 和 indexBarTextColor。這兩個(gè)值在繪制前賦值給 paint避免 onDraw 里頻繁 setTextSize 帶來的性能損耗。paint.isAntiAlias true 是打開抗鋸齒字母邊緣會(huì)更平滑尤其在高密度屏幕上不開抗鋸齒的話小字號(hào)字母的鋸齒感特別明顯。4. 觸摸交互實(shí)現(xiàn)按下、滑動(dòng)、松開的完整事件鏈4.1 onTouchEvent 的事件分發(fā)與碰撞檢測(cè)觸摸是這個(gè)導(dǎo)航欄的靈魂。前面畫的 26 個(gè)字母只是靜態(tài)畫面真正讓導(dǎo)航欄“活”起來的是 onTouchEvent 里的三個(gè)動(dòng)作ACTION_DOWN、ACTION_MOVE、ACTION_UP。每次手指位置變化都要根據(jù)當(dāng)前 Y 坐標(biāo)算出命中了第幾個(gè)字母然后觸發(fā)重繪和回調(diào)。override fun onTouchEvent(event: MotionEvent): Boolean { val y event.y val itemHeight height / letters.size.toFloat() when (event.actionMasked) { MotionEvent.ACTION_DOWN - { // 按下根據(jù) Y 坐標(biāo)計(jì)算字母索引并強(qiáng)制進(jìn)入按下狀態(tài) currentIndex (y / itemHeight).toInt().coerceIn(0, letters.size - 1) isPressed true invalidate() // 觸發(fā)重繪讓高亮背景顯示 listener?.onLetterChanged(letters[currentIndex]) return true } MotionEvent.ACTION_MOVE - { // 滑動(dòng)不斷更新當(dāng)前字母并且實(shí)時(shí)回調(diào) val newIndex (y / itemHeight).toInt().coerceIn(0, letters.size - 1) if (newIndex ! currentIndex) { currentIndex newIndex invalidate() listener?.onLetterChanged(letters[currentIndex]) } return true } MotionEvent.ACTION_UP - { // 松開恢復(fù)非按下狀態(tài)調(diào)用回調(diào)通知列表定位 isPressed false currentIndex -1 invalidate() listener?.onLetterUp() // 關(guān)鍵松開后父容器也可以處理手勢(shì) parent?.requestDisallowInterceptTouchEvent(false) return true } MotionEvent.ACTION_CANCEL - { // 取消系統(tǒng)層面打斷觸摸比如被來電打斷 isPressed false currentIndex -1 invalidate() return true } } return super.onTouchEvent(event) }事件邏輯的核心是索引換算(y / itemHeight).toInt()。假設(shè)導(dǎo)航欄高度是 1000px26 個(gè)字母itemHeight 約 38.5px手指按在 500px 的位置500 / 38.5 12.98toInt 取整為 12對(duì)應(yīng)第 12 個(gè)字母 MA 是第 0 個(gè)。這里用了 coerceIn 做邊界截?cái)喾乐故种富鰧?dǎo)航欄上下邊緣時(shí)計(jì)算出負(fù)數(shù)或超過 25 的非法索引。ACTION_MOVE 里有個(gè)性能優(yōu)化點(diǎn)只有當(dāng) newIndex 和 currentIndex 不同時(shí)才執(zhí)行 invalidate 和回調(diào)。如果手指在同一格內(nèi)滑動(dòng)索引沒變就不需要重繪這避免了 onDraw 被高頻調(diào)用。很多性能差的導(dǎo)航欄實(shí)現(xiàn)就是沒做這個(gè)判斷導(dǎo)致手指在單個(gè)字母上滑動(dòng)時(shí)整個(gè) View 瘋狂重繪。ACTION_UP 里把 currentIndex 重置為 -1同時(shí) invalidate是為了讓高亮背景消失導(dǎo)航欄恢復(fù)初始狀態(tài)。這里有個(gè)細(xì)節(jié)是調(diào)用parent?.requestDisallowInterceptTouchEvent(false)這行代碼的意思是“我不再阻止父容器攔截事件了”。如果導(dǎo)航欄嵌在 ScrollView 或豎向滑動(dòng)的布局里按下時(shí)調(diào)用 true 阻止父容器滑動(dòng)抬起時(shí)恢復(fù) false 讓父容器重新獲得事件控制權(quán)。不加這行的話可能會(huì)遇到“手指從導(dǎo)航欄滑到列表上列表突然不能滑了”的怪問題。4.2 對(duì)外回調(diào)用接口解耦列表聯(lián)動(dòng)導(dǎo)航欄把自己的邏輯做完后怎么把當(dāng)前字母告訴外面的列表答案是通過接口回調(diào)。這是解開 View 和列表耦合的正確姿勢(shì)。interface OnLetterChangedListener { // 按下或滑動(dòng)過程中字母變化時(shí)回調(diào) fun onLetterChanged(letter: String) // 手指抬起時(shí)回調(diào)用于列表執(zhí)行最終定位 fun onLetterUp() }在 IndexBarView 里定義一個(gè)可空類型的 listener 屬性setListener 方法負(fù)責(zé)賦值。MainActivity 里這樣接indexBarView.setListener(object : OnLetterChangedListener { override fun onLetterChanged(letter: String) { // 根據(jù)字母找到列表中的第一個(gè)匹配項(xiàng) val position contactData.indexOfFirst { it.pinyinFirstLetter letter.lowercase() } if (position 0) { recyclerView.smoothScrollToPosition(position) } } override fun onLetterUp() { // 松手后可以做一些 UI 收尾比如隱藏中間的字母氣泡提示 } })這里值得注意的是 onLetterChanged 和 onLetterUp 兩個(gè)回調(diào)的職責(zé)劃分。onLetterChanged 在手指滑動(dòng)過程中高頻觸發(fā)適合做實(shí)時(shí)預(yù)覽——比如在屏幕中間彈一個(gè)大號(hào)字母浮層或者輕量級(jí)的定位動(dòng)作。onLetterUp 只在手指離開屏幕時(shí)觸發(fā)一次適合做最終定位和 UI 收尾。MainActivity 里的定位邏輯用的是 indexOfFirst它的含義是“找出列表中第一個(gè)滿足條件的元素位置”條件是聯(lián)系人姓名的首字母拼音等于當(dāng)前按下的字母。這里做了一次 lowercase() 是因?yàn)閷?dǎo)航欄默認(rèn)大寫而拼音首字母數(shù)據(jù)通常存小寫不一致就會(huì)導(dǎo)致匹配不上這個(gè)坑我在避坑章節(jié)里詳細(xì)展開。接口設(shè)計(jì)上還有一個(gè)經(jīng)驗(yàn)不要在 onLetterChanged 里做耗時(shí)操作比如數(shù)據(jù)庫查詢或者大數(shù)據(jù)過濾。它每滑動(dòng)一格就觸發(fā)一次高頻回調(diào)里一旦有耗時(shí)操作UI 就會(huì)明顯掉幀。一個(gè)合格的做法是 onLetterChanged 里只更新浮層文字等 onLetterUp 再執(zhí)行真正的數(shù)據(jù)定位。5. 避坑指南字母偏移、誤觸與數(shù)據(jù)對(duì)不齊坑一字母整體偏上第一印象就翻車現(xiàn)象26 個(gè)字母畫出來后整列文字明顯偏上第一眼就覺得不對(duì)勁但說不清哪里不對(duì)。原因drawText 的 y 參數(shù)是 baseline 而不是文字中心。baseline 在字母底部居中公式用錯(cuò)了就整體上移。還有一種情況是用了(height - letters.size * textHeight) / 2當(dāng)起始 y再逐個(gè)累加 textHeight這樣算出來的起始點(diǎn)會(huì)忽略字母自身 ascent/descent 的不對(duì)稱性。解決用 getTextBounds 拿到當(dāng)前字母的 Rect再用centerY - (rect.top rect.bottom) / 2f反推 baseline。這個(gè)公式對(duì)大小寫字母、帶聲調(diào)字符都適用算一次就能保證垂直居中。坑二手指滑出導(dǎo)航欄區(qū)域后導(dǎo)航欄“卡住”了現(xiàn)象手指從導(dǎo)航欄滑到 RecyclerView 區(qū)域?qū)Ш綑诟吡帘尘安幌г倩瑒?dòng)時(shí)列表不響應(yīng)。原因onTouchEvent 返回 true 之后這個(gè) View 就接管了整條手勢(shì)事件流。手指滑出邊界后Action 仍然是 MOVE導(dǎo)航欄內(nèi)部沒有做“越界處理”同時(shí)沒有調(diào)用 requestDisallowInterceptTouchEvent(false)父容器的滑動(dòng)被一直壓著。解決在 ACTION_MOVE 里加一個(gè)條件判斷當(dāng)手指的 Y 坐標(biāo)超出 [0, height] 區(qū)間時(shí)把 currentIndex 重置并調(diào)用 parent.requestDisallowInterceptTouchEvent(false)。另外在 ACTION_UP 里別忘了把 isPressed 置回 false并重置 currentIndex 為 -1?？尤斜矶ㄎ挥肋h(yuǎn)差一個(gè)現(xiàn)象點(diǎn)擊 L列表定位到了 N 的位置點(diǎn)擊 A列表完全不響應(yīng)。原因數(shù)據(jù)源里的拼音首字母和導(dǎo)航欄字母大小寫不一致。導(dǎo)航欄默認(rèn) A-Z 大寫而 pinyinFirstLetter 字段可能存的是小寫直接用比較必然對(duì)不上。另一個(gè)常見問題是列表數(shù)據(jù)沒有按拼音排序indexOfFirst 找到的“第一個(gè)”匹配項(xiàng)可能排在整個(gè)列表的后半部分所以視覺上定位“不準(zhǔn)”。解決比較時(shí)統(tǒng)一轉(zhuǎn)成小寫再比較同時(shí)確保數(shù)據(jù)源已經(jīng)按拼音字段排好序。如果你用系統(tǒng)自帶的中文排序要注意 Collator 的默認(rèn) Locale 可能導(dǎo)致排序結(jié)果和字母索引不一致建議對(duì)聯(lián)系人姓名的拼音做過一次預(yù)計(jì)算存進(jìn)列表?？铀男∑潦謾C(jī)上字母重疊現(xiàn)象屏幕高度只有 480dp26 個(gè)字母每個(gè)分到十幾像素文字都重疊在一起。原因itemHeight height / 26 的計(jì)算沒有下限約束。當(dāng)可用高度小于某個(gè)閾值時(shí)字母的實(shí)際繪制高度大于格子高度自然會(huì)重疊。解決給導(dǎo)航欄設(shè)置一個(gè)最小高度比如 minHeight 26 * textSize * 1.2。更徹底的辦法是在 onMeasure 里做判斷如果計(jì)算出的 itemHeight 小于 textSize 的 1.5 倍就把 textSize 縮小到itemHeight / 1.2f。這樣小屏上字體自動(dòng)縮小雖然字小但至少不重疊。注意這里不能用 dp2px 的值直接做除法要基于實(shí)測(cè)的字體 metrics 來算?？游鍒A角背景在高分辨率屏上變成“直角”現(xiàn)象選中字母的圓角矩形背景在 2x 屏上能看到圓角在 3x 屏上幾乎變成直角。原因drawRoundRect 的圓角半徑是像素值寫死 8f。3x 屏下一個(gè) dp 等于 3px8px 只相當(dāng)于 2.7dp圓角弧度被縮放后視覺上就不明顯了。解決用 dp2px 換算后設(shè)置圓角半徑。在你的工具類里加一個(gè)擴(kuò)展函數(shù) dptopx(context, dp) dp * context.resources.displayMetrics.density 0.5f然后再傳入 drawRoundRect。如果你想統(tǒng)一處理也可以在 onSizeChanged 里計(jì)算一次半徑存為成員變量避免 onDraw 里頻繁換算。6. 二次開發(fā)加一個(gè)粘性氣泡指示器順便解決手勢(shì)沖突拿到源碼后最常見的改造需求是加“懸浮氣泡”——就是手指按在導(dǎo)航欄上時(shí)屏幕中間出現(xiàn)一個(gè)大號(hào)字母浮層。這個(gè)需求不需要改繪制核心只需要在 IndexBarView 里加一個(gè)浮層狀態(tài)同時(shí)把字母?jìng)魅敫?View 顯示。具體改法是在 IndexBarView 內(nèi)部增加一個(gè) BubbleView 引用在 ACTION_DOWN 和 ACTION_MOVE 的 branch 里調(diào)用 bubbleView.animate().alpha(1f)根據(jù)當(dāng)前字母 setText然后讓氣泡跟隨手指的 Y 坐標(biāo)在屏幕上的投影位置移動(dòng)。最簡(jiǎn)單的實(shí)現(xiàn)是給 Activity 的根布局 addView 一個(gè) TextView用 absolute 坐標(biāo)定位這樣不需要跨 Window 操作。手勢(shì)沖突的處理技巧是導(dǎo)航欄區(qū)域只有 40dp 寬手指很容易滑出去進(jìn)入 RecyclerView 的領(lǐng)地。一個(gè)合格的處理是給導(dǎo)航欄監(jiān)聽器增加一個(gè) onTouchSlop 判斷——當(dāng)手指超出邊界超過系統(tǒng) touchSlop一般是 8dp時(shí)收起氣泡并釋放手勢(shì)。用 ViewConfiguration.get(context).scaledTouchSlop 拿到這個(gè)閾值不要自己寫死 10px 之類的值。如果你的改造目標(biāo)是讓導(dǎo)航欄支持“跳過空白字母”也就是某個(gè)字母沒有任何聯(lián)系人不顯示邏輯也不復(fù)雜在設(shè)置數(shù)據(jù)源時(shí)用集合過濾掉空字母同時(shí)維護(hù)一個(gè) map 記錄“字母到列表位置的映射關(guān)系”onLetterChanged 時(shí)直接查 map不再 indexOfFirst 去遍歷整個(gè)列表。這個(gè)改動(dòng)后導(dǎo)航欄的高度分割就不再用 26 等分而是用實(shí)際字母?jìng)€(gè)數(shù)onMeasure 和 onDraw 里的數(shù)字都改成動(dòng)態(tài)值就行。做完改動(dòng)怎么驗(yàn)證我一般會(huì)先在模擬器上跑三件事第一步是快速滑動(dòng)觀察氣泡是否跟手重點(diǎn)看 ACTION_MOVE 的觸發(fā)頻率是否均勻第二步是點(diǎn)按邊緣字母 A 和 Z確認(rèn)邊界索引沒有越界也沒有數(shù)組越界崩潰第三步是把系統(tǒng)字體調(diào)到最大確認(rèn)字母不重疊。跑完這三步再上真機(jī)因?yàn)橛|控采樣率不同模擬器跟手不代表真機(jī)跟手。這個(gè)項(xiàng)目拆到最后核心收獲其實(shí)不是那 200 行代碼本身而是它把自定義 View 的測(cè)量、繪制、事件處理、回調(diào)通信這四個(gè)環(huán)節(jié)串成了一條完整的鏈路。我最早做類似功能時(shí)直接在 Activity 里寫了一個(gè)自定義 onDraw 的內(nèi)部類事件處理和列表定位全堆在一個(gè)文件里結(jié)果后來要加氣泡效果改一處崩三處。從那以后我凡是碰到底層繪制的東西都強(qiáng)制先設(shè)計(jì)好 View 和業(yè)務(wù)之間的接口再動(dòng)手這次拆完這個(gè)導(dǎo)航欄項(xiàng)目我對(duì)這個(gè)習(xí)慣的信任又深了一層。希望這篇筆記能幫你少走幾步彎路跑起來之后試著自己加一個(gè)氣泡浮層手感會(huì)完全不一樣。本文還有配套的精品資源點(diǎn)擊獲取