android Textview 使用之一:伸缩效果

android开发过程中,经常遇到Textview展示不完全的情况。

遇到此情况,通常的处理是:

方案一,Textview添加android:ellipsize属性,让展示不完的部分使用省略号代替。然后给Textview设置点击事件跳转到另一个Activity让其显示完全。

方案二,我们在很多应用中都能看到有向下的箭头或者“查看详情”的字样,点击后他会自动撑开,让TextView显示完整。

原来我们的项目里都是用的第一种方法,很显然,太不高大上了。今天找到了一种既简单又高大上的方法。

下面来看下Demo例子的收起效果,文本内容没有展示完全,使用省略号代替,提示“更多”和向下箭头标识,截图如下


对于以上效果,实现思路如下:
1、设置Textview默认展示固定行,比如3行,内容展示不完全,在Textview尾部使用省略号代替。
xml文件内容为:

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="left"
            android:background="@drawable/ico_jianjie"/>

        <TextView
            android:id="@+id/tv_teamdetail_introduce"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:ellipsize="end"
            android:maxLines="2"
            android:singleLine="false"
            android:textColor="@color/dark_grey"
            android:textSize="@dimen/text_size_small"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_teamdetail_good"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="15dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="left"
            android:background="@drawable/ico_shanchang"/>

        <TextView
            android:id="@+id/tv_teamdetail_good"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:ellipsize="end"
            android:maxLines="2"
            android:singleLine="false"
            android:textColor="@color/dark_grey"
            android:textSize="@dimen/text_size_small"/>


    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:id="@+id/ll_teamdetail_all"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_marginTop="1dp"
    android:background="@color/btn_white_selector"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_all_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="查看详情"
        android:textColor="@color/dark_grey"
        android:textSize="@dimen/text_size_minor"/>

    <ImageView
        android:id="@+id/iv_teamdetail_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_gravity="center"
        android:layout_marginLeft="5dp"
        android:rotation="90"
        android:src="@drawable/ico_jiantou"/>
</LinearLayout>

2、点击“查看详情”和向下箭头时,通过Textview的setMaxLines()方法改变Textview的最大行数。即可实现上述效果。

Java代码为:
private static final int CONTENT_MAX_LINE = 2;// 默认展示最大行数3
ll_teamdetail_all.setOnClickListener(new View.OnClickListener() {
    Boolean flag = true;//textview是否展开
    @Override
    public void onClick(View view) {
        if (flag) {
            flag = false;
            tv_teamdetail_introduce.setMaxLines(Integer.MAX_VALUE);
            tv_teamdetail_introduce.requestLayout();
            tv_teamdetail_introduce.setEllipsize(null); // 展开
            tv_teamdetail_good.setMaxLines(Integer.MAX_VALUE);
            tv_teamdetail_good.requestLayout();
            tv_teamdetail_good.setEllipsize(null); // 展开
            iv_teamdetail_all.setRotation(-90);
        } else {
            flag = true;
            tv_teamdetail_introduce.setMaxLines(CONTENT_MAX_LINE);
            tv_teamdetail_introduce.requestLayout();
            tv_teamdetail_introduce.setEllipsize(TextUtils.TruncateAt.END); // 收缩
            tv_teamdetail_good.setMaxLines(CONTENT_MAX_LINE);
            tv_teamdetail_good.requestLayout();
            tv_teamdetail_good.setEllipsize(TextUtils.TruncateAt.END); // 收缩
            iv_teamdetail_all.setRotation(90);
        }
    }
});
3.值得注意的一点就是箭头的处理,当展开或者收缩时,箭头的方向也是跟着改变的,并且它改变的度数是以最原始的位置计算的。

Textview的伸缩就探讨到这里。有问题,大家可以留言。由于特别简单,就不附全码了。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值