题库类App中比较头疼的公式问题，关于题干和选项中对含有数学和化学公式TextView加载Html图文混排的处理方式（Svg图片、Base64图片、png图片的处理，以及针对公式不自动换行问题的处理）

浅浅的花香味﹌ 2024-02-19 13:19 4阅读 0赞

前言：

最近做过的几个项目中，都涉及到题库这一模块。最开始做的是银行招聘和教师招聘的题库，银行招聘和教师招聘的题库中的题目很少有公式，应该说有极少数的题目会设计到公式，即使有公式，服务器给过来的数据也是png或者jpg的图片，直接通过图片加载框架（Glide、ImageLoader、Fresco、Picasso）这些都可以直接加载，在这里，我使用的是Glide（题外话：Glide更新到4.0以后，貌似使用方式和之前的略有不同。。）。

后来加入到公考项目的开发中，公考中的题库开始真正出现了大量的公式，发现一道题的题干和选项中都有可能存在有公式，这些公式出现的位置毫无规律，而且是公式和文字混排的格式，这时候因为考虑到公式比较多，然后之前采用的png或者jpg图片显示每一个公式显然有些不切实际，然后经过和服务器接口人员的商讨，后台使用百度的开源的公式编辑器，输入公式后，可以生成base64编码的的图片。所以接口传过来的数据是以base64编码后的图片，然后就在网上查看了好多关于加载base64编码的图片。

发现这个

//富文本
    implementation 'com.zzhoujay.richtext:richtext:3.0.4'

关于富文本的解析器。通过这个解析器里面的Base64解码，可以把接口传过来的Base64编码的图片解析加载出来。

byte[] byteIcon = Base64.decode(source);
    if (byteIcon != null && byteIcon.length > 0) {
       Bitmap bitmap = BitmapFactory.decodeByteArray(byteIcon, 0,byteIcon.length);
    
       Drawable drawable = new BitmapDrawable(mActivity.getResources(), bitmap);
       drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 1.7f), 
                   (int) (drawable.getIntrinsicHeight() * 1.7f));
    
       return drawable;
    } else {
       return null;
    }

紧接着就是关于解析出的公式图片与题干中的文字进行，图文混排。最开始考虑题干和选项都是用WebView，比较省事，这样图片和文字都能加载出来。后来发现如果每一道题的题目使用一个WebView控件，每一个选项使用一个WebView。如果有成百上千道题，那么就需要使用很多很多的WebView，比较耗性能。可能会出现卡顿。如果你有兴趣可以试试哦。后来干脆就抛弃了使用WebView的想法。接口给过来的其实是一个用标签包裹着的Html文本。后来想了想在Android中除了使用WebView可以加载Html文本外，TextView这个控件貌似也有加载Html文本的功能。于是乎就把注意力渐渐转移到了TextView。经过上网查阅资料，使用TextView加载Html并实现对文字和图片的图文混排。

public static void htmlToText(TextView textView, Activity activity, String text, boolean isClickable){
 if(StringUtils.isTrimEmpty(text))return;
 String p = "";
 if(text.startsWith(p) && text.endsWith("")){
 int start = text.indexOf(p);
 int last = text.lastIndexOf("");
 text = text.substring(start+p.length(),last);
 }
 Spanned spanned;
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
 spanned = Html.fromHtml(text, Html.FROM_HTML_MODE_COMPACT, new HtmlImageGetter(textView, activity), null);
 } else {
 spanned = Html.fromHtml(text, new HtmlImageGetter(textView, activity), null);
 }
 if (spanned instanceof SpannableStringBuilder) {
 ImageSpan[] imageSpans = spanned.getSpans(0, spanned.length(), ImageSpan.class);
 for (ImageSpan imageSpan : imageSpans) {
 int start = spanned.getSpanStart(imageSpan);
 int end = spanned.getSpanEnd(imageSpan);
 Drawable d = imageSpan.getDrawable();
 StickerSpan newImageSpan = new StickerSpan(d, ImageSpan.ALIGN_BASELINE, imageSpan.getSource());
 ((SpannableStringBuilder) spanned).setSpan(newImageSpan, start, end, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
 ((SpannableStringBuilder) spanned).removeSpan(imageSpan);
 }
 }
 textView.setText(spanned);
 if (isClickable){
 textView.setMovementMethod(ClickableLinkMovementMethod.getInstance());
 }
 }

于是乎解决了关于题目中带公式的问题。

