TextView 的伸展和收缩效果

最新推荐文章于 2016-11-09 11:14:40 发布

墨色烟云

最新推荐文章于 2016-11-09 11:14:40 发布

阅读量995

点赞数 1

分类专栏： android

本文链接：https://blog.csdn.net/zp0203/article/details/51693497

版权

android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这是我的第一个博客，写的不好请各路大神敬请谅解。

经常看到一段文字一开始只显示几行，需要点击之后才会展开全部的内容。其实这个效果非常的简单，想法也简单。就是在文字太多，我们又不想让它占据太多的空间、只显示几行的时候，将后面的文字用省略号隐藏起来，点击后又把限制的行数要求去除。

文本是我们显示信息最常用的组件，TextView最主要的功能就是显示一段话了

我在这里主要说的是TextView 对文字的显示的伸展和收缩效果。
介绍一下等下会用到的属性

minLines：文本框最少占几行
maxLines：文本框最多占几行
lines：文本框默认占几行
ellipsize：（start,end,middle,marquee）文本内容超过TextView长度时是否显示省略。none不显示
1.android:ellipsize=”start”—–省略号显示在开头
2.android:ellipsize=”end”——省略号显示在结尾
3.android:ellipsize=”middle”—-省略号显示在中间
4.android:ellipsize=”marquee”–以跑马灯的方式显示(动画横向移动)
singleLine：实现多行，false，多行显示，true ，一行显示

如果你们想看更详细的属性介绍，可以看看宅学长的博客

先看下布局，就是一个TextView 一个Button

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical"
    tools:context="totem.demo.activity.OtherActivity">
<TextView
    android:id="@+id/id_tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    />
    <Button
        android:id="@+id/id_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="查看更多"/>
</LinearLayout>

再来就是初始化一下控件了。setMaxLines是设置下它第一次显示的最大行数，ellipsize使隐藏起来的文字用省略号代替

private void initview() {
        id_more= (Button) findViewById(R.id.id_more);
        id_tv= (TextView) findViewById(R.id.id_tv);
        String str="这个是实验点击后将隐藏起来的文字展现出来的textview，我的想法是点击后取消设置的maxliners，使文字可以全部出现。不知道能不能实现呢？";
        id_tv.setText(str);
        id_tv.setMaxLines(2);
        id_tv.setEllipsize(TextUtils.TruncateAt.END);//省略号在后面
    }

最后就是点击按钮的效果，我用一个变量more 来转换textview 是展开还是收缩的状态

boolean more;//用来转换状态
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.id_more:
                if(!more) {
                    id_tv.setSingleLine(false);//实现多行，TextView 伸展开
                    id_tv.setEllipsize(TextUtils.TruncateAt.END);//省略号在后面
                    id_more.setText("取消更多");
                    more=true;
                }else{
                    id_tv.setEllipsize(TextUtils.TruncateAt.END);//省略号在后面
                    id_tv.setLines(2);   //TextView 显示的行数为2
//                   id_liners.setSingleLine(true);//加上这个会只展现一行
                    id_more.setText("查看更多");
                    more=false;
                }
                break;

        }
    }