android图文混排

背景

最近我们的产品来了个新的模块,给学生做题提高成绩的。需求如下:

  1. 支持单选、多选、填空题
  2. 支持图片文字混排
  3. 输入框有交互,排版精致美观
  4. 为了体验优化,不能使用网页实现效果

思路分析

我们的图文混排控件继承自TextView,重写了关键的测量onMeasure和绘制onDraw步骤
测量决定了混排里的元素的位置、尺寸;
绘制决定了如何去渲染这些元素(以及通知输入框位置)

1:图片文字混排

系统的TextView通过ImageGetter就可以原生实现对文本img标签的支持,从而达到图文混排的效果。
具体实现步骤请参考Github上的一个库https://github.com/zzhoujay/RichText

2:输入框混排

如何实现一个自己的TextView,请参考此篇博客http://blog.csdn.net/yellowcath/article/details/27527275

下面是我具体的实现步骤,请在步骤1图文混排源码基础上进行阅读。

最后的UI结构应该是这样子的,用输入框盖在透明的占位图上,达到了输入框混排的效果。

做题控件树

如果是列表里展示结果,不涉及输入框的。那就只有一个图文混排控件,把输入框转换成下划线____即可

2.0:根据题目答案数量,生成对应数量的输入框,添加到容器中,设置为不可见

2.1:题目中的输入框标记,通过正则表达式使用图片Img标签代替,src设置为:Input标签+输入框对应答案ID+该输入框对应答案文字长度

2.2:在ImageGetter中,发现当前图片包含Input标签,则使用一个透明的占位图代替,宽度为画笔的文本尺寸*答案长度

2.3:参考本步骤开始给出的代码地址,稍微加工下就可以拿来实现自己的TextView,在onDraw事件里,就能获取当前的x、y值。

2.4:在onDraw事件里,遇到当前绘制的Span是图片类型,且src包含Input标签的,获取当前的高度和左边距,通过下面代码获取图片的宽度。imgSpan.getDrawable().getBounds().width()

2.5:用步骤4取到的数据,设置MarginLeftMarginTop,还有宽度,通过输入框对应答案ID来找到2.0对应的输入框,刷新其位置和宽度

输入框排版大体流程

最终实现的效果如如下,满足产品需求

效果图1
效果图2

FAQ

下面是一些网友的提问

1 问题:效果图里,文字垂直居中对齐,怎么做到的

回答:
原生TextView是底部对齐的,我们自己实现的图文混排是可以自由定制垂直对齐方式的,参考我给出的第二个博客地址,他里面会记录每一行的行高,然后在绘制的时候,判断当前行高是否大于标准行高(我们填空题或者选择题都会有一个初始行高。)

如果当前行高>默认行高,则说明此行有大图,文本垂直居中=当前高度+(行高-文本高度)/2;

如果当前行高==默认行高,判断图片的高度如果小于默认行高,则图片垂直居中=当前高度+(行高-图片高度)/2;

2 请问返回的数据有处理不了的标签怎么处理,还有怎么实现如果返回的图片宽度大于一屏不被截图的问题呢?

回答:
1:标签和服务端沟通好,只返回有用的标签。一些数学符号用png图片代替。
2:Html.ImageGetter,在请求返回Bitmap的时,对Bitmap的宽度进行判断(bitmap.getWidth()),如果超过最大宽度,则使用最大宽度,同时拿到缩放比率,对高度进行等比处理。

3 填空输入功能看了您的文章还是不太明白,请问您三个关于输入框排版的问题。

1、输入框怎么拿到input位置。
2、输入框怎么刷新位置。
3、输入框怎么与文字对齐居中。

回答:
第一个问题输入框怎么拿到input位置。
1:input我们实际上也是转换成一个图片标签
2:参考http://blog.csdn.net/yellowcath/article/details/27527275如何实现自定义TextView;里面ondraw的时候,判断当前是个imageSpan,并且srcinput_A
3:满足2,则判定,该image标签是个输入框标签。如果你仔细看过2步骤的博客;则知道自定义TextView是逐行绘制标签的,我们在绘制的时候,是可以拿到当前的x和y的。

第二个问题输入框怎么刷新位置。
还记得一步骤的src里面的input_A吗?这是我们自定义的标签,第二个标签则是input_B。以此类推
input_A 我们对应创建一个输入框A,放进一个hashMap
逐行绘制的时候,我们拿到x、y,则更新该输入框的x、y就好了。

第三个问题输入框怎么与文字对齐居中。
参考问题2给出的答案

补充

这个图文混排模块,我在17年的时候就已经完成上线了,最早发布在博客园https://www.cnblogs.com/kimmy/p/5027299.html
到今天3年过去,期间的迭代主要围绕着渲染性能、各种格式文本支持,标签()嵌套扩展性等迭代,主体测量、绘制流程大体上就是文中所述。

安卓原生的Html.fromHtml在处理一些标签的时候,需要额外预处理下比如

   * 
     * 

* 将不是html标签的< 替换成< 不然{@link android.text.Html#fromHtml(String)}会丢失,比如下面数据只有a, "a;不然{@link android.text.Html#fromHtml(String)}处理后,课后堂堂清渲染引擎识别不了换行符号 *

* 输入:c( ) \n * 输出:<b>c<d 
(   )

你可能感兴趣的:(android图文混排)