如何在嵌套ConstraintLayout中实现圆形JPG头像及TextView约束

一、将JPG图片转为圆形头像 #

这里提供三种实用方案，覆盖不同场景需求：

方案1：使用官方Jetpack ShapeableImageView（推荐） #

无需额外引入第三方库，直接用AndroidX原生控件实现：

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/iv_avatar"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:src="@drawable/your_jpg_avatar"
    app:shapeAppearanceOverlay="@style/CircleImageView" />

在styles.xml中定义圆形样式：

<style name="CircleImageView">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

需要添加边框的话，可追加app:strokeWidth="2dp"和app:strokeColor="@color/white"属性。

方案2：使用第三方CircleImageView库 #

在Module级别的build.gradle中添加依赖：

implementation 'de.hdodenhof:circleimageview:3.1.0'

布局中直接使用该控件：

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/iv_avatar"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:src="@drawable/your_jpg_avatar"
    app:civ_border_width="2dp"
    app:civ_border_color="@color/white" />

方案3：通过图片加载库做圆形变换 #

如果使用Glide加载图片，直接调用内置的圆形裁剪方法：

Glide.with(this)
    .load(R.drawable.your_jpg_avatar)
    .circleCrop()
    .into(binding.ivAvatar)

使用Picasso的话，需要自定义圆形变换类（可直接复用网上现成实现）：

Picasso.get()
    .load(R.drawable.your_jpg_avatar)
    .transform(CircleTransform())
    .into(ivAvatar)

二、ConstraintLayout内三个TextView的正确约束（仿WhatsApp聊天项） #

以下是完整的内层ConstraintLayout布局代码，完美匹配目标效果：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <!-- 圆形头像 -->
    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/iv_avatar"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/your_jpg_avatar"
        app:shapeAppearanceOverlay="@style/CircleImageView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!-- 联系人名称 -->
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="联系人名称"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/iv_avatar"
        app:layout_constraintTop_toTopOf="@+id/iv_avatar"
        app:layout_constraintEnd_toStartOf="@+id/tv_time"
        app:layout_constraintHorizontal_bias="0" />

    <!-- 消息时间 -->
    <TextView
        android:id="@+id/tv_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10:30"
        android:textSize="12sp"
        android:textColor="@color/gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tv_name" />

    <!-- 消息预览 -->
    <TextView
        android:id="@+id/tv_message_preview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="这是一条消息预览内容，超过一行会自动省略"
        android:textSize="14sp"
        android:textColor="@color/dark_gray"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintStart_toStartOf="@+id/tv_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/iv_avatar" />

</androidx.constraintlayout.widget.ConstraintLayout>

核心约束逻辑：

• 头像垂直居中，左对齐父布局
• 名称TextView左贴头像右侧，顶部对齐头像顶部，右侧约束到时间控件左侧，宽度设为0dp自动填充剩余空间
• 时间TextView右对齐父布局，顶部与名称控件对齐
• 消息预览左对齐名称控件，顶部贴名称下方，右对齐父布局，底部与头像对齐，设置单行省略保证排版整洁

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