Android：如何不借助额外布局调整TextView的drawableStart图标与多行文本顶部对齐

问题核心 #

TextView通过android:drawableStart设置的复合图标，默认会对齐整个控件的垂直中心，多行文本时无法和第一行文本顶部对齐。在不引入额外布局（如嵌套ConstraintLayout/LinearLayout拆分图标和文本）的前提下，只需要动态调整复合图标的绘制边界即可实现目标效果。

实现步骤 #

• 保留原有XML配置：不需要改动之前的drawableStart相关设置，正常配置即可；可根据视觉需要设置android:gravity，如果希望整个文本块在控件顶部，设置为android:gravity="top|start"，否则文本默认垂直居中时也能正常对齐第一行顶部，只是文本块整体在控件中心。
• 动态获取并调整Drawable边界：
  • 从TextView的复合Drawable数组中取出start方向的图标，优先用getCompoundDrawablesRelative()获取，兼容RTL布局方向，比普通的getCompoundDrawables()适配性更好
  • 在TextView布局完成后，通过getLineBounds(0, Rect)拿到第一行文本的实际顶部位置
  • 把start图标的绘制边界的顶部对齐到第一行文本的顶部位置，保持原有图标尺寸不变
• 适配动态变化场景：当文本内容变化、行高改变时，重新执行上述边界调整逻辑，避免图标位置错位。

代码示例 #

Kotlin 扩展函数写法 #

可全局复用的封装方法：

fun TextView.alignStartDrawableToTextTop() {
    // 取出start方向的Drawable，没有则直接返回
    val startDrawable = compoundDrawablesRelative[0] ?: return
    val firstLineBounds = Rect()
    // 等布局完成后再读取行边界，否则拿不到正确值
    doOnLayout {
        getLineBounds(0, firstLineBounds)
        // 获取Drawable固有尺寸，需要自定义图标大小的话可替换为固定dp转px的值
        val drawableWidth = startDrawable.intrinsicWidth
        val drawableHeight = startDrawable.intrinsicHeight
        // 调整Drawable的绘制边界：垂直方向对齐第一行顶部，水平方向保持默认偏移
        startDrawable.setBounds(
            0,
            firstLineBounds.top,
            drawableWidth,
            firstLineBounds.top + drawableHeight
        )
        startDrawable.invalidateSelf()
    }
    // 监听文本变化，内容变更时重新对齐
    addTextChangedListener(object : TextWatcher {
        override fun afterTextChanged(s: Editable?) {
            doOnLayout { alignStartDrawableToTextTop() }
        }
        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
    })
}

使用时在代码里直接调用即可：

tv_content.alignStartDrawableToTextTop()

Java 写法 #

TextView textView = findViewById(R.id.tv_content);
// 取出start方向的Drawable
final Drawable startDrawable = textView.getCompoundDrawablesRelative()[0];
if (startDrawable == null) return;
// 布局完成后调整位置
textView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
    @Override
    public void onLayoutChange(View v, int left, int top, int right, int bottom,
                               int oldLeft, int oldTop, int oldRight, int oldBottom) {
        Rect firstLineBounds = new Rect();
        textView.getLineBounds(0, firstLineBounds);
        int drawableWidth = startDrawable.getIntrinsicWidth();
        int drawableHeight = startDrawable.getIntrinsicHeight();
        startDrawable.setBounds(0, firstLineBounds.top, drawableWidth,
                firstLineBounds.top + drawableHeight);
        startDrawable.invalidateSelf();
    }
});
// 文本变化时触发重新布局对齐
textView.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        textView.requestLayout();
    }
    @Override
    public void afterTextChanged(Editable s) {}
});

注意事项 #

• 原有android:drawablePadding的间距设置不受影响，系统会自动计算图标和文本的水平间距
• 该逻辑同时兼容单行、多行文本场景，单行时和系统默认的图标对齐效果完全一致，不会出现错位
• 如果需要调整其他方向（end/top/bottom）的Drawable对齐逻辑，只需要对应修改bounds的偏移值即可
• 自定义图标大小的话，可以把代码里的getIntrinsicWidth()/getIntrinsicHeight()替换为自己定义的固定尺寸转px后的值，不用改动其他逻辑

内容的提问来源于stack exchange，提问作者Danial Nazari