实现可点击展开的TextView

作者：亲亲羊to | 来源：互联网 | 2023-09-11 14:03

概述Android开发过程中，经常遇到Textview展示不完全的情况。遇到此情况，通常的处理是：方案一Textview添加android:ellipsize属性，让展示不

概述
Android开发过程中，经常遇到 Textview 展示不完全的情况。
遇到此情况，通常的处理是：

方案一
Textview 添加 android:ellipsize 属性，让展示不完的部分使用省略号代替。

方案二
Textview 采用走马灯效果，使其滚动展示全部文本内容。

对于方案一，如果想查看被省略后的内容，如何实现？通常情况下是在 TextView 文本后面或下边添加一个可点击的图标，来实现 TextView 的展开与收缩。如下图：
收缩状态
展开状态

实现原理
对于以上效果，大致的实现思路是：

对 TextView 添加视图高度监听（addOnGlobalLayoutListener），监控 TextView 的状态。

利用 SpannableString 在 TextView 文本的后面添加一个图标。

实现图标的点击效果（收缩或展开 TextView）。

下面用代码来详细描述实现的过程：

给TextView添加视图高度监听

    /**
 * 添加监听
 * @param tv 要实现伸缩效果的 TextView
 * @param desc TextView 要展示的文字
 */
    public static void toggleEllipsize(final TextView tv,final String desc){
        if(desc == null){
            return;
        }

        //去除点击图片后的背景色（ SpannableString 在点击时会使背景变色 ，填上这句则可不变色 ）
        tv.setHighlightColor(Color.TRANSPARENT);

        //添加 TextView 的高度监听
        tv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @SuppressWarnings("deprecation")
            @SuppressLint("NewApi")
            @Override
            public void onGlobalLayout() {

                int paddingLeft  = tv.getPaddingLeft();
                int paddingRight = tv.getPaddingRight();
                TextPaint paint  = tv.getPaint();
                float moreText   = tv.getTextSize() * 3;
                float availableTextWidth = (tv.getWidth() - paddingLeft - paddingRight) * 2 - moreText;
                CharSequence ellipsizeStr = TextUtils.ellipsize(desc,paint,availableTextWidth,TextUtils.TruncateAt.END);

                // TextView 实际显示的文本长度 <应该显示文本的长度(收缩状态)
                if(ellipsizeStr.length()                     openFun(tv, ellipsizeStr, desc);//显示收缩状态的文本和图标
                }
                // TextView 实际显示的文本长度 == 应该显示文本的长度(正常状态)
                else if(ellipsizeStr.length() == desc.length()){
                    tv.setText(desc);//正常显示Textview
                }
                // TextView 实际显示的文本长度 > 应该显示文本的长度(展开状态)
                else{
                    closeFun(tv, ellipsizeStr, desc);//显示展开状态的文本和图标
                }

                if(Build.VERSION.SDK_INT>=16){  
                    tv.getViewTreeObserver().removeOnGlobalLayoutListener(this);  
                }else{  
                    tv.getViewTreeObserver().removeGlobalOnLayoutListener(this);  
                }
            }
        });
    }

使用 SpannableString

在 SpannableString 中，我们可以通过设置 ImageSpan 来给 TextView 添加图标，但是普通的 ImageSpan 是不能响应点击事件的而且也不能设置图片的位置，那么我们要如何实现一个可以响应点击事件并且可以设置图片位置的 ImageSpan 呢？

Step 1：

新建一个 ClickableImageSpan 类，使之具有 ImageSpan 所有属性的，并且可以点击，图片垂直居中。

/**
 * ClickableImageSpan 继承自 ImageSpan，使其能响应点击事件，并图片垂直居中显示
 * @author lee
 *
 */
public abstract class ClickableImageSpan extends ImageSpan {

    public ClickableImageSpan(Drawable b) {
        super(b);
    }

    /** 图片垂直居中显示 */
    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end,  
            Paint.FontMetricsInt fontMetricsInt) {

        Drawable drawable = getDrawable();  
        Rect rect = drawable.getBounds();  
        if (fontMetricsInt != null) {  
            Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();  
            int fOntHeight= fmPaint.bottom - fmPaint.top;  
            int drHeight = rect.bottom - rect.top;  

            int top = drHeight / 2 - fontHeight / 4;  
            int bottom = drHeight / 2 + fontHeight / 4;  

            fontMetricsInt.ascent = -bottom;  
            fontMetricsInt.top = -bottom;  
            fontMetricsInt.bottom = top;  
            fontMetricsInt.descent = top;  
        }  
        return rect.right;  
    }  

    /** 图片垂直居中显示 */
    @Override  
    public void draw(Canvas canvas, CharSequence text, int start, int end,  
            float x, int top, int y, int bottom, Paint paint) { 

        Drawable drawable = getDrawable();  
        canvas.save();  
        int transY = 0;  
        transY = ((bottom - top) - drawable.getBounds().bottom) / 2 + top;  
        canvas.translate(x, transY);  
        drawable.draw(canvas);  
        canvas.restore();  
    }


    /** 添加点击事件 */
    public abstract void onClick(View view);
}

