iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Mobile Development

如何開發適合電子書閱讀器使用的瀏覽器 Android APP系列 第 22

電子書閱讀器上的瀏覽器 [Day22] 翻譯功能 (IV) 內容分頁

  • 分享至 

  • xImage
  •  

將網頁原文分頁翻譯

大致上的實作,到上一篇就差不多了。但是在使用幾天後發現一個問題,如果文章內容太長的話,常常會發生 Google Translate 網頁會顯示無法翻譯的畫面。原因是想要利用 url 的 query string 代入原文的方式,長度上是有限制的。

為了解決這個問題,從 WebView (A) 取得原文後,我設了一個字串長度上限。如果長度超過上限的話,我會在 WebView (B) 上顯示一排分頁的按鈕,一次只顯示一定文字長度的翻譯結果。

雖然這方式有點麻煩,但總算可以繞過字串長度的問題。下面的函式是用來更新分頁按鈕的呈現:

    private fun updatePageViews(size: Int) {
        if (size == 1) {
            pageContainer.visibility = GONE
            return
        }

        pageContainer.visibility = VISIBLE
        pageContainer.removeAllViews()

        (pageTextList.indices).forEach { index ->
            val textView = TranslationPageIndexBinding.inflate(LayoutInflater.from(activity)).root
            textView.text = (index + 1).toString()
            textView.tag = index
            val params = LinearLayout.LayoutParams(
                ViewUnit.dpToPixel(activity, 40).toInt(),
                ViewUnit.dpToPixel(activity, 40).toInt()
            )
            textView.setOnClickListener { translatePage(index) }
            pageContainer.addView(textView, params)
        }
        pageContainer.requestLayout()
    }

如果分頁只有 1 頁的話,並不需要顯示按鈕列。當分頁數目大於 1 時,會產生對應的 TextView 到 container pageContainer 中。

根據網頁原文長度來動態調整分頁按鈕列,讓使用者可以方便地切換內容。


上一篇
電子書閱讀器上的瀏覽器 [Day21] 翻譯功能 (III) Google Translate
下一篇
電子書閱讀器上的瀏覽器 [Day23] 雙視窗可拖拉調整大小元件
系列文
如何開發適合電子書閱讀器使用的瀏覽器 Android APP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言