电子书阅读器上的浏览器 [Day21] 翻译功能 (III) Google Translate

双开 WebView 并开启 Google Translate 网页

先来看看今天想要完成的功能的样子

Google Chrome 不论是桌面版或是手机版的 App 都有提供全文翻译的功能。它的呈现方式很适合只在意文章内容的人，因为 Chrome 会把当下的画面文字内容在同样的位子置换成选定的翻译语言(如下图所示)

但有些时候，除了想要了解翻译後的内容外，也想要知道原文是怎麽写的；两相对照下才能更加清楚原文的含意，和达到那麽一点点语言学习的效果。所以，其实我想要的呈现方式会是(请见下图)：

实作细节

要做出上图的样子，要完成几件事：

1. 在 App 中将画面切成两半(暂称 A 和 B)，在另一边 (B) 显示一个新的 WebView
2. 从原本 (A) 的 WebView 中抓取网页文字内容
3. 将网页文字内容送到 (B) 的 WebView 里，利用 Google Translate 来呈现翻译结果

我们来一步步看怎麽进行。

切割画面，显示另一个 WebView (B)

这是其中最容易的步骤，只需要建立一个新的水平方向的 LinearLayout，让两边的的 weight 都是 1：

android:layout_weight=1

再来是 WebView (B) (置於 translation_panel layout 中) 建立後，预设 Visibility 设为 GONE。

抽取 WebView (A) 的文字内容

这部分实作方式可以参考前两篇的说明，简单来说就是先将网页切换成阅读模式，再将主要文字内容利用 Javascript 取得。

在 WebView (B) 中显示 Google Translate 翻译结果

其实 Google Translate 是有提供 API 让开发者使用的，能够透过 request 的方式直接取得翻译结果，再由开发者自行决定要怎麽显示翻译结果。但是，天下没有白吃的午餐，在超过一定的使用量之後，Translate API 是要收费的。对於一个主要是开发来自己使用的 browser 来说，不需要用到那麽高级的服务；只需要直接显示 Google Translate 网页就行了。

从网路上的资料可以得知：在开启 Google Translate 网页时，如果带入某些 query string，它其实会在第一次显示时，就有翻译结果；不需要使用者手动再贴上想要翻译的字串。

要叫 Google Translate 网页直接翻译的方式是：

https://translate.google.com/?text="string that needs to be translated"

建立 Google Translate 网页的 url:

    private fun buildGTranslateUrl(text: String): String {
        val shortenedText: String = if (text.length > TRANSLATION_TEXT_THRESHOLD) text.substring(0, TRANSLATION_TEXT_THRESHOLD) else text
        val uri = Uri.Builder()
            .scheme("https")
            .authority("translate.google.com")
            .appendQueryParameter("text", shortenedText)
            .appendQueryParameter("sl", "auto") // source language
            .appendQueryParameter("tl", "jp") // target language
            .build()
        return uri.toString()
    }

今天先讲到这儿，我们先来看看画面。关於画面中的数字按钮，会在明天的文章中做解释。

示范画面

示范操作影片

参考原始码版本

https://github.com/plateaukao/browser/releases/tag/v8.10.0