灵活高效的在 Android Native App 开发中显示 HTML 内容（3）

look_w

用户交互事件的添加在上一步骤，formHtml()方法已经将 HTML 内容中的超链接和图片转义成为 UrlSpan 和 ImageSpan，进而在 TextView 中完成显示。但是此时是没有任何用户交互的，用户只能看到 HTML 的内容，下面介绍如何添加用户交互功能。
要完成用户交互，这里我们需要在 TextView 中还需要调用 textView.setMovementMethod()方法，Android 提供了 LinkMovementMethod 类以实现了对于文本内容中超链接的遍历，并且支持对于超链接的点击事件。所以只要在添加一句 setMovementMethod(LinkMovementMethod.getInstance())就可以使点击 UrlSpan 能够触发打开链接的功能。
但是本例仅使用 setMovementMethod ()方法还不够，为了更好地用户体验，不仅 UrlSpan 能够被触发，ImageSpan 也要求可以跳转到只看到图片的全屏显示的功能。
特此创建一个 LinkMovementMethodExt 类继承于 LinkMovementMethod，在能够触发 UrlSpan 的基础上，也使 IamgeSpan 可以被触发。在 LinkMovementMethodExt 中重写方法 onTouchEvent, 将 ImageSpan 的类型传入，并使点击图片才能向 Handler 传递 Message，滑动图片并且不影响 TextView 内容的展示，这样就不会影响有图片文章的向下滑动阅读。
清单 6. 创建 LinkMovementMethodExt 类

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public class LinkMovementMethodExt extends LinkMovementMethod { …… @Override public boolean onTouchEvent(TextView widget, Spannable buffer,   MotionEvent event) { ……     Object [] spans = buffer.getSpans(off, off, spanClass);     if (spans.length != 0) {      if (action == MotionEvent.ACTION_DOWN) {         Selection.setSelection(buffer, buffer.getSpanStart(spans[0]),  buffer.getSpanEnd(spans[0]));         MessageSpan obj = new MessageSpan();         obj.setObj(spans);         obj.setView(widget);         Message message = handler.obtainMessage();         message.obj = obj;         message.sendToTarget();          ……       }     } ……

其中 Handler 用来处理从 HTML 中获得的 Span，把 LinkMovementMethodExt 中点击的内容传输到 MainActivity 之中，并对于 Span 类型做以判断，如果是 ImageSpan 就可以打开一个 ShowPicActivity，将图片以 ImageView 显示在其中。最终产生的效果为：可以在点击超链接时请求打开浏览器看超链接的内容，同时也可以在 TextView 显示的 HTML 内容中点击图片就可以跳转到 ShowPicActivity，先调用 reSizePicture()显示合适横屏或纵屏全屏大小的图片，将图片以 ImageView 的格式展示。
清单 7.点击 ImageSpan 后的处理

1 2 3 4 5 6 7

if (span instanceof ImageSpan) { Intent intent = new Intent(c, ShowPicActivity.class);         Bundle bundle = new Bundle(); bundle.putString("picUrl",((ImageSpan) span).getSource()); intent.putExtras(bundle);            startActivity(intent); }

由于图片被以 ImageView 的格式展示出来，可以对于图片做出各种处理，比如使用对图片增加手势缩放，旋转的，这些就是对于 ImageView 的操作，在这里就不一一赘述了。不过这些效果都会提供有很好的用户体验。
在本例中用户交互式体验效果如下  。
图 4