Android textview展示富文本内容

最新推荐文章于 2024-04-30 16:19:55 发布
最新推荐文章于 2024-04-30 16:19:55 发布
阅读量1.1k 收藏 8
点赞数 7
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanggang514260663/article/details/135326157
版权

image.png

今天实现的内容，就是上图的效果，通过Span方式展示图片，需要支持文字颜色改变、加粗。支持style=\"color:green; font-weight:bold;\"展示。尤其style标签中的font-size、font-weight是在原生中不被支持的。

所以我们今天需要使用自定义的方式来实现实现。

val result = "<spanExt>攀钢钒钛所属行业为\n" +  
"<spanExt style=\"color:#333333; font-weight:bold; font-size:18px;\">其他采掘</spanExt>；\n" +  
"</spanExt>\n" +  
"<img src=\"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png\">" +  
"<br/>\n" +  
"<spanExt>当日攀钢钒钛行情整体表现<spanExt style=\"color:green; font-weight:bold;\">弱于</spanExt>所属行业表现；</spanExt>\n" +  
"<br/>\n" +  
"<img src=\"https://hbimg.huaban.com/4829401262ba0574fe8328b9f7f4b871d53850df7cd4-wVjrLB_fw658\">" +  
"<spanExt>攀钢钒钛所属概念中<spanExt style=\"color:#333333; font-weight:bold; \">有色金属</spanExt>表现相对优异；</spanExt>\n" +  
"<br/>\n" +  
"<img src=\"https://bkimg.cdn.bcebos.com/pic/50da81cb39dbb6fd526675ca147cbc18972bd507999d?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto\">" +  
"<spanExt>其涨跌幅在有色金属中位列<spanExt style=\"color:#F43737; font-weight:bold; \">81</spanExt>/<spanExt style=\"color:black; font-weight:bold; \">122</spanExt>。</spanExt>"

计划渲染的目标内容，这里的spanExt是由于系统本身是支持span标签，但是对于span标签的支持不够完善，我需要自定义一个新的标签，但是html解析的时候，是识别的标签，所以需要将展示内容的span标签替换为了spanExt。防止被系统的span标签直接解析了。

渲染内容中，主要是需要自定义span标签和图片的展示。接下来就从这两个方面出发说明。

自定义tag优化span标签

package org.fireking.basic.textview.html;

import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.Typeface;
import android.text.Editable;
import android.text.Html;
import android.text.Spannable;
import android.text.Spanned;
import android.text.TextUtils;
import android.text.style.AbsoluteSizeSpan;
import android.text.style.ForegroundColorSpan;
import android.text.style.StyleSpan;
import android.text.style.TextAppearanceSpan;
import android.util.Log;

import org.xml.sax.XMLReader;

import java.lang.reflect.Field;
import java.util.HashMap;
import java.util.Map;

public class SpanExtTagHandler implements Html.TagHandler {

    private final String TAG = "CustomTagHandler";

    private int startIndex = 0;
    private int stopIndex = 0;

    private final ColorStateList mOriginColors;
    private final Context mContext;

    public SpanExtTagHandler(Context context, ColorStateList originColors) {
        mContext = context;
        mOriginColors = originColors;
    }

    @Override
    public void handleTag(boolean opening, String tag, Editable output,
                          XMLReader xmlReader) {
        processAttributes(xmlReader);

        if (tag.equalsIgnoreCase("spanExt")) {
            if (opening) {
                startSpan(tag, output, xmlReader);
            } else {
                endSpan(tag, output, xmlReader);
                attributes.clear();
            }
        }
    }
    
    public void startSpan(String tag, Editable output, XMLReader xmlReader) {
        startIndex = output.length();
    }

