Android Kotlin WebView返回顶部按钮实现方法咨询

我已在Android原生界面中实现了返回顶部按钮，清楚其操作流程，但无法在Android Kotlin的WebView界面中设置该按钮，现咨询具体实现方案。

界面截图 #

Android原生界面 #

Android WebView界面 #

相关代码 #

MainActivity.java #

public void onClickedFloatingTop(View view) {
   
    WebView webView = getCurrentWebView();
    if (webView != null) {
        webView.scrollTo(0, 0);
        webView.loadUrl(Constants.JAVASCRIPT_FLOATING_TOP);
    }

  
    final VODView vodView = getCurrentVODView();
    if (vodView != null) {
        vodView.closeOffScreenVideo(ImageUtil.getDisplayHeight(getContext()), true);
    }


    setMainHeaderPositionAsDefault();

    MainFrameView mainFrameView = getFragmentByIndex(mCurrentPosition);
    if (mainFrameView.homeFrameView != null) {
        mainFrameView.homeFrameView.goTop();
    } else if (mainFrameView.tvShoppingFrameView != null) {
        mainFrameView.tvShoppingFrameView.goTop();
    } else if (mainFrameView.giftFrameView != null) {
        mainFrameView.giftFrameView.goTop();
    } else if (mainFrameView.ssagundealFrameView != null) {
        mainFrameView.ssagundealFrameView.goTop();
    }
}

layout_floating.xml #

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="14dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/main_btn_top"
        android:contentDescription="@string/description_top"
        android:onClick="onClickedFloatingTop" />
</FrameLayout>

MainFramView.java #

if (mRootView == null) {
        mRootView = inflate(context, R.layout.fragment_main, this);

        mViewBtnShow = (FrameLayout) mRootView.findViewById(R.id.fragment_hide_main);

        mPullToRefreshVodView = (MainPullToRefreshVodView) mRootView.findViewById(R.id.fragment_vod_view);

        mLoadingImage = (ImageView) mRootView.findViewById(R.id.loading_img);
        mLoadingImage.setBackgroundResource(R.drawable.loading_animation);
        mLoadingAnimation = (AnimationDrawable) mLoadingImage.getBackground();

        // floating top 설정
        mFloatingTop = mRootView.findViewById(R.id.floating_top_button);

        mNativeFrameLayout = mRootView.findViewById(R.id.fragment_main_native);

        nativeLoadingView  = mRootView.findViewById(R.id.sv_native_bg_img);

        // VOD 웹뷰 설정
        createVodWebView();

        // network error view - 아이콘 위치 설정
        View networkErrorView = mVodView.getNetworkErrorView();
        int headerHeight = (int) getResources().getDimension(R.dimen.main_header_height);
        int headerTabHeight = (int) getResources().getDimension(R.dimen.main_header_tab_height);
        int paddingBottom = networkErrorView.getPaddingBottom() + headerHeight + headerTabHeight;
        networkErrorView.setPadding(0, 0, 0, paddingBottom);
}

实现方案 #

1. 启用WebView的JavaScript支持 #

如果网页依赖JS控制滚动，必须先开启JS支持：

webView.settings.javaScriptEnabled = true

2. 优化WebView滚动到顶部的逻辑 #

原代码中webView.scrollTo(0,0)可能失效，可采用以下两种方式：

方式一：调用网页JS实现滚动

直接执行网页的滚动脚本，比loadUrl更高效且不会刷新页面：

webView.evaluateJavascript("window.scrollTo(0, 0)", null)
// 若网页有自定义返回顶部方法（如goTop()），可替换为：
webView.evaluateJavascript("window.goTop()", null)

方式二：强制WebView滚动

如果网页无JS支持，通过UI线程触发滚动：

webView.post {
    webView.smoothScrollTo(0, 0) // 平滑滚动，scrollTo为瞬间滚动
}

3. 根据滚动状态控制按钮显隐 #

监听WebView滚动事件，当滚动超过一定距离时显示按钮：

webView.setOnScrollChangeListener { _, _, scrollY, _, _ ->
    floatingTopButton.visibility = if (scrollY > 200) View.VISIBLE else View.GONE
}

4. Kotlin版本点击事件实现 #

将原Java逻辑转为Kotlin：

fun onClickedFloatingTop(view: View) {
    getCurrentWebView()?.let { webView ->
        webView.evaluateJavascript("window.scrollTo(0, 0)", null)
    }

    getCurrentVODView()?.closeOffScreenVideo(ImageUtil.getDisplayHeight(context), true)

    setMainHeaderPositionAsDefault()

    val mainFrameView = getFragmentByIndex(mCurrentPosition)
    when {
        mainFrameView.homeFrameView != null -> mainFrameView.homeFrameView.goTop()
        mainFrameView.tvShoppingFrameView != null -> mainFrameView.tvShoppingFrameView.goTop()
        mainFrameView.giftFrameView != null -> mainFrameView.giftFrameView.goTop()
        mainFrameView.ssagundealFrameView != null -> mainFrameView.ssagundealFrameView.goTop()
    }
}

内容的提问来源于stack exchange，提问作者Chae Seong Lim