Swift 4中如何根据消息长度调整messageCell的宽度？

哈哈，这个问题我做聊天界面的时候踩过好几次坑！短消息（比如“ok”）变成超长椭圆气泡，核心原因是你的消息容器被设置了强制宽度约束，或者没有在限制最大宽度的同时让宽度由内容决定。下面给你一套通用思路+分平台的具体实现：

核心思路 #

要实现“短内容紧凑、长内容自适应换行并限制最大宽度”的效果，必须满足两个条件：

1. 消息容器的宽度由文本内容自动撑开，不能设置固定宽度，也不能同时约束左右两侧到父视图（否则会被强制拉满）；
2. 给容器设置最大宽度限制（比如屏幕宽度的70%），避免长文本撑满整个屏幕影响阅读。

分平台具体实现 #

iOS（Swift） #

假设你用UITableViewCell承载消息，里面放一个UILabel：

1. 给UILabel设置numberOfLines = 0，支持多行换行；
2. 配置Auto Layout约束（以对方发送的消息贴左为例）：
   • Label的左边缘到Cell左边缘，间距16pt；
   • Label的顶部、底部到Cell边缘，间距各8pt；
   • 关键：给Label添加**宽度小于等于屏幕70%**的约束，或者设置preferredMaxLayoutWidth = UIScreen.main.bounds.width * 0.7；
3. 开启Cell的自动高度计算：

   tableView.rowHeight = UITableView.automaticDimension
   tableView.estimatedRowHeight = 44 // 给一个预估高度
   

Android（Kotlin/XML） #

用RecyclerView的Item布局，推荐用ConstraintLayout：

1. 在XML中给TextView设置wrap_content宽度，同时限制最大宽度：

   <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">
   
       <TextView
           android:id="@+id/tv_message"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:maxWidth="250dp" <!-- 或者用百分比约束更灵活 -->
           android:padding="10dp"
           android:background="@drawable/message_bubble"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintWidth_max="wrap" />
   </androidx.constraintlayout.widget.ConstraintLayout>
   

   如果想用百分比适配不同屏幕，把maxWidth换成0dp，再加app:layout_constraintWidth_percent="0.7"，这样最大宽度就是父布局的70%。

Web/前端（CSS） #

用div作为消息气泡容器，核心是设置inline-block或者inline-flex让宽度由内容决定：

.message-bubble {
    display: inline-block; /* 关键：让容器宽度随内容变化 */
    max-width: 70%; /* 限制最大宽度 */
    padding: 8px 14px;
    background-color: #e5e5ea;
    border-radius: 18px;
    margin: 6px 0;
}

/* 自己发送的消息贴右对齐 */
.my-message {
    text-align: right;
}
.my-message .message-bubble {
    background-color: #007aff;
    color: white;
}

调试小技巧 #

如果还是有问题，可以检查这几点：

• 有没有给容器设置width: 100%（前端）或者match_parent（Android）？赶紧去掉；
• iOS里有没有给Label同时设置了左、右约束到父视图？只保留一侧的约束（左或右）；
• 气泡背景图是不是设置了拉伸模式？比如Android的background要设置center或者适配内容的缩放模式，不要强制拉伸。

这样设置后，短消息会变成紧凑的小气泡，长消息会自动换行并停在最大宽度，完美适配所有内容长度～

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