    public void endSpan(String tag, Editable output, XMLReader xmlReader) {
        stopIndex = output.length();

        String color = attributes.get("color");
        String size = attributes.get("size");
        String style = attributes.get("style");
        if (!TextUtils.isEmpty(style)) {
            analysisStyle(startIndex, stopIndex, output, style);
        }
        if (!TextUtils.isEmpty(size)) {
            size = size.split("px")[0];
        }
        if (!TextUtils.isEmpty(color)) {
            if (color.startsWith("@")) {
                Resources res = Resources.getSystem();
                String name = color.substring(1);
                int colorRes = res.getIdentifier(name, "color", "android");
                if (colorRes != 0) {
                    output.setSpan(new ForegroundColorSpan(colorRes), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
            } else {
                try {
                    output.setSpan(new ForegroundColorSpan(Color.parseColor(color)), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                } catch (Exception e) {
                    e.printStackTrace();
                    reductionFontColor(startIndex, stopIndex, output);
                }
            }
        }
        if (!TextUtils.isEmpty(size)) {
            int fontSizePx = 16;
            if (null != mContext) {
                fontSizePx = DisplayUtil.sp2px(mContext, Integer.parseInt(size));
            }
            output.setSpan(new AbsoluteSizeSpan(fontSizePx), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
    }

    final HashMap<String, String> attributes = new HashMap<String, String>();

    private void processAttributes(final XMLReader xmlReader) {
        try {
            Field elementField = xmlReader.getClass().getDeclaredField("theNewElement");
            elementField.setAccessible(true);
            Object element = elementField.get(xmlReader);
            Field attsField = element.getClass().getDeclaredField("theAtts");
            attsField.setAccessible(true);
            Object atts = attsField.get(element);
            Field dataField = atts.getClass().getDeclaredField("data");
            dataField.setAccessible(true);
            String[] data = (String[]) dataField.get(atts);
            Field lengthField = atts.getClass().getDeclaredField("length");
            lengthField.setAccessible(true);
            int len = (Integer) lengthField.get(atts);
            for (int i = 0; i < len; i++)
                attributes.put(data[i * 5 + 1], data[i * 5 + 4]);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 还原为原来的颜色
     */
    private void reductionFontColor(int startIndex, int stopIndex, Editable editable) {
        if (null != mOriginColors) {
            editable.setSpan(new TextAppearanceSpan(null, 0, 0, mOriginColors, null),
                    startIndex, stopIndex,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        } else {
            editable.setSpan(new ForegroundColorSpan(0xff2b2b2b), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
    }

    /**
     * 解析style属性
     */
    private void analysisStyle(int startIndex, int stopIndex, Editable editable, String style) {
        Log.e(TAG, "style：" + style);
        String[] attrArray = style.split(";");
        Map<String, String> attrMap = new HashMap<>();
        if (null != attrArray) {
            for (String attr : attrArray) {
                String[] keyValueArray = attr.split(":");
                if (null != keyValueArray && keyValueArray.length == 2) {
                    // 记住要去除前后空格
                    attrMap.put(keyValueArray[0].trim(), keyValueArray[1].trim());
                }
            }
        }
        Log.e(TAG, "attrMap：" + attrMap.toString());

        String color = attrMap.get("color");
        String fontSize = attrMap.get("font-size");
        String fontWeight = attrMap.get("font-weight");
        if (!TextUtils.isEmpty(fontWeight) && "bold".equalsIgnoreCase(fontWeight)) {
            editable.setSpan(new StyleSpan(Typeface.BOLD), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        } else if (!TextUtils.isEmpty(fontWeight) && "italic".equalsIgnoreCase(fontWeight)) {
            editable.setSpan(new StyleSpan(Typeface.ITALIC), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        if (!TextUtils.isEmpty(fontSize)) {
            fontSize = fontSize.split("px")[0];
        }
        if (!TextUtils.isEmpty(color)) {
            if (color.startsWith("@")) {
                Resources res = Resources.getSystem();
                String name = color.substring(1);
                int colorRes = res.getIdentifier(name, "color", "android");
                if (colorRes != 0) {
                    editable.setSpan(new ForegroundColorSpan(colorRes), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
            } else {
                try {
                    editable.setSpan(new ForegroundColorSpan(Color.parseColor(color)), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                } catch (Exception e) {
                    e.printStackTrace();
                    reductionFontColor(startIndex, stopIndex, editable);
                }
            }
        }
        if (!TextUtils.isEmpty(fontSize)) {
            int fontSizePx = 16;
            if (null != mContext) {
                fontSizePx = DisplayUtil.sp2px(mContext, Integer.parseInt(fontSize));
            }
            editable.setSpan(new AbsoluteSizeSpan(fontSizePx), startIndex, stopIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
    }
}

代码整体上非常简单，首先判断需要解析的标签。根据#public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader)的isOpen判断是开标签还是关标签。

> 开标签<span 
> 关标签</span>

对于开标签，不需要过多关注，只需要知道开始的位置即可。重点关注的还是关标签。

这里需要使用xmlReader解析出来对应的属性和文本内容，然后将内容转换为对应的span设置给Editable output即可。

自定义Html.ImageGetter支持加载网络图片

  • BitmapTarget.java

BitmapTarget用户装载Glide加载的图片对象

public class BitmapTarget extends SimpleTarget<Bitmap> {  
  
    private final DrawableWrapper drawableWrapper;  
    private Context context;  
    private TextView textView;  
  
    public BitmapTarget(TextView textView, DrawableWrapper drawableWrapper, Context context) {  
        this.drawableWrapper = drawableWrapper;  
        this.context = context;  
        this.textView = textView;  
    }  
  
@Override  
    public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {  
        Drawable drawable = new BitmapDrawable(context.getResources(), resource);  
        int width = drawable.getIntrinsicWidth();  
        int height = drawable.getIntrinsicHeight();  
        drawable.setBounds(0, 0, width, height);  
        drawableWrapper.setBounds(0, 0, width, height);  
        drawableWrapper.setDrawable(drawable);  
        textView.setText(textView.getText());  
        textView.invalidate();  
    }  
}
  • DrawableWrapper.java

DrawableWrapper用来承接渲染到ImageSpan的drawable

public class DrawableWrapper extends BitmapDrawable {  
  
    private Drawable drawable;  

    DrawableWrapper() {  

    }  

    @Override  
    public void draw(Canvas canvas) {  
        if (drawable != null){  
            drawable.draw(canvas);  
        }  
    }  

    public Drawable getDrawable() {  
        return drawable;  
    }  

    public void setDrawable(Drawable drawable) {  
        this.drawable = drawable;  
    }  
}
  • MyImageGetter.java

MyImageGetter 使用Glide进行图片的下载，并且渲染到drawable中，用于ImageSpan展示使用。

public class MyImageGetter implements Html.ImageGetter {  
  
    private Context context;  
    private TextView textView;  

    public MyImageGetter(Context context, TextView textView) {  
        this.context = context;  
        this.textView = textView;  
    }  

    @Override  
    public Drawable getDrawable(String source) {  
        DrawableWrapper drawableWrapper = new DrawableWrapper();  
        Drawable drawable = new BitmapDrawable(Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888));  
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());  
        drawableWrapper.setDrawable(drawable);  
        Glide.with(context).asBitmap().load(source).into(new BitmapTarget(textView, drawableWrapper, context));  
        return drawableWrapper;  
    }  
}
王先生技术栈
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android TextView图文混排
TBMmagic的博客
05-19 595
Android TextView图文混排 <?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" and
Android textview获取选中的内容
abchuge的博客
01-30 9198
1.首先设置textview可选：android:textIsSelectable="true" 2.为textview设置监听textView.setCustomSelectionActionModeCallback(callback2); 3.这个时候我们只要重写ActionMode.Callback2接口（需要判断sdk版本是否大于23，小于使用callback接口 private
RichText:android textview的富文本
05-31
富文本 该库将带有自定义标签的字符串解析为Spannable字符串。 特征 超链接点击事件（带有按下的文本和背景颜色） 单击事件（带有按下的文本和背景颜色） 文字背景色 文字前景色 字体大小 文本样式（粗体、斜体） 文字字体 图像 当然，您可以使用 api addTypeSpan添加自定义字体范围。 安装 在您的项目级别build.gradle ： allprojects { repositories { ... maven { url " https://jitpack.io " } } } 在您的应用级别build.gradle ： dependencies { compile ' com.github.xymelon:richtext:1.0.11 ' } 使用自定义标签 TextView textVi
android TextView 实现富文本显示
u014133383的博客
02-29 1329
android TextView 实现富文本显示，实现抖音直播间公屏消息案例。自定义 ImageSpan。
在JS里面实现富文本编辑并在页面展示富文本内容
最新发布
AROUND
04-30 1044
来实现基本的富文本编辑功能，但为了获得更丰富的功能和更好的兼容性，通常推荐使用成熟的第三方库，如TinyMCE、CKEditor、Quill、Froala Editor等。以上就是使用JavaScript实现富文本编辑并在页面展示内容的基本步骤。根据实际需求选择合适的富文本编辑器库，可以极大地简化开发过程并提升用户体验。当需要获取编辑器中的内容并在页面其他部分展示时，可以通过编辑器提供的API来获取HTML内容，并设置到另一个元素中。来实现简单的格式化，但请注意这种方法的功能和兼容性有限。
Android TextView富文本SpannableStringBuilder的使用详解
11-20 4411
在android开发过程中，做内容的时候，不仅只有字符，基本都是图文混排，升职个还会对内容中某段文字进行特殊处理，比如：字体加粗、字体变大、改变字体颜色、对某一段文字新增点击事件，等等。这些内容不可能通过一个一个view去拼接，这么复杂的SpannableStringBuilder：可生成字符串生成器，这是内容和标记都可以更改的文本类。常见的富文本修饰如：新增、删除、字体颜色、大小、背景色、图片、上标、下标、删除、点击等，接下来我们将介绍常用的一些 public SpannableStringBuilder
Android：这个需求搞懵了，产品说要实现富文本回显展示
知足常乐
06-28 873
在正向的截取思维下，正则表达式无疑是最简单的，富文本，无论是标签匹配还是内容以及属性，都可以使用正则进行简单的匹配，轻轻松松就能搞定
android TextView加载富文本 两种方式，可加载图片
qq_43670077的博客
03-15 2757
android TextView加载富文本 两种方式，可加载图片
Android实现富文本展示
vincent的博客
11-04 1924
我们在开发的过程中可能会遇到这种一行文字有不通颜色的情况，如果用多个TextView去实现会让布局显得繁琐而且不利于扩展，那么我们可以使用android提供的SpannableString功能来实现我们的需求。下面我们就用一个TextView实现上述效果，并可以监《听注册协议》和《隐私政策》的点击事件。
Android-TextView-富文本-html图片显示.rar
08-13
在Android开发中，`TextView` 是一个非常基础且重要的组件，通常用于展示纯文本内容。然而，当开发者需要在文本中插入图片或者实现更复杂的格式时，`TextView` 的功能就显得有些不足。针对这种情况，Android 提供了...
Android Textview 支持ClickableSpan（富文本）
04-17
*支持Textview设置富文本点击 *设置Textview 中部分字设置可以点击、变色，设置setMovementMethod(LinkMovementMethod.getInstance())后滑动与Textview局部点击冲突...都已经解决. *解决点击空白区域依然有点击事件 ...
TextView富文本显示
08-26
支持html标签显示
可以显示富文本的TextView.zip
07-23
在这个名为"可以显示富文本的TextView.zip"的压缩包中，包含了一个自定义的TextView控件，它允许我们直接在Android应用中展示HTML富文本内容，这在显示新闻、商品详情等含有丰富格式的文本场景中尤其有用。...
RichTextView:一个基于Android原生TextView的富文本组件，解析Html格式的文本内容并进行显示
06-01
在Android开发中，有时我们需要展示比普通TextView更复杂的文本内容，比如包含加粗、斜体、链接、图片等元素的富文本。这时，`RichTextView`就派上用场了。它是一个基于Android原生`TextView`扩展而来的组件，能够...
android富文本预览和编辑
01-18
其次，该类库支持编辑功能，意味着用户可以直接在应用内修改已有的富文本内容。这包括添加、删除、替换文字，以及对图片的增删改等操作。对于一款需要用户创造内容的应用，这个特性尤为重要，因为用户可以实时看到...
Android TextView加载Html中文字、图片
05-02
在Android开发中，TextView是一个非常基础且常用的组件，通常用于显示单行或多行文本。然而，当需要在TextView中加载包含HTML格式的文本时，可能会遇到一些问题，特别是加载HTML中的图片。本文将深入探讨如何在...
TextView富文本
.天天向上.
07-19 2109
一、富文本介绍 TextView 富文本显示主要有两种方式： SpannableString 类 html 下面介绍这两种方式实现 二、SpannableString 类 作用： 修改字体( StyleSpan )[粗体、斜体等] 文本字体( TypefaceSpan ) 修改文字颜色( ForegroundColorSpan ) 文字绝对大小( AbsoluteSizeSpan ) 文字相对大小( RelativeSizeSpan ) 图片( ImageSpan ) 设置图片( DynamicDra
富文本处理TextView显示富文本的三种方案
王胖胖儿的博客
10-11 7406
TextView显示富文本的三种方案 背景 ​ 在做Android开发的时候，大家可能会经常遇到这种需求：一个textview控件上想展示一段声明，声明的大部分内容是正常的很色字体，书名号引用的各种文件条款，使用蓝色字体显示，类似如下效果图。 ​ 这类需求一般有三种实现方式 方式一:使用多个TextView来显示 ​ 这是最为简单无脑的方法，但是很试用场景比较有限，当涉及到文字换行时，这种实现方...
Android进阶之路 - 一串儿多样式富文本
Android、前端、小程序、后端
04-26 2280
你有没有这样的烦恼：怎么一行文案，一会儿大字一会儿小字？一会儿红色一会儿蓝色？如果你想解决烦恼的话就可以通过富文本方式实现复杂的Text文本显示效果哈
安卓textview 富文本 文字可点击
09-01
安卓中的TextView控件默认是不支持富文本的，即无法直接实现文字可点击的效果。不过我们可以通过一些方法来实现这个需求。 一种常用的方法是使用SpannableString类来实现富文本文字可点击的效果。SpannableString是一个可以调整文字的样式和属性的类。我们可以使用它的setSpan()方法来设置文字的点击事件。 首先，我们需要创建一个ClickableSpan对象，它是一个可以实现文字可点击的类。在ClickableSpan的onClick()方法中，我们可以编写点击文字后的逻辑代码。 ``` ClickableSpan clickableSpan = new ClickableSpan() { @Override public void onClick(View widget) { // 在这里编写点击文字后的逻辑代码 } }; ``` 然后，我们创建一个SpannableString对象，并使用setSpan()方法将ClickableSpan对象应用于需要点击的文字范围。 ``` SpannableString spannableString = new SpannableString("需要设置点击事件的文字"); spannableString.setSpan(clickableSpan, startIndex, endIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); ``` 其中，startIndex和endIndex分别表示需要设置点击事件的文字的起始和结束位置。 接下来，我们将SpannableString对象设置给TextView控件，并为TextView控件设置setMovementMethod()方法，使其具有点击效果。 ``` textView.setText(spannableString); textView.setMovementMethod(LinkMovementMethod.getInstance()); ``` 最后，我们就可以在TextView中实现文字可点击的效果了。 需要注意的是，在使用这种方法时，TextView的同时三个属性要设置为true：android:focusable="true"、android:focusableInTouchMode="true"和android:clickable="true"，以确保TextView本身可以获得焦点和点击事件。 以上就是使用SpannableString实现安卓TextView富文本文字可点击的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值