后来离职后，去了另一家教育公司，开发的App中也出现了题库模块，而且题库模块也含有公式，于是很庆幸自己之前做过，于是照搬之前公司的代码，很快的完成了题库。由于这个App中公式出现的频率比较高，几乎每一道数学题和物理题都会有公式出现。而且数学题中有些公式很复杂，什么根号下再嵌套根号等等,反正就是很复杂，本来很小的公式图片，用Base64展示后，会看起来很模糊，有的复杂的公式根本就看不清。于是负责公式转换的同事，使用的是Latex公式生成器（也是富文本的一种，只不过是针对于公式的一种编辑器，可以体验下：[https://private.codecogs.com/latex/eqneditor.php][https_private.codecogs.com_latex_eqneditor.php]）提出了用SVG格式的图片，svg格式的图片为矢量图放大缩小不会失真的。

于是SVG图片的加载显示成了最头疼的问题，最后查了好多资料，花费了很多时间。。。还好最终算是出了结果。我把代码贴到这里，希望研究这一块的朋友，能省点力。

public class HtmlImageGetter implements Html.ImageGetter {
 
 private TextView mTextView;
 private Activity mActivity;
 private float firstRatio = 2.0f;
 private float nextRatio = 1.0f;
 private int mMax = 3;
 boolean isFirst = true;
 
 public HtmlImageGetter(TextView textView, Activity activity) {
 this.mTextView = textView;
 this.mActivity = activity;
 firstRatio = 2.0f;
 }
 
 public HtmlImageGetter(TextView textView, Activity activity, int size) {
 this.mTextView = textView;
 this.mActivity = activity;
 this.nextRatio = (float) size / (float) 16;
 }
 
 @Override
 public Drawable getDrawable(final String source) {
 if (source.contains("http://") || source.contains("https://")) {
 final URLDrawable urlDrawable = new URLDrawable();
 if (source.contains("tosvg")) {
 RequestBuilder requestBuilder = GlideApp.with(mActivity).asFile();
 Uri uri = Uri.parse(source);
 requestBuilder.load(uri).into(new SimpleTarget<File>() {
 @Override
 public void onResourceReady(@NonNull File svgFile, @Nullable Transition<? super File> transition) {
 SVG svg = null;
 try {
 svg = SVG.getFromInputStream(new FileInputStream(svgFile));
 float documentWidth = svg.getDocumentWidth();
 float documentHeight = svg.getDocumentHeight();
 
 int screen_width=AppUtil.px2dp(mActivity,BaseApplication.screen_width);
 
 if (documentWidth>screen_width*0.85) {
 svg.setDocumentWidth(BaseApplication.screen_width*0.85f);
 svg.setDocumentHeight(BaseApplication.screen_width*0.85f*AppUtil.dp2px(mActivity, documentHeight)/AppUtil.dp2px(mActivity, documentWidth));
 }else{
 svg.setDocumentWidth(AppUtil.dp2px(mActivity, documentWidth));
 svg.setDocumentHeight(AppUtil.dp2px(mActivity, documentHeight));
 }
 svg.setDocumentViewBox(0, 0, documentWidth, documentHeight);
 svg.setDocumentPreserveAspectRatio(PreserveAspectRatio.FULLSCREEN);
 
 Bitmap bitmap = Bitmap.createBitmap((int) (svg.getDocumentWidth()), (int) (svg.getDocumentHeight()), Bitmap.Config.ARGB_8888);
 Canvas canvas = new Canvas(bitmap);
 svg.renderToPicture().draw(canvas);
 
 
 Drawable drawable = new BitmapDrawable(mActivity.getResources(), bitmap);
 drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
 urlDrawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
 urlDrawable.setDrawable(drawable);
 
 mTextView.invalidate();
 mTextView.setText(mTextView.getText()); // 解决图文重叠
 } catch (SVGParseException e) {
 e.printStackTrace();
 } catch (FileNotFoundException e) {
 e.printStackTrace();
 } catch (NullPointerException e) {
 e.printStackTrace();
 }
 }
 });
 } else {
 GlideApp.with(mActivity).asBitmap()
 .load(source).into(new SimpleTarget<Bitmap>() {
 @Override
 public void onResourceReady(@NonNull Bitmap bitmap, @Nullable Transition<? super Bitmap> transition) {
 Drawable drawable = new BitmapDrawable(mActivity.getResources(), bitmap);
 if (AppUtil.dp2px(mActivity, bitmap.getWidth()) < 200) {
 drawable.setBounds(0, 0, AppUtil.dip2px(bitmap.getWidth()), AppUtil.dip2px(bitmap.getHeight()));
 urlDrawable.setBounds(0, 0, AppUtil.dip2px(bitmap.getWidth()), AppUtil.dip2px(bitmap.getHeight()));
 } else {
 int screenW = BaseApplication.screen_width;
 double w = screenW * 0.9;
 if (AppUtil.dp2px(mActivity, bitmap.getWidth()) > w) {
 drawable.setBounds(0, 0, (int)(screenW * 0.8f), (int)(bitmap.getHeight() * (screenW * 0.8f)/bitmap.getWidth()));
 urlDrawable.setBounds(0, 0, (int)(screenW * 0.8f), (int)(bitmap.getHeight() * (screenW * 0.8f)/bitmap.getWidth()));
 } else {
 if (AppUtil.dp2px(mActivity, bitmap.getWidth()) > (screenW * 0.8)) {
 drawable.setBounds(0, 0, AppUtil.dp2px(mActivity, bitmap.getWidth() * 0.8f), AppUtil.dp2px(mActivity, bitmap.getHeight() * 0.8f));
 urlDrawable.setBounds(0, 0, AppUtil.dp2px(mActivity, bitmap.getWidth() * 0.8f), AppUtil.dp2px(mActivity, bitmap.getHeight() * 0.8f));
 } else if (AppUtil.dp2px(mActivity, bitmap.getWidth()) > (screenW * 0.7)) {
 drawable.setBounds(0, 0, AppUtil.dp2px(mActivity, bitmap.getWidth() * 0.9f), AppUtil.dp2px(mActivity, bitmap.getHeight() * 0.9f));
 urlDrawable.setBounds(0, 0, AppUtil.dp2px(mActivity, bitmap.getWidth() * 0.9f), AppUtil.dp2px(mActivity, bitmap.getHeight() * 0.9f));
 } else {
 drawable.setBounds(0, 0, AppUtil.dip2px(bitmap.getWidth()), AppUtil.dip2px(bitmap.getHeight()));
 urlDrawable.setBounds(0, 0, AppUtil.dip2px(bitmap.getWidth()), AppUtil.dip2px(bitmap.getHeight()));
 }
 }
 
 }
 
 urlDrawable.setDrawable(drawable);
 mTextView.invalidate();
 mTextView.setText(mTextView.getText()); // 解决图文重叠
 }
 });
 }
 
 return urlDrawable;
 } else {
 byte[] byteIcon = Base64.decode(source);
 if (byteIcon != null && byteIcon.length > 0) {
 Bitmap bitmap = BitmapFactory.decodeByteArray(byteIcon, 0, byteIcon.length);
 Drawable drawable = new BitmapDrawable(mActivity.getResources(), bitmap);
 drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 1.7f), (int) (drawable.getIntrinsicHeight() * 1.7f));
 
 return drawable;
 } else {
 return null;
 }
 }
 
 }
 
 private static final class URLDrawable extends BitmapDrawable {
 private Drawable drawable;
 
 @SuppressWarnings("deprecation")
 public URLDrawable() {
 }
 
 @Override
 public void draw(Canvas canvas) {
 if (drawable != null)
 drawable.draw(canvas);
 }
 
 public void setDrawable(Drawable drawable) {
 this.drawable = drawable;
 }
 }

