使用Android支持库Constraints替代maxWidth实现消息线程布局

我做聊天界面经常用这种方式，比硬写maxWidth适配性强太多了，下面一步步给你拆解实现思路和代码：

核心布局逻辑 #

用ConstraintLayout作为单条消息的根容器，通过百分比约束限制容器最大宽度为屏幕的4/5（也就是80%），再通过约束对齐控制发送方消息居右、接收方消息居左，配合带圆角背景的TextView和发送方头像就能搞定需求。

具体实现代码 #

先创建消息项的布局文件item_message.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- 发送方头像（仅发送方显示） -->
    <ImageView
        android:id="@+id/iv_sender_avatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_default_avatar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv_message_content"
        app:layout_constraintBottom_toBottomOf="@id/tv_message_content"
        android:marginStart="8dp"
        android:visibility="gone"/>

    <!-- 消息内容文本框 -->
    <TextView
        android:id="@+id/tv_message_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:text="这是一条测试消息，超长内容会自动换行，最大宽度不会超过屏幕五分之四哦"
        android:textColor="@color/white"
        android:background="@drawable/bg_message_sender"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.8"
        <!-- 默认按发送方配置，接收方在Adapter里动态调整约束 -->
        app:layout_constraintEnd_toStartOf="@id/iv_sender_avatar"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

关键细节说明 #

1. 宽度限制：
   通过app:layout_constraintWidth_percent="0.8"直接把TextView的最大宽度设为屏幕的80%，配合app:layout_constraintWidth_max="wrap"，当消息内容较短时，TextView会自动收缩到内容宽度，不会强行占满80%空间。

2. 对齐控制：

   • 发送方消息：保留tv_message_content的app:layout_constraintEnd_toStartOf="@id/iv_sender_avatar"，同时把头像设为可见，整体就会靠右对齐显示。
   • 接收方消息：隐藏头像，然后把TextView的约束改成app:layout_constraintStart_toStartOf="parent"，这样消息就会靠左对齐，同样受80%宽度限制，超长内容自动换行。

3. 圆角背景：
   可以创建两个drawable文件分别对应发送方和接收方的背景：

   • 发送方背景bg_message_sender.xml（右平左圆）：

     <?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
         <corners
             android:topLeftRadius="16dp"
             android:topRightRadius="0dp"
             android:bottomLeftRadius="16dp"
             android:bottomRightRadius="0dp"/>
         <solid android:color="#2196F3"/>
     </shape>
     

   • 接收方背景bg_message_receiver.xml（左平右圆）：

     <?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
         <corners
             android:topLeftRadius="0dp"
             android:topRightRadius="16dp"
             android:bottomLeftRadius="0dp"
             android:bottomRightRadius="16dp"/>
         <solid android:color="#E0E0E0"/>
     </shape>
     

4. Adapter动态调整：
   在RecyclerView的Adapter里，根据当前消息是发送方还是接收方，动态设置头像的可见性、TextView的背景和约束即可，比如：

   override fun onBindViewHolder(holder: MessageViewHolder, position: Int) {
       val message = messageList[position]
       with(holder) {
           tvMessageContent.text = message.content
           if (message.isSentByMe) {
               ivSenderAvatar.visibility = View.VISIBLE
               tvMessageContent.background = context.getDrawable(R.drawable.bg_message_sender)
               ConstraintLayout.LayoutParams(tvMessageContent.layoutParams).apply {
                   endToStart = ivSenderAvatar.id
                   startToStart = ConstraintLayout.LayoutParams.UNSET
               }.let { tvMessageContent.layoutParams = it }
           } else {
               ivSenderAvatar.visibility = View.GONE
               tvMessageContent.background = context.getDrawable(R.drawable.bg_message_receiver)
               ConstraintLayout.LayoutParams(tvMessageContent.layoutParams).apply {
                   startToStart = ConstraintLayout.LayoutParams.PARENT_ID
                   endToStart = ConstraintLayout.LayoutParams.UNSET
               }.let { tvMessageContent.layoutParams = it }
           }
       }
   }
   

这样就完全替代了maxWidth的实现方式，用ConstraintLayout的约束实现了更灵活的宽度控制和对齐，完美适配各种屏幕尺寸。

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