Android实现Drawable与TextView首行文本居中对齐适配

问题根源 #

原布局依赖LinearLayout的center_vertical属性实现对齐，但当系统字体放大导致文本变为多行时，图标会与整个文本块的垂直中心对齐，不符合"多行时图标与首行居中对齐"的需求；若改为top对齐，又会破坏单行文本的居中效果。

方案一：使用ConstraintLayout（推荐，纯XML实现） #

通过ConstraintLayout的基线对齐特性，确保图标与文本首行精准对齐，同时保持容器垂直居中，自动适配单行/多行场景：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="450dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <ImageView
            android:id="@+id/iv_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_info"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBaseline_toBaselineOf="@+id/tv_content"
            app:layout_constraintVertical_bias="0" />

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="Aaa bbbb cc dd ee ff ggggg hh kkkkkkkk"
            android:textSize="14sp"
            app:layout_constraintStart_toEndOf="@+id/iv_info"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

关键逻辑：

• layout_constraintBaseline_toBaselineOf：让图标与文本的基线对齐，确保首行文本与图标在垂直方向视觉居中（可微调ImageView的margin优化对齐效果）
• 容器高度为wrap_content，配合父布局的gravity="center"，单行文本时整个块自动居中；多行时图标随首行基线对齐，满足需求。

方案二：单个TextView+动态Gravity（简洁灵活） #

将图标作为TextView的drawableStart，通过代码判断文本行数，动态切换对齐方式：

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_info_content"
        android:layout_width="450dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:drawableStartCompat="@drawable/ic_info"
        android:drawablePadding="8dp"
        android:text="Aaa bbbb cc dd ee ff ggggg hh kkkkkkkk"
        android:textSize="14sp"
        tools:drawableStart="@drawable/ic_info" />

</LinearLayout>

代码逻辑（Kotlin）

val tvInfo = findViewById<TextView>(R.id.tv_info_content)
tvInfo.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        tvInfo.viewTreeObserver.removeOnGlobalLayoutListener(this)
        tvInfo.gravity = if (tvInfo.lineCount == 1) {
            Gravity.CENTER_VERTICAL or Gravity.START
        } else {
            Gravity.TOP or Gravity.START
        }
    }
})

关键逻辑：

• 用drawableStart整合图标与文本，减少布局层级
• 通过ViewTreeObserver监听布局完成，判断文本行数：单行时设置CENTER_VERTICAL确保居中，多行时设置TOP让图标与首行对齐

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