如何在Android中显示HTML文本,同时检测特定短语和滚动位置的点击?



我从服务器获得了一堵纯HTML文本墙,需要在我的应用程序中呈现它,但这还不是全部。

我还需要检测文本中特定短语的点击。短语由两个数字定义:短语开始的字数和结束的字数(例如,从单词 10 到单词 15)。

我的直觉告诉我,我可能会根据短语规范用链接或一些JavaScript来检测HTML,然后监听这些链接的点击。但是,我不确定如何在Android中实现这种功能。

此外,我还需要能够以编程方式观察和操作显示的 HTML 文本中的滚动位置。例如,我需要了解特定短语何时滚动到屏幕上。

我想我有三个密切相关的问题:

  1. 我应该使用哪个视图来实现上述功能(TextViewWebView、其他)?
  2. 如何侦听 HTML 特定部分的点击?
  3. 如何观察和操作滚动位置?

谢谢

  1. WebView是一种快速的方法。
  2. 您可以将 java/kotlin 函数映射到网页上的 javascript 函数以跟踪点击次数。
  3. 再次使用简单的jquery,就可以实现它。

参考 : slymax 网页视图

我认为您可以使用此方法执行此操作: 1.)您需要从您拥有的html文本中获取所有链接。所以要做到这一点,请使用此方法:

public static ArrayList<String> extractUrls(String text) {
ArrayList<String> containedUrls = new ArrayList<>();
String urlRegex = "((https?|ftp|gopher|telnet|file):((//)|(\\))+[\w\d:#@%/;$()~_?\+-=\\\.&]*)";
Pattern pattern = Pattern.compile(urlRegex, Pattern.CASE_INSENSITIVE);
Matcher urlMatcher = pattern.matcher(text);
while (urlMatcher.find()) {
containedUrls.add(text.substring(urlMatcher.start(0),
urlMatcher.end(0)));
}
return containedUrls;
}

它将返回一个 URL 的数组列表,现在您需要将 HTML 数据转换为人类可读的文本: 为此,请使用:

public void HtmlToString(final String data) {
Thread thread = new Thread(new Runnable() {
@Override
public void run() {
final String s = String.valueOf(Html.fromHtml(data));
runOnUiThread(new Runnable() {
@Override
public void run() {
processData(s);
}
});
}
});
thread.start();
}
void processData(String s){
// Do whatever you want to do
}

我们正在另一个线程上做这项工作。 现在,您有文本和链接,可以随心所欲地使用它。 现在,如果您想对其进行更多工作,您可以通过将数组列表中获得的所有链接替换为可以用作占位符的特殊代码来做到这一点,例如:

for(int i = 0; i < urlArray.size();i++){
yourData.replace(urlArray.get(i),"<<<YOURSPECIALCODE>>>");       
}

现在,您可以使用特殊代码中断数据,以在URL的位置获取中断。为此:

ArrayList<String> dataArray = new ArrayList<>(yourData.split("<<<YOURSPECIALCODE>>>"));

现在您可以使用这两个数组来根据您的要求显示

和现在一样,您可以为不同的数据分配不同的文本视图,并非常轻松地将 OnClick 侦听器设置为它们。

希望它可能会有所帮助!

谢谢

如果您打算使用TextView(如果内容不应该呈现为完整的HTML,我宁愿使用,否则请使用WebView)并在文本内容中使用可单击范围以使特定区域可单击。您可以处理对各个跨度区域的单击,并在单击处理程序中执行所需的操作。您需要编写多个 CustomClickableSpan,根据您希望处理的不同可点击区域的数量进行分类。

我想对于您的用例来说,理想的视图将是WebView.

在 Web 视图中处理 HTML 比在TextView中更容易处理。

TextView 要求您使用跨度来处理 HTML 内容,这与在 Web 视图中处理 HTML 相比有些困难。

此外,为了监控滚动行为,我们可以利用 Web 视图中元素的滚动事件,从而更轻松地处理单个元素的滚动行为。

因此,为了使文本的某些部分可点击,请使用以下代码片段(Kotlin),

val htmlString = "<div>Handling the click near the specified indices</div>"
val document = Jsoup.parse(htmlString)
document.outputSettings().prettyPrint(false)
var plaintext = document.body().text()
plaintext = plaintext.replaceRange(13,18, "<a href='https://www.google.com'>${plaintext.substring(13, 18)}</a>")
document.body().html(plaintext)

利用 Jsoup 库来解析 HTML 内容。 上面的代码片段将使索引子字符串可单击并将其指向 www.google.com。您还可以向其添加其他事件。

然后,为了检查一个元素在屏幕上是否可见,你可以有一个javascript函数,如,

function isElementVisible(element)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(element).offset().top;
var elemBottom = elemTop + $(element).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

它接受元素,如果元素在屏幕上可见,则返回 true,如果元素不可见,则返回 false。

您可以使用 SpannableString 执行此操作 - 查找 html 文本中的每个链接标签,并在您需要的任何位置设置可跨度(例如,对于每个 between 标签:SPANNABLE STRING)。

按照本主题操作,制作可单击的可跨度字符串,并在 TextView 中显示它。这并不难:)

Android:可点击文本视图中的可点击跨度

最新更新