Android 保持 TextView 的 drawableLeft 与居中的动态文本对齐
Android keep TextView's drawableLeft aligned to centered dynamic text
我在下图中选择的TextView有问题,我用的是ConstraintLayout。
在为多种语言放置一些字符串资源文件后,我遇到了 TextView 与其他视图重叠的情况,因为新字符串太长并且我使用的宽度为 wrap_content。所以我从 wrap_content 更改为 match_constraint 并且 TextView 在多行上换行,这很好,但是现在附加到 TextView 左侧的 drawable 在字符串的情况下离文本太远是短。那是因为我使用的是重心,它在文本和可绘制对象之间留下了很大的空白间隙。
看来我找不到不影响多行字符串的解决方案。可以对每种极端情况语言进行硬编码,现在应该不是问题,但随着我扩展到更多语言,它不是理想的解决方案。
试图通过代码而不是 xml 来解决它,如果 TextView 的 lineCount 为 1,那么我需要使用 wrap_content 而不是 match_parent,因为它不重叠,但我似乎工作不一致,因为视图绘制未完成并且屏幕旋转存在问题。
这就是我想要的:
这是我得到的:
这是我的 xml,如果它有帮助,我不介意将它分成多个组件,但到目前为止,一个带有 drawableLeft 的 TextView 就足够了。谢谢。
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/header_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/back_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:drawablePadding="10dp"
android:textColor="#D3DDDD"
android:textSize="14sp"
android:visibility="invisible"
app:drawableStartCompat="@drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/refresh_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:drawablePadding="8dp"
android:gravity="center"
android:text="@string/pull_down_to_refresh"
android:textColor="@color/white"
android:textSize="14sp"
app:drawableStartCompat="@drawable/refresh"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/legend"
app:layout_constraintStart_toEndOf="@+id/back_text"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/rotation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:src="@drawable/rotate_device"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/legend"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@+id/rotation"
android:src="@drawable/legend_inactive"
app:layout_constraintBottom_toBottomOf="@+id/rotation"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toStartOf="@+id/rotation"
app:layout_constraintTop_toTopOf="@+id/rotation" />
</androidx.constraintlayout.widget.ConstraintLayout>
对于你的 use-case 你可以使用 MaterialButton
因为它提供了 icon
并且对你的情况非常重要 iconGravity=textStart
.
所以你的布局看起来像这样:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/header_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/back_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:drawablePadding="10dp"
android:textColor="#D3DDDD"
android:textSize="14sp"
android:visibility="invisible"
app:drawableStartCompat="@drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/refresh_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:drawablePadding="8dp"
android:gravity="center"
android:text="Pull to refreshmckdmcdkmckdsmckdsmckdcm"
android:textColor="@color/white"
android:textSize="14sp"
android:background="@android:color/transparent"
app:icon="@drawable/refresh"
app:iconGravity="textStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/legend"
app:layout_constraintStart_toEndOf="@+id/back_text"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/rotation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:src="@drawable/rotate_device"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/legend"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@+id/rotation"
android:src="@drawable/legend_inactive"
app:layout_constraintBottom_toBottomOf="@+id/rotation"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toStartOf="@+id/rotation"
app:layout_constraintTop_toTopOf="@+id/rotation" />
</androidx.constraintlayout.widget.ConstraintLayout>
长文本输出:
短文本输出:
我在下图中选择的TextView有问题,我用的是ConstraintLayout。
在为多种语言放置一些字符串资源文件后,我遇到了 TextView 与其他视图重叠的情况,因为新字符串太长并且我使用的宽度为 wrap_content。所以我从 wrap_content 更改为 match_constraint 并且 TextView 在多行上换行,这很好,但是现在附加到 TextView 左侧的 drawable 在字符串的情况下离文本太远是短。那是因为我使用的是重心,它在文本和可绘制对象之间留下了很大的空白间隙。
看来我找不到不影响多行字符串的解决方案。可以对每种极端情况语言进行硬编码,现在应该不是问题,但随着我扩展到更多语言,它不是理想的解决方案。
试图通过代码而不是 xml 来解决它,如果 TextView 的 lineCount 为 1,那么我需要使用 wrap_content 而不是 match_parent,因为它不重叠,但我似乎工作不一致,因为视图绘制未完成并且屏幕旋转存在问题。
这就是我想要的:
这是我得到的:
这是我的 xml,如果它有帮助,我不介意将它分成多个组件,但到目前为止,一个带有 drawableLeft 的 TextView 就足够了。谢谢。
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/header_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/back_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:drawablePadding="10dp"
android:textColor="#D3DDDD"
android:textSize="14sp"
android:visibility="invisible"
app:drawableStartCompat="@drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/refresh_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:drawablePadding="8dp"
android:gravity="center"
android:text="@string/pull_down_to_refresh"
android:textColor="@color/white"
android:textSize="14sp"
app:drawableStartCompat="@drawable/refresh"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/legend"
app:layout_constraintStart_toEndOf="@+id/back_text"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/rotation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:src="@drawable/rotate_device"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/legend"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@+id/rotation"
android:src="@drawable/legend_inactive"
app:layout_constraintBottom_toBottomOf="@+id/rotation"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toStartOf="@+id/rotation"
app:layout_constraintTop_toTopOf="@+id/rotation" />
</androidx.constraintlayout.widget.ConstraintLayout>
对于你的 use-case 你可以使用 MaterialButton
因为它提供了 icon
并且对你的情况非常重要 iconGravity=textStart
.
所以你的布局看起来像这样:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/header_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/back_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:drawablePadding="10dp"
android:textColor="#D3DDDD"
android:textSize="14sp"
android:visibility="invisible"
app:drawableStartCompat="@drawable/left_arrow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/refresh_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:drawablePadding="8dp"
android:gravity="center"
android:text="Pull to refreshmckdmcdkmckdsmckdsmckdcm"
android:textColor="@color/white"
android:textSize="14sp"
android:background="@android:color/transparent"
app:icon="@drawable/refresh"
app:iconGravity="textStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/legend"
app:layout_constraintStart_toEndOf="@+id/back_text"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/rotation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:src="@drawable/rotate_device"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/legend"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="10dp"
android:layout_toStartOf="@+id/rotation"
android:src="@drawable/legend_inactive"
app:layout_constraintBottom_toBottomOf="@+id/rotation"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toStartOf="@+id/rotation"
app:layout_constraintTop_toTopOf="@+id/rotation" />
</androidx.constraintlayout.widget.ConstraintLayout>
长文本输出:
短文本输出: