巧用TextView，"查看更多"取代自带省略号，实现优雅展开动画

Android

2024-01-29 04:18:19

前言

作为一名技术博客创作专家，我常以独特的视角审视事物，并在此基础上构建文章。这次，我们把目光投向Android中常见的TextView，探讨如何巧妙地用"查看更多"替代自带的省略号，同时实现一个高效且优雅的展开折叠动画。

TextView的默认省略方式

Android TextView提供了ellipsize属性来处理文本超出显示范围的情况。它支持两种常用的省略方式：

END： 从文本末尾开始省略
MIDDLE： 从文本中间开始省略

然而，这两种方式都有其局限性：

END：省略后文本不完整，用户无法得知省略的内容
MIDDLE：省略后文本前后不完整，影响阅读体验

"查看更多"的优势

相比之下，"查看更多"更具用户友好性：

完整性： 保留了原文内容，不会因省略而丢失信息
可控性： 用户可以主动控制文本展开或折叠
美观性： "查看更多"作为一种自定义文本，可以与应用整体风格相匹配

实现步骤

1. 布局设置

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="这是一段很长的文本，需要省略以适应屏幕宽度。" />

    <TextView
        android:id="@+id/btn_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="查看更多" />

</LinearLayout>

2. Java代码

TextView textView = findViewById(R.id.text_view);
TextView btnToggle = findViewById(R.id.btn_toggle);

// 设置最大行数
textView.setMaxLines(2);
// 设置省略方式为END
textView.setEllipsize(TruncateAt.END);

// 设置"查看更多"按钮的点击事件
btnToggle.setOnClickListener(v -> {
    if (textView.getMaxLines() == 2) {
        // 展开文本
        textView.setMaxLines(Integer.MAX_VALUE);
        btnToggle.setText("收起");
    } else {
        // 折叠文本
        textView.setMaxLines(2);
        btnToggle.setText("查看更多");
    }
});

3. 动画效果

为了让展开和折叠动画更流畅，可以添加动画代码：

// 展开动画
textView.animate()
    .alpha(1)
    .setDuration(300)
    .setInterpolator(new AccelerateDecelerateInterpolator())
    .start();

// 折叠动画
textView.animate()
    .alpha(0)
    .setDuration(300)
    .setInterpolator(new AccelerateDecelerateInterpolator())
    .start();