这里是我最终的处理方式，囊括了对Png、jpg的支持；对Base64图片的支持，对SVG矢量图的支持。还适配了屏幕，应为有些公式图片很长时，超过屏幕范围，在进行图片混排时，会出现图片不能自动换行，这就导致公式图片显示不全的问题。这里采取了把超出屏幕大小的图片公式缩小到屏幕的0.9倍，从而实现自动换行。

当然，此Demo还集成了图片的点击放大功能。总的来说使用SVG的图片，展示效果是最好最完美的，特别清晰！到这里题目中带有公式的问题完美解决！！！ 下面贴出在模拟器上的效果图：

![题库Demo展示效果][Demo]

对了，该篇文章的Demo已经上传到了GitHub：[https://github.com/xinyitiandi/TiKuSvgImgDemo][https_github.com_xinyitiandi_TiKuSvgImgDemo]

欢迎大家，star！如有问题也可在文章的底部发表评论。博主看到后，第一时间会回复大家！希望本篇文章和Demo能对你有所帮助！！

[https_private.codecogs.com_latex_eqneditor.php]: https://private.codecogs.com/latex/eqneditor.php
[Demo]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/84351e924a8640369b74fd30451f77ea.png
[https_github.com_xinyitiandi_TiKuSvgImgDemo]: https://github.com/xinyitiandi/TiKuSvgImgDemo