Android 实现视图文本TextView的展开与收缩功能

Posted 2021-08-07 路 宇

先看效果图：

步骤一：
创建ExpandTabTextView类拓展TextView 和 text_expand.xml
具体详解已经在代码中详细的注释了出来

public class ExpandTabTextView extends LinearLayout implements View.OnClickListener {
    //声明上下文对象
    private Context context;
    //声明文本视图对象
    private TextView text_view;
    //声明按钮对象
    private Button btn;
    //正常显示的行数
    private int line_number = 3;
    //是否被选中
    private boolean isSelect = false;

    public ExpandTabTextView(Context context) {
        super(context);
    }

    public ExpandTabTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        //从布局文件中获取展示内容
        LayoutInflater.from(context).inflate(R.layout.text_expand, this, true);
    }

    //在布局展示完毕后调用，因为getLineHeight方法(获取TextView的行高)要等渲染完成后才能得知具体高度
    //行高是指一行文字上方距离下一行文字上方的距离。
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //从布局文件中获取名叫ll_content的线性布局
        LinearLayout ll_content = findViewById(R.id.ll_content);
        //设置布局的点击事件
        btn=findViewById(R.id.btn);
        btn.setText("查看更多");
        btn.setOnClickListener(this);
        //从布局文件中获取text_view的文本视图
        text_view = findViewById(R.id.text_view);
        //设置文本的高度为n行文字这么高
        /*TextView的首行和最后一行有一个额外的padding间距，
          这导致实际行高要大于getLineHeight()方法得到的行高
          所以在设置文本高度时：（普通行高+6）*行数
        */
        text_view.setHeight((text_view.getLineHeight() + 6) * line_number);
    }

    //设置文本内容
    public void setText(String content) {
        text_view.setText(content);
    }

    //设置文本的资源编号
    public void setText(int id) {
        setText(context.getResources().getString(id));
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn) {
            isSelect = !isSelect;
            //清除文本视图的动画
            text_view.clearAnimation();
            final int deltaValue;
            //获得文本视图的实际高度
            final int startValue = text_view.getHeight();
            if (isSelect) {//如果选中则展开后面的所有文字  getLineCount():获取TextView文字行数
                //结果为新增的文本视图的高度
                deltaValue = (text_view.getLineHeight() + 6) * text_view.getLineCount() - startValue;
                btn.setText("隐藏更多");
            } else {
                //结果为0
                deltaValue = (text_view.getLineHeight() + 6) * line_number - startValue;
                btn.setText("查看更多");
            }
            //创建一个文字展开 收缩动画
            Animation animation = new Animation() {
                //该方法就是动画的具体实现
                /*
                    第一个参数：interpolatedTime代表动画的时间进行比。
                    不管动画实际的持续时间如何，当动画播放时，该参数总是自动从0变化到1
                    第二个参数：Transformation t代表了补间动画在不同时刻对图形或组件的变形程度。
                 */
                @Override
                protected void applyTransformation(float interpolatedTime, Transformation t) {
                    //随着时间的流逝重新设置文本的行高
                    text_view.setHeight((int) (startValue + deltaValue * interpolatedTime));
                }
            };
            //设置动画的持续时间为500毫秒
            animation.setDuration(500);
            //开始文本视图的动画展示
            text_view.startAnimation(animation);
        }
    }
}

text_expand.xml 布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/ll_content"
    >
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="20sp" />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="查看更多"
        />
</LinearLayout>

到这一步基本上已经大功告成了，把这个拓展的ExpandTabTextView在布局中使用即可。
步骤二：创建main.xml 使用ExpandTabTextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.expand.view.ExpandTabTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/expand"
        />
</LinearLayout>

创建MainActivity获取拓展TextView的实例，并且通过代码传入文本内容：

public class MainActivity extends AppCompatActivity {
    private ExpandTabTextView expand;
    //文本内容写在了values目录下的strings.xml中
    private int[] newsArray = {R.string.news1, R.string.news2, R.string.news3, R.string.news4};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        expand = findViewById(R.id.expand);
        int seq = (int) (Math.random() * 100 % 4);
        //设置展开布局的文本内容
        expand.setText(newsArray[seq]);
    }
}

以上就是实现展开与收缩文本功能的基本步骤，内容很简单，自己做下总结，也希望能帮助正好有此需求的人~ 有不当之处在评论区指正就行！