实现Instagram式圆角背景文本时ReplacementSpan致EditText多行失效

我帮你分析下问题所在，然后给出对应的解决方案：

问题根源 #

1. 自动换行失效：你用了ReplacementSpan并把整个EditText文本设为一个span，这个Span会把所有文本替换成一个自定义绘制的独立块，EditText会把它当成单个元素，自然不会触发自动换行。
2. 圆角样式不符：原来的代码绘制的是覆盖所有文本的大圆角矩形，多行时中间行的上下也有圆角，和Instagram那种“整体块圆角、中间行无缝衔接”的效果不一致。

解决方案 #

改用LineBackgroundSpan来实现，它可以针对每行文本绘制背景，完全不干扰EditText的原生换行逻辑，同时能精准控制每行的圆角样式。

修改后的Java代码 #

public class EditextActivity extends AppCompatActivity {
    EditText edittext;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.editext_screen);
        edittext = findViewById(R.id.edittext);
        
        // 初始化添加圆角背景Span
        updateBackgroundSpan(edittext.getText());
        
        // 监听文本变化，确保Span始终覆盖所有内容
        edittext.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                updateBackgroundSpan(s);
            }

            @Override
            public void afterTextChanged(Editable s) {}
        });
    }

    private void updateBackgroundSpan(CharSequence text) {
        // 先移除旧的Span，避免重复叠加
        InstagramRoundedBackgroundSpan[] spans = edittext.getText().getSpans(0, text.length(), InstagramRoundedBackgroundSpan.class);
        for (InstagramRoundedBackgroundSpan span : spans) {
            edittext.getText().removeSpan(span);
        }
        // 添加新的Span覆盖全部文本
        edittext.getText().setSpan(new InstagramRoundedBackgroundSpan(Color.RED, Color.WHITE), 
                                   0, text.length(), 
                                   Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    }

    public static class InstagramRoundedBackgroundSpan implements LineBackgroundSpan {
        private static final int CORNER_RADIUS = 15;
        private static final int PADDING_X = 10; // 左右内边距
        private static final int PADDING_Y = 5;  // 上下内边距
        private final int mBackgroundColor;

        public InstagramRoundedBackgroundSpan(int backgroundColor, int textColor) {
            mBackgroundColor = backgroundColor;
        }

        @Override
        public void drawBackground(Canvas canvas, Paint paint, int left, int right, int top, int baseline, int bottom, CharSequence text, int start, int end, int lineNumber) {
            TextView textView = (TextView) canvas.getClipBounds().getOwner();
            Layout layout = textView.getLayout();
            
            // 计算当前行文本的实际宽度
            float textWidth = paint.measureText(text, start, end);
            // 计算背景的边界（加上内边距）
            float bgLeft = left + PADDING_X;
            float bgRight = left + textWidth + PADDING_X * 2;
            float bgTop = top - PADDING_Y;
            float bgBottom = bottom + PADDING_Y;

            // 判断当前行是第一行、最后一行还是中间行
            boolean isFirstLine = lineNumber == 0;
            boolean isLastLine = lineNumber == layout.getLineCount() - 1;

            // 针对不同行设置对应的圆角
            float[] radii = new float[]{
                isFirstLine ? CORNER_RADIUS : 0, isFirstLine ? CORNER_RADIUS : 0, // 左上
                isFirstLine ? CORNER_RADIUS : 0, isFirstLine ? CORNER_RADIUS : 0, // 右上
                isLastLine ? CORNER_RADIUS : 0, isLastLine ? CORNER_RADIUS : 0,  // 右下
                isLastLine ? CORNER_RADIUS : 0, isLastLine ? CORNER_RADIUS : 0   // 左下
            };

            // 绘制带不同圆角的背景路径
            Paint bgPaint = new Paint(paint);
            bgPaint.setColor(mBackgroundColor);
            bgPaint.setAntiAlias(true);
            
            Path bgPath = new Path();
            bgPath.addRoundRect(new RectF(bgLeft, bgTop, bgRight, bgBottom), radii, Path.Direction.CW);
            canvas.drawPath(bgPath, bgPaint);
        }
    }
}

调整后的XML布局 #

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:layout_gravity="center" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <EditText
        android:padding="5dp"
        android:id="@+id/edittext"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:gravity="center_vertical"
        android:hint="Type something..."
        android:singleLine="false"
        android:inputType="textMultiLine"
        android:textSize="30sp"
        android:maxWidth="200dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

关键改进点 #

• 自动换行恢复：LineBackgroundSpan只负责绘制每行背景，不改变EditText的文本布局逻辑，所以固定宽度下会自动换行。
• Instagram式圆角：通过判断行位置，给第一行顶部圆角、最后一行底部圆角，中间行上下无圆角，实现整体块的圆角效果，和Instagram一致。
• 动态文本适配：添加文本变化监听，确保用户输入/删除内容时，背景Span始终覆盖全部文本，不会出现部分内容无背景的情况。

内容的提问来源于stack exchange，提问作者karanatwal.github.io