带动画折叠TextView,“展开”按钮与文字同行,且远离文字

该博客介绍了如何创建一个TextView,当文字超过两行时显示折叠效果,带有动画的展开按钮。详细阐述了不同文字长度时的显示规则,并提供了源码实现。通过设置两个TextView,一个用于实际内容,一个用于临时展示,确保点击展开功能的正确执行。
摘要由CSDN通过智能技术生成

需求:
1、TextView加载文字,如果文字不多余两行,直接展示,“展开”按钮隐藏
2、如果文字大于2行,默认展示2行,在第二行,文字结尾处以 省略号 结尾,且在控件右下角出现“展开”按钮
3、如果文字展示的最后一行,文字结尾处距离控件终点距离较近,或完整展示N(N>2)行,则,“展开”按钮在下一行的终点处

效果图如下:
1、文字不大于2行
在这里插入图片描述
2、文字大于2行的默认展示
在这里插入图片描述
3、文字终点处,剩余空间足够展示 “展开”按钮
在这里插入图片描述
4、文字终点处,剩余空间不足以展示 “展开”按钮
在这里插入图片描述
在这里插入图片描述
实现:以下均为源码,直接复制即可使用

:计算过程中,计算的数值,和布局中的值有关系,所以,请将下面代码,全部复制,跑起来后,布局和计算相结合的看。不然,有时候不明白这里为什么 减去15,那里为什么 减去20

attrs.xml文件中

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ExpandTVStyle">
        <!--最小行数-->
        <attr name="minLineNum" format="integer"/>
        <!--展开、收缩动画时间,单位:毫秒-->
        <attr name="expandTime" format="integer"/>
        <!--展开时对应的图片-->
        <attr name="expandPicID" format="reference"/>
        <!--不展开时对应的图片-->
        <attr name="notExpandPicID" format="reference"/>
        <!--展开时对应的文字-->
        <attr name="expandTv" format="string"/>
        <!--不展开时对应的文字-->
        <attr name="notExpandTv" format="string"/>
        <!--文字大小,单位:dp-->
        <attr name="tvSize" format="integer"/>
    </declare-styleable>

</resources>

view_expand_tv_layout

<?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="wrap_content"
    android:orientation="vertical">

    <ScrollView
        android:id="@+id/expand_sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <RelativeLayout
            android:id="@+id/expand_tv_root_rl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#55ff0000">

            <TextView
                android:id="@+id/expand_content_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_conten
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是实现TextView展开与收起效果的方法: 1. 使用MaxLines属性和Ellipsize属性: ```xml <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="2" android:ellipsize="end" android:text="这是一段很长的文本,需要展开和收起" /> ``` 在布局文件中,将TextView的maxLines属性设置为2,表示最多显示两行文本,然后将ellipsize属性设置为end,表示超出两行的文本以省略号显示。 2. 使用ExpandableTextView库: 可以使用第三方库ExpandableTextView来实现TextView展开与收起效果。首先,在build.gradle文件中添加以下依赖: ```groovy implementation 'com.ms-square:expandableTextView:0.1.4' ``` 然后,在布局文件中使用ExpandableTextView: ```xml <com.ms.square.android.expandabletextview.ExpandableTextView android:id="@+id/expandableTextView" android:layout_width="match_parent" android:layout_height="wrap_content" app:animDuration="200" app:maxCollapsedLines="2" app:animAlphaStart="0.7" app:expandDrawable="@drawable/ic_expand" app:collapseDrawable="@drawable/ic_collapse" app:expandDuration="200" app:collapseAnimDuration="200" app:trimCollapsedText="...展开" app:trimExpandedText="收起" app:trimMode="trim" app:trimLength="80" app:trimLines="2" app:trimCollapsedTextColor="@color/colorAccent" app:trimExpandedTextColor="@color/colorPrimary" app:trimEllipsize="end" app:trimClickable="true" app:trimExpandedTextGravity="left" app:trimCollapsedTextGravity="left" app:trimShowLess="true" app:trimShowMore="true" app:trimTypeface="fonts/Roboto-Regular.ttf" app:trimCollapsedTextSize="14sp" app:trimExpandedTextSize="14sp" app:trimCollapsedTextAppearance="@style/TextAppearance.AppCompat.Body1" app:trimExpandedTextAppearance="@style/TextAppearance.AppCompat.Body1" /> ``` 这样就可以实现TextView展开与收起效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值