如何让ImageView对齐TextView文本末尾 二者末端均约束到CheckBox

问题根源 #

你当前的TextView同时配置了start和end双向约束，在ConstraintLayout中，wrap_content宽度的控件如果同时有双向约束，默认会被拉伸至占满两个约束之间的全部空间，所以TextView的实际宽度远大于文本本身的宽度，end drawable自然会显示在最靠近CheckBox的位置，而不是跟随文本末尾。

解决方案（你当前使用end drawable的场景） #

只需要给tvMerchantTitle新增一个layout_constrainedWidth属性即可，修改后的TextView配置如下：

<TextView
    android:id="@+id/tvMerchantTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/margin4"
    android:layout_marginEnd="@dimen/margin8"
    android:layout_marginStart="@dimen/margin16"
    android:drawablePadding="@dimen/padding4"
    android:ellipsize="middle"
    android:maxWidth="@dimen/width200"
    android:singleLine="true"
    android:textSize="@dimen/textSize12"
    app:layout_constrainedWidth="true" <!-- 新增这一行 -->
    app:layout_constraintBottom_toTopOf="@id/tvMerchantSubtitle"
    app:layout_constraintEnd_toStartOf="@id/cbMerchantSelect"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintStart_toEndOf="@id/ivMerchantLogo"
    app:layout_constraintTop_toTopOf="@id/ivMerchantLogo" />

这个属性的作用是让同时有双向约束的wrap_content控件优先适配内容宽度，只有当内容宽度超过两个约束的间距时，才会被压缩到约束范围内，原本的maxWidth、ellipsize属性会正常生效。

如果你后续要改成独立ImageView的实现 #

如果你不想用drawable的方式，要单独放一个ImageView在文本末尾，约束规则如下：

• 给TextView设app:layout_constrainedWidth="true"，end约束到ImageView的start
• ImageView设wrap_content宽高，start约束到TextView的end，end约束到CheckBox的start
• 两者的垂直约束保持和原来对齐即可，文本短的时候ImageView会跟在文本末尾，文本长的时候TextView自动压缩，ImageView靠在CheckBox左侧。

Glide代码补充优化（可选） #

你当前的Glide代码逻辑没问题，建议在设置drawable前手动给resource设置下bounds，避免部分场景下drawable显示大小异常：

@Override
public void onResourceReady(
    Drawable resource,
    com.bumptech.glide.request.transition.Transition<? super Drawable> transition
) {
    resource.setBounds(0, 0, resource.getIntrinsicWidth(), resource.getIntrinsicHeight());
    mBinding.inPaymentMethod.tvMerchantTitle.setCompoundDrawablesWithIntrinsicBounds(
        null,
        null,
        resource,
        null
    );
}

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