Step 2：

新建一个 ClickableMovementMethod （修改 LinkMovementMethod 的 onTouchEvent 方法），使其支持 ClickableImageSpan 。

/**
 * ClickableMovementMethod 继承自 LinkMovementMethod，使其能响应 ClickableImageSpan
 * @author lee
 *
 */
public class ClickableMovementMethod extends LinkMovementMethod {

    private static ClickableMovementMethod sInstance;

    public static ClickableMovementMethod getInstance() {
        if (sInstance == null) {
            sInstance = new ClickableMovementMethod();
        }
        return sInstance;
    }


    public boolean onTouchEvent(TextView widget, Spannable buffer,
            MotionEvent event) {
        int action = event.getAction();

        if (action == MotionEvent.ACTION_UP ||
                action == MotionEvent.ACTION_DOWN) {
            int x = (int) event.getX();
            int y = (int) event.getY();

            x -= widget.getTotalPaddingLeft();
            y -= widget.getTotalPaddingTop();

            x += widget.getScrollX();
            y += widget.getScrollY();

            Layout layout = widget.getLayout();
            int line = layout.getLineForVertical(y);
            int off = layout.getOffsetForHorizontal(line, x);

            ClickableSpan[] link = buffer.getSpans(off, off, ClickableSpan.class);

            /** 修改位置【1】 START **/
            ClickableImageSpan[] imageSpans = buffer.getSpans(off, off, ClickableImageSpan.class);
            /****** END ******/

            if (link.length != 0) {
                if (action == MotionEvent.ACTION_UP) {
                    link[0].onClick(widget);
                } else if (action == MotionEvent.ACTION_DOWN) {
                    Selection.setSelection(buffer,
                            buffer.getSpanStart(link[0]),
                            buffer.getSpanEnd(link[0]));
                }

                return true;
            } 
            /** 修改位置【2】START **/
            else if (imageSpans.length != 0) {
                if (action == MotionEvent.ACTION_UP) {
                    imageSpans[0].onClick(widget);
                } else if (action == MotionEvent.ACTION_DOWN) {
                    Selection.setSelection(buffer,
                            buffer.getSpanStart(imageSpans[0]),
                            buffer.getSpanEnd(imageSpans[0]));
                }

                return true;
            } 
            /****** END ******/

            else {
                Selection.removeSelection(buffer);
            }
        }

        return false;
    }
}

将改好的 SpannableString 设置到 TextView 中

    // 显示收缩状态的文本，设置点击图标，并添加点击事件
    private static void openFun(final TextView tv,final CharSequence ellipsizeStr,final String desc){
        CharSequence temp = ellipsizeStr+".";
        SpannableStringBuilder ssb = new SpannableStringBuilder(temp);
        Drawable dd = tv.getResources().getDrawable(R.drawable.ic_expand);
        dd.setBounds(0, 0, dd.getIntrinsicWidth(), dd.getIntrinsicHeight());
        ClickableImageSpan is = new ClickableImageSpan(dd) {
            @Override
            public void onClick(View view) {
                closeFun(tv,ellipsizeStr,desc);
            }

        };
        ssb.setSpan(is, temp.length()-1, temp.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        tv.setText(ssb);
        tv.setMovementMethod(ClickableMovementMethod.getInstance());
    }

    // 显示展开状态的文本，设置点击图标，并添加点击事件
    private static void closeFun(final TextView tv,final CharSequence ellipsizeStr,final String desc) {
        SpannableStringBuilder ssb = new SpannableStringBuilder(desc);
        Drawable dd = tv.getResources().getDrawable(R.drawable.ic_normal);
        dd.setBounds(0, 0, dd.getIntrinsicWidth(), dd.getIntrinsicHeight());
        ClickableImageSpan is = new ClickableImageSpan(dd) {
            @Override
            public void onClick(View view) {
                openFun(tv,ellipsizeStr,desc);
            }
        };
        ssb.setSpan(is, desc.length()-1, desc.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        tv.setText(ssb);
        tv.setMovementMethod(ClickableMovementMethod.getInstance());
    }

在 Activity 中调用

public class MainActivity extends Activity {
    private TextView mTv;
    private String  str = "我有一只小毛驴,我从来也不骑~ "
            + "有一天我心血来潮骑它去赶集,我手里拿着小皮鞭,我心里正得意~ "
            + "不知怎么哗啦啦啦啦,我摔了一身泥~";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTv = (TextView) findViewById(R.id.tv_test);
        //调用 toggleEllipsize 方法来设置 mTv
        Utils.toggleEllipsize(mTv,str);
    }

}

完整Demo链接：http://download.csdn.net/detail/l_lhc/9460197

还有一些使用其他方法实现可伸缩的 TextView（使用 setMaxLines 方法），传送门：

如何写一个可以展开的TextView
android Textview 使用之一：伸缩效果

参考文章：

用SpannableString和ImageSpan在textview中插入图片
自定义可点击的ImageSpan并在TextView中内置“View“

推荐阅读

format
Android Studio SQLite 数据库增删改查简单（代码参考）

一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]

