企业官网建设流程全解析

简介：这是一份面向Android中高级开发者的自定义View实战资源，聚焦字母导航栏这一常见交互组件的完整实现。资源围绕继承LinearLayout构建AlphabetNavigationBar类展开，涵盖字母列表初始化、按钮动态创建、点击事件监听、选中状态更新，以及与ListView或RecyclerView联动滚动等核心环节，并延伸至悬浮提示框、触摸手势滑动选字母、按数据动态调整字母表等体验优化思路，适用于联系人列表、商店分类等需要快速定位的场景。压缩包共977个文件，以462个xml布局与资源、302个png图片、126个json配置、40个class与11个java源码为主，另含jar、aidl、apk等构建产物，整体约6.66MB，结构完整便于对照调试。目前已有422人学习下载，可帮助开发者掌握自定义View的创建、事件分发、UI布局与列表交互的完整链路，积累可复用的组件封装与排错经验。

1. 字母导航栏：从触摸事件到索引回调的完整实现路径

通讯录、城市列表、商品分类页里右侧那一竖排 A–Z，点一下能跳到对应分组，滑动时中间还会弹出一个当前字母的提示气泡——这个控件看起来简单，真正动手写才发现坑不少：手指按在字母上要精确命中、滑动要连续触发、离开控件要取消高亮、气泡要跟着手指走还不能超出屏幕。很多开发者第一次做，要么用一堆 TextView 硬拼，要么把触摸逻辑塞进 Activity，最后维护起来一团乱。这篇笔记就围绕 Android 自定义 View 实现字母导航栏这条主线，把测量、绘制、触摸分发、索引回调、性能与边界处理一层层拆开，给出可以直接抄进项目的代码和参数。适合已经会写自定义 View 基础、但想把它做扎实的中高级开发者，也适合正在做通讯录类页面的同学。下面所有代码基于 Kotlin，Java 思路一致，替换语法即可。

2. 先把字母栏的测量与绘制做对：onMeasure 与 onDraw 的取舍

自定义 View 的第一步永远是「它占多大、长什么样」。字母导航栏的尺寸有两个来源：一是父布局给的约束，二是 26 个字母加一个「#」共 27 个字符按固定行高排下来的自然高度。如果直接 wrap_content，很多新手会发现在 ConstraintLayout 里高度变成 0，因为默认的 onMeasure 没有处理 AT_MOST 的情况。所以第一件事是把测量逻辑写清楚。

2.1 用固定行高反推控件高度

