はじめに

ViewPager内で横スクロールするWebViewを表示すると、スクロールが全然効かなくなる。
これはWebViewの横スクロールが、ViewPagerの横スクロールに取られてしまうため。

ViewPagerのタブの切り替えをタブタップのみにすれば解決はするのだけど、横スワイプも諦めたくないので、WebViewをカスタマイズして対応した。

解決方法

1.WebViewをカスタマイズする。

WebViewを継承したクラスを作成して、onOverScrolledとonTouchEventをオーバーライドする。

class MyWebView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
) : WebView(context, attrs, defStyleAttr) {

    var onPagingStateChanged: ((Boolean) -> Unit)? = null

    override fun onOverScrolled(scrollX: Int, scrollY: Int, clampedX: Boolean, clampedY: Boolean) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY)
        onPagingStateChanged?.invoke(true)
    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        super.onTouchEvent(event)
        if (event?.action == MotionEvent.ACTION_DOWN) {
            onPagingStateChanged?.invoke(false)
        }
        return true
    }
}

onOverScrolledを修正して、オーバースクロール時にonPagingStateChangedにtrueが流れるようにする。
onTouchEventを修正して、ACTION_DOWNが来たときはonPagingStateChangedにfalseが流れるようにする。
この値を使ってViewPagerスワイプの許可・非許可を切り替えることで、いい感じにスクロールできるようになる。

2.ViewPagerのスワイプを制御する。

onPagingStateChangedから来た真偽値をViewModelのFlowやコールバック経由でViewPager2.isUserInputEnabledに流してあげることで、制御ができる。

class MyActivity : AppCompatActivity() {
    private val viewModel: MyViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        viewModel.isPagingEnabled.collectWhenStarted(this) {
            binding.viewPager.isUserInputEnabled = it
        }
    }
}

こんな感じで実装すれば、WebViewの横スクロールが限界までいって、オーバースクロールになった瞬間のみタブの切り替えが発生する。
やってしまえば簡単だけど、前例があんまりなくて困ってしまったね。
今回はViewPager2でやったけど、似たような感じでViewPagerにも応用できると思う。

まとめ

ViewPager2内で横スクロールするWebViewを表示したい場合は、WebViewをカスタマイズする。
オーバースクロールの時だけスワイプでタブ切り替えを許可してあげるとできる。

おわり。

参考

https://www.youtube.com/watch?v=yi4r2kJhKhA