蜡笔小新 2024-11-14 11:01:49
main
实验九：使用SharedPreferences存储简单数据

本实验旨在帮助学生理解和掌握使用SharedPreferences存储和读取简单数据的方法，包括程序参数和用户选项。 ... [详细]

蜡笔小新 2024-11-12 14:21:47
io
深入解析 Lifecycle 的实现原理

本文将详细介绍 Android Jetpack 中 Lifecycle 组件的实现原理，帮助开发者更好地理解和使用 Lifecycle，避免常见的内存泄漏问题。 ... [详细]

蜡笔小新 2024-11-12 14:05:19
main
自定义 Android 圆形进度条视图，支持显示数字和中心文字

本文介绍了一种自定义的Android圆形进度条视图，支持在进度条上显示数字，并在圆心位置展示文字内容。通过自定义绘图和组件组合的方式实现，详细展示了自定义View的开发流程和关键技术点。示例代码和效果展示将在文章末尾提供。 ... [详细]

蜡笔小新 2024-11-10 13:04:42
main
使用 ListView 浏览安卓系统中的回收站文件

使用 ListView 浏览安卓系统中的回收站文件 ... [详细]

蜡笔小新 2024-11-09 16:34:55
io
深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例

深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]

蜡笔小新 2024-11-07 20:50:46
main
如何在Android中实现多点触控监听与交互优化

在Android开发中，实现多点触控功能需要使用`OnTouchListener`监听器来捕获触摸事件，并在`onTouch`方法中进行详细的事件处理。为了优化多点触控的交互体验，开发者可以通过识别不同的触摸手势（如缩放、旋转等）并进行相应的逻辑处理。此外，还可以结合`MotionEvent`类提供的方法，如`getPointerCount()`和`getPointerId()`，来精确控制每个触点的行为，从而提升用户操作的流畅性和响应性。 ... [详细]

蜡笔小新 2024-11-07 11:45:12
email
Android TextView和EditText属性详解

TextView属性详解：autoLink设置　　是否当文本为URL链接email电话号码map时，文本显示为可点击的链接。可选值(nonewebemailphonema ... [详细]

蜡笔小新 2023-09-10 15:59:56
io
Android TextView利用measureText自适应文本字体大小宽度

AndroidTextView利用measureText自适应文本字体大小宽度常常有这种情况，UI设计师限定一个文本TextView的宽度值比如80dip，但是该文本长度 ... [详细]

蜡笔小新 2023-09-04 20:39:43
io
Day3.2--Android简单UI控件之TextView的高级使用--SpannableString的使用

上节课，介绍了TextView的简单使用，包括在xml文件静态设置TextView的属性和文本内容信息，以及在java代码中动态的改变一个TextView所要显示的内容。掌握了基本使用之后，我们来看 ... [详细]

蜡笔小新 2023-09-01 14:27:27
main
在java源文件中指定TextView文本显示内容

在java源文件中指定TextView文本显示内容在java源文件当中指定控件的文本显示内容，我们需要得到一个控件的对象即TextView的对象，如果在java源文件中我们想要得到这个指定的控件，我们 ... [详细]

蜡笔小新 2023-08-29 17:17:15
io
实现Android中TextView的垂直滚动功能

在Android开发中，当TextView的高度固定且内容超出时，可以通过设置其内置的滚动条属性来实现垂直滚动功能。具体来说，可以通过配置`android:scrollbars="vertical"`来启用垂直滚动，确保用户能够查看完整的内容。此外，为了优化用户体验，建议结合`setMovementMethod(ScrollerMovementMethod.getInstance())`方法，使滚动操作更加流畅和自然。 ... [详细]

蜡笔小新 2024-11-09 17:54:44
format
Android 自定义控件起步：自定义TextView

转载至：http:blog.csdn.netlmj623565791articledetails24252901不过对原作进行了相关细节优化，所以才有此文..首先我们看一 ... [详细]

蜡笔小新 2023-09-13 14:11:13
eval
Android TextView 属性 textsize 的单位是什么？

首选我们找到源码中的TextView找到textsize属性一个int类型默认值为15初使化自定义属性：我们看一个getDeimensionPixelSiz ... [详细]

蜡笔小新 2023-09-12 20:38:44
eval
Android TextView预渲染研究

AndroidTextView预渲染研究-Android中的TextView是整个framework中最复杂的控件之一，负责Android中显示文本的大部分工作，framwork中 ... [详细]

蜡笔小新 2023-09-05 15:50:15

亲亲羊to

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章