如何实现支持按钮与自由文本的多行EditText（仿StackOverflow标签框）

嘿，这个需求我刚好有过类似的落地经验，StackOverflow的标签输入框确实是个很经典的交互场景——既要支持灵活的多行输入，又要让标签按钮和输入文本无缝融合，咱们一步步来拆解可行的技术方向：

一、优先推荐：自定义Span实现原生EditText融合方案 #

这是最贴合你需求的方案，核心是利用EditText的SpannableString能力，把标签直接嵌入文本流中，完全复用EditText的多行排版逻辑，从根源解决换行时的布局混乱问题：

• 自定义标签Span：继承ReplacementSpan（或ClickableSpan+BackgroundColorSpan的组合），自己控制标签的绘制样式——比如圆角背景、内边距、文字颜色，让它看起来和按钮一模一样。同时通过ClickableSpan给标签添加点击事件，实现点击删除标签的逻辑。
• 控制编辑权限：给标签Span设置InputFilter或通过Editable.Factory，标记这些Span区域为不可编辑，用户不能直接修改标签内容，只能通过点击删除。
• 输入自动转换逻辑：给EditText添加TextWatcher，监听用户输入：
  • 当用户输入分隔符（比如空格、逗号）时，自动把光标前的文本转换成标签Span，插入到文本流中；
  • 当用户按下回车键时，直接换行输入普通文本，不触发标签转换，和StackOverflow的交互完全一致。

这个方案的优势在于完全依托原生EditText的排版系统，换行、滚动、光标定位都不需要额外处理，标签会和普通文本一样自然换行，不会出现你担心的“矩形形态破坏”问题。

二、备选方案：FlexboxLayout+动态EditText组合 #

如果你觉得自定义Span的绘制逻辑有点复杂，可以试试这个布局组合方案，优化你之前的思路：

• 用FlexboxLayout（官方流式布局控件）作为容器，里面动态添加标签按钮，最后放置一个宽度wrap_content、高度wrap_content的EditText；
• 这个EditText只负责承载用户当前正在输入的内容，当用户输入分隔符或者点击添加标签按钮时，把EditText的内容提取出来，转换成标签按钮添加到FlexboxLayout中，然后清空EditText；
• 给EditText设置OnEditorActionListener，处理回车键换行的需求——直接在EditText中换行即可，FlexboxLayout会自动根据内容调整EditText的位置。

这个方案的好处是标签可以直接用现成的Button/TextView组件，样式定制更简单，不需要处理Span的绘制逻辑。需要注意的是要处理好EditText的焦点问题（比如添加新标签后自动把焦点切回EditText），以及EditText的自适应高度（可以通过addTextChangedListener动态调整高度）。

关于你之前思路的补充 #

• 你提到的“将EditText部分内容设为不可编辑”，其实就是Span方案的核心逻辑，自定义Span可以精准控制哪些区域不可编辑、可交互；
• 至于“叠加按钮尺寸大于底层文本”的问题，用Span方案完全可以避免——因为标签的绘制区域是和文本行高对齐的，你可以在自定义Span中设置内边距，让标签的高度和文本行高匹配，不会出现错位或者超出的情况。

如果还有细节没捋清楚，手绘示意图肯定能帮咱们更精准地对齐需求！

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