我一般会暴露一个itemHeight属性，让外部能控制每个字母占多高，默认 14dp 左右，配合 10sp 的字号在多数机型上不挤。测量时宽度取父容器建议值和自身期望值的较小者，高度则用itemHeight * letters.size和父容器建议值取较小者。这样无论父布局给的是 EXACTLY 还是 AT_MOST，都不会出现高度塌陷。

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { // 每个字母占用的高度，外部可通过自定义属性覆盖 val itemH = itemHeight // 27 个字符（A-Z 加 #）撑起的自然高度 val desiredHeight = (itemH * letters.size).toInt() val desiredWidth = paddingLeft + paddingRight + textWidth val width = resolveSize(desiredWidth, widthMeasureSpec) val height = resolveSize(desiredHeight, heightMeasureSpec) setMeasuredDimension(width, height) }

resolveSize是这里的关键，它会根据父容器的测量模式决定最终值：EXACTLY 时用父容器给的，AT_MOST 时取建议值和期望值的较小者，UNSPECIFIED 时直接用期望值。很多人手写MeasureSpec.getSize判断，容易漏掉 UNSPECIFIED 分支，在 ScrollView 里就翻车。

2.2 onDraw 里把字母均匀铺开

绘制阶段要做三件事：算每个字母的基线 y 坐标、画普通态和选中态、画中间的气泡提示。基线计算是新手最容易错的地方，drawText的 y 参数是基线而不是顶部，直接用index * itemHeight会让文字整体偏上。正确做法是加上(itemHeight + textHeight) / 2的偏移，其中 textHeight 通过fontMetrics.descent - fontMetrics.ascent得到。

override fun onDraw(canvas: Canvas) { val fm = paint.fontMetrics val textHeight = fm.descent - fm.ascent val centerX = width / 2f letters.forEachIndexed { index, letter -> // 基线 = 格子顶部 + (格子高 + 文字高)/2，保证垂直居中 val baseline = index * itemHeight + (itemHeight + textHeight) / 2f paint.color = if (index == currentIndex) selectedColor else normalColor paint.isFakeBoldText = index == currentIndex canvas.drawText(letter, centerX, baseline, paint) } // 气泡单独绘制，见 2.3 drawBubble(canvas) }

isFakeBoldText用来在选中时加粗，比切换 Typeface 更轻量，不会触发字体重新加载。颜色和字号建议都做成自定义属性，方便在 XML 里调，不用改代码。

2.3 气泡提示的定位与边界处理

气泡是字母栏体验的分水岭。没有气泡，用户滑动时不知道当前选中哪个字母；气泡位置不对，又会挡住手指或者跑出屏幕。我的做法是：气泡中心 y 跟随手指，但用coerceIn限制在控件高度范围内；气泡 x 固定在控件左侧再往左偏移一个气泡宽度加间距，这样不会盖住字母本身。气泡背景用圆角矩形，文字居中绘制。

private fun drawBubble(canvas: Canvas) { if (!showBubble || currentIndex < 0) return // 气泡中心跟随手指，但限制在控件内，避免跑出边界 val centerY = touchY.coerceIn(bubbleRadius, height - bubbleRadius) val centerX = -bubbleRadius - bubbleMargin // 画在控件左侧外部 bubblePaint.color = bubbleColor canvas.drawCircle(centerX, centerY, bubbleRadius, bubblePaint) val text = letters[currentIndex] val fm = bubbleTextPaint.fontMetrics val baseline = centerY - (fm.ascent + fm.descent) / 2f canvas.drawText(text, centerX, baseline, bubbleTextPaint) }

注意气泡画在控件外部时，父布局必须设置clipChildren = false，否则会被裁掉。这是血泪经验，很多人调半天以为坐标算错了，其实是父容器裁剪。另外气泡半径和间距也要做成属性，不同字号下需要微调。

3. 触摸事件分发：按下、滑动、抬起三种状态怎么管

绘制只是皮，触摸才是骨。字母栏的交互可以拆成三个状态：按下（DOWN）、滑动（MOVE）、抬起或取消（UP/CANCEL）。每个状态要更新 currentIndex、触发回调、请求重绘。这里最容易踩的坑是 MOVE 事件频率过高导致回调刷屏，以及 CANCEL 时没有复位状态。

3.1 用 index 反推代替逐个命中判断

不要用「遍历每个字母的矩形区域判断手指在不在里面」这种写法，27 次循环在 MOVE 里每秒触发上百次，纯属浪费。正确做法是用手指 y 坐标除以 itemHeight 直接算出索引，再 clamp 到合法范围。

private fun updateIndexFromY(y: Float) { // 直接除法反推索引，O(1) 复杂度，比遍历命中快得多 val raw = (y / itemHeight).toInt() val index = raw.coerceIn(0, letters.size - 1) if (index != currentIndex) { currentIndex = index invalidate() onLetterChanged?.invoke(letters[index], index) } }

coerceIn保证手指滑出控件顶部或底部时，索引仍然停在第一个或最后一个字母，不会越界。回调只在索引真正变化时触发，避免同一字母重复通知列表滚动。

3.2 onTouchEvent 的完整状态机

DOWN 时记录 touchY、显示气泡、更新索引并返回 true 表示消费事件；MOVE 时更新 touchY 和索引；UP 和 CANCEL 时隐藏气泡、复位 currentIndex 为 -1、重绘。返回 true 很关键，否则后续 MOVE 和 UP 不会派发到这个 View。

override fun onTouchEvent(event: MotionEvent): Boolean { when (event.action) { MotionEvent.ACTION_DOWN -> { touchY = event.y showBubble = true updateIndexFromY(event.y) invalidate() return true } MotionEvent.ACTION_MOVE -> { touchY = event.y updateIndexFromY(event.y) invalidate() } MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { showBubble = false currentIndex = -1 invalidate() } } return super.onTouchEvent(event) }

CANCEL 和 UP 要合并处理，因为当父容器（比如 ScrollView）中途拦截事件时，只会给子 View 发 CANCEL，不会发 UP。如果只处理 UP，气泡就会一直挂在那里不消失，这是很典型的翻车场景。

3.3 回调接口设计与列表联动

字母栏本身不负责滚动列表，它只负责告诉外部「用户选中了哪个字母」。所以定义一个函数式接口，把字母和索引都传出去，外部拿到索引后用layoutManager.scrollToPositionWithOffset或smoothScrollToPosition滚动 RecyclerView。

// 函数式接口，外部只需关心字母和索引 fun interface OnLetterChangedListener { fun onLetterChanged(letter: String, index: Int) } // 使用侧：拿到索引后滚动列表 letterBar.onLetterChanged = { letter, index -> val target = groupPositions[index] // 分组首项在列表中的位置 layoutManager.scrollToPositionWithOffset(target, 0) }

scrollToPositionWithOffset比smoothScrollToPosition更适合字母跳转，因为它是瞬时定位，不会出现长距离滚动动画卡顿。groupPositions是分组首项位置数组，需要在数据更新时同步维护，这是联动正确性的前提。

4. 避坑与排查：字母栏最常见的 5 个问题

这一章单独拿出来讲踩坑，因为字母栏的 bug 大多不在主流程，而在边界和联动上。下面 5 条都是我实际项目里遇到过的，按「现象 → 原因 → 解决」写清楚。

4.1 气泡不显示或显示后被裁掉

现象：手指按下去，字母高亮了，但左侧气泡看不到。原因有两个，一是父布局clipChildren默认为 true，画在控件外的气泡被裁剪；二是气泡 x 坐标算成了正值，画到了控件内部被字母盖住。解决：在父布局显式设置android:clipChildren="false"，同时确认气泡中心 x 为负值（控件左侧外部），并留出足够 margin。

4.2 滑动时列表疯狂抖动

现象：手指在字母栏上滑动，列表跟着上下乱跳。原因：MOVE 事件每秒触发几十到上百次，每次都调用smoothScrollToPosition，滚动动画还没结束就被新动画打断。解决：改用scrollToPositionWithOffset瞬时定位，并且在updateIndexFromY里只在索引变化时才回调，同一字母重复触发直接忽略。

4.3 手指滑出控件后索引卡住不动

现象：手指从字母栏滑到屏幕其他区域，字母高亮停在某个位置不再变化。原因：MOVE 事件的 y 坐标可能为负或超过控件高度，(y / itemHeight).toInt()得到越界值。解决：用coerceIn(0, letters.size - 1)把索引限制在合法范围，这样滑出顶部停在 A，滑出底部停在 #，符合直觉。

4.4 快速点击时回调丢失

现象：快速点某个字母，偶尔列表不跳转。原因：DOWN 和 UP 间隔极短，如果只在 UP 里触发回调，可能因为事件被父容器拦截而收不到 UP。解决：在 DOWN 里就触发一次回调，UP 只负责复位气泡和高亮。这样单击和滑动都能保证至少触发一次。

4.5 不同字号下字母重叠或间距不均

现象：把字号调大后，字母上下挤在一起。原因：itemHeight 是固定值，没有随字号联动。解决：把 itemHeight 设为textSize * 1.4左右的经验值，或者在自定义属性里同时暴露字号和行高，让使用方按比例调整。更稳妥的做法是在onMeasure里用fontMetrics算出文字实际高度，再乘以 1.3 到 1.5 作为最小行高。

5. 进阶技巧：把字母栏做成可复用组件

前面四章把功能跑通了，但一个真正能在多个页面复用的字母栏，还需要处理数据驱动、无障碍和性能验证。这一章讲三个具体技巧，都是我在实际项目里沉淀下来的。

5.1 用自定义属性把样式外置

硬编码颜色和尺寸的 View 没法复用。把 normalColor、selectedColor、bubbleColor、itemHeight、textSize 都定义成 attrs，使用方在 XML 里就能调，不用改源码。

<declare-styleable name="LetterBar"> <attr name="letterTextSize" format="dimension" /> <attr name="letterItemHeight" format="dimension" /> <attr name="letterNormalColor" format="color" /> <attr name="letterSelectedColor" format="color" /> <attr name="letterBubbleColor" format="color" /> </declare-styleable>

在构造函数里用obtainStyledAttributes读取，记得recycle()。这样同一套代码，通讯录用灰色系，城市列表用蓝色系，只改 XML 即可。

5.2 字母集合可配置，支持非 A–Z 场景

不是所有场景都是 26 个字母。有些分类页用「热、A、B、C」，有些用拼音首字母加数字。把 letters 做成可变集合，默认 A–Z 加 #，外部可以传入自定义列表。注意索引回调传的是字母本身和索引，外部用索引去查分组位置，所以字母集合和分组数据必须一一对应。

5.3 用 GPU 呈现模式验证绘制性能

字母栏绘制量很小，27 个字符加一个圆，正常不会卡。但如果 onDraw 里做了对象分配（比如每次 new Paint 或 new Rect），就会触发 GC 导致掉帧。验证方法：开发者选项打开「GPU 呈现模式分析」，滑动字母栏看柱状图，绿色横线以下说明每帧在 16ms 内完成。如果柱子经常超过绿线，检查 onDraw 里有没有临时对象，把 Paint、Rect、fontMetrics 都提到成员变量里初始化。

我自己的习惯是，任何自定义 View 写完后，先在 GPU 呈现模式下滑动 10 秒，确认没有持续超帧，再交给测试。这个动作花不了一分钟，但能挡掉大部分低级性能问题。字母栏这种高频触摸的控件，onDraw 里一个多余的String.format都可能让滑动变得不跟手。希望帮到你。

本文还有配套的精品资源，点击获取