Android TextView模拟打字效果：解决文本换行跳动问题

问题描述 #

在Android中使用TextView实现逐字打字效果时，整体表现正常，但每次单词换行时会出现文本跳动的问题。即使改为逐词打字，该问题依然存在，希望保留逐字打字模式，同时不想禁用自动换行（禁用后排版不符合预期，不希望单词跨行显示）。

原实现代码 #

private void typeText() {
        new Handler(Looper.getMainLooper()).postDelayed(() -> {
            if (!isAdded()) return;
            if (currentMessagePos++ >= currentMessage.length()) {
                messageTextView.setText(currentMessage);
                onTypeCompleted();
                return;
            }
            messageTextView.setText(currentMessage.substring(0, currentMessagePos));

//            int p = currentMessage.indexOf(" ", currentMessagePos + 1);
//            if (p != -1 && p - currentMessagePos < 3)
//                p = currentMessage.indexOf(" ", p + 1);
//            if (p == -1) {
//                messageTextView.setText(currentMessage);
//                onTypeCompleted();
//                return;
//            }
//            messageTextView.setText(currentMessage.substring(0, p));
//            currentMessagePos = p;
            typeText();
        }, 20);
    }

问题根源 #

原实现每次调用setText()都会让TextView重新计算文本布局，当添加的字符刚好触发换行时，TextView的行高、行宽会重新调整，导致视觉上的文本跳动。

解决方案：使用Spannable逐字显示（保持布局稳定） #

核心思路是让TextView始终加载完整文本，通过修改字符的透明度来实现逐字显示效果，避免每次修改文本内容触发布局重计算。

实现步骤 #

1. 初始化时创建包含完整文本的SpannableStringBuilder，并将所有字符设置为透明；
2. 逐字将透明字符切换为正常文本颜色，完成打字动画。

修改后的代码 #

private SpannableStringBuilder spannableContent;
private int currentTypePos = 0;
private String currentMessage; // 要显示的完整文本
private TextView messageTextView;

// 初始化方法（比如在onCreateView或onViewCreated中）
private void initTypeAnimation() {
    spannableContent = new SpannableStringBuilder(currentMessage);
    // 先将所有字符设置为透明
    spannableContent.setSpan(
        new ForegroundColorSpan(Color.TRANSPARENT),
        0,
        currentMessage.length(),
        Spannable.SPAN_INCLUSIVE_EXCLUSIVE
    );
    messageTextView.setText(spannableContent);
    // 启动打字动画
    typeText();
}

private void typeText() {
    new Handler(Looper.getMainLooper()).postDelayed(() -> {
        if (!isAdded()) return;
        if (currentTypePos >= currentMessage.length()) {
            onTypeCompleted();
            return;
        }
        // 将当前位置的字符切换为正常文本颜色
        spannableContent.setSpan(
            new ForegroundColorSpan(messageTextView.getCurrentTextColor()),
            currentTypePos,
            currentTypePos + 1,
            Spannable.SPAN_INCLUSIVE_EXCLUSIVE
        );
        currentTypePos++;
        typeText();
    }, 20);
}

补充说明 #

• 该方案中TextView的文本内容始终是完整的，仅通过Spannable修改字符颜色，因此布局不会重新计算，彻底解决换行跳动问题；
• 若需要调整打字速度，直接修改postDelayed的延迟时间即可；
• 如需支持文本样式（如加粗、斜体），可在初始化Spannable时预先设置对应样式，再配合透明度切换实现动画。

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