电子书阅读器上的浏览器 [Day24] 翻译功能 (VI) 翻译结果与主画面同步卷动

在对照着看翻译结果和原文时，需要不断卷动画面。如果两边画面可以同步卷动的话，就能省下手指在两个 WebView 中来回操作的重覆行为。要达到同步卷动的功能，必须要将其中一个 WebView 的卷动状态也反应到另一个 WebView 才行。

在实作翻译功能的 TranslationViewController 中，先加入一个 function variable onScrollChangeListener，让外部可以收到来自於翻译结果网页的卷动事件。

class TranslationViewController(
     private val activity: Activity,
     private val translationViewBinding: TranslationPanelBinding,
     private val twoPaneLayout: TwoPaneLayout,
     private val showTranslationAction: () -> Unit,
     private val onTranslationClosed: () -> Unit
     private val onTranslationClosed: () -> Unit,
     private val onScrollChangeListener: NinjaWebView.OnScrollChangeListener // 这一行
) { ... }

为翻译网页的 WebView 设定其 scrollListener 为外部传进来的 OnScrollChangeListener。在 sync scroll 按钮被点击时， toggleSyncScroll 会被呼叫，进行同步卷动状态的改变、按钮图案的切换、以及设定 WebView 的 scroll listener

private fun toggleSyncScroll(shouldSyncScroll: Boolean = false) {
         isScrollSynced = shouldSyncScroll
         val listener = if (isScrollSynced) onScrollChangeListener else null
         webView.setScrollChangeListener(listener)
         val drawable = if (isScrollSynced) R.drawable.selected_border_bg else R.drawable.backgound_with_border
         translationViewBinding.syncScroll.setBackgroundResource(drawable)
     }

将 TranslationViewController 做了扩充後，我们来看看怎麽在 BrowserActivity 中套用它。

private val translateController: TranslationViewController by lazy {
        TranslationViewController(
            this,
            binding.subContainer,
             binding.twoPanelLayout,
             { showTranslation() },
             { if (ninjaWebView.isReaderModeOn) ninjaWebView.toggleReaderMode() },
             object : NinjaWebView.OnScrollChangeListener {
                 override fun onScrollChange(scrollY: Int, oldScrollY: Int) {
                     val offset = scrollY - oldScrollY
                     ninjaWebView.scrollY += offset
                 }
             } //根据翻译 WebView 卷动程度，同步反应到原文的 ninjaWebView 中
         )
     }

建立 TranslationViewController时，最後加入 OnScrollChangeListener 的实作，取 Translation 中的卷动情况，并反应在原本的 WebView (nijaWebView) 中。

示范影片

开启同步卷动的话，在使用上更为方便！

原始码参考版本

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