如何解决Android Horizo​​ntalWebview内容溢出屏幕宽度问题？

问题描述

在我的 Android本机项目中，我有一个 Horizo​​ntalWebview ，它逐页加载巨大的html文件。向右滚动时，前几页的内容显示得很好，但滚动几页后，我发现该内容超出了屏幕宽度，如下图所示-

这是我自定义的 Horizo​​ntalWebView -

的代码

public class HorizontalWebView2 extends WebView {
    private float x1 = -1;
    private int pageCount = 0;

    public HorizontalWebView2(Context context,AttributeSet attrs) {
        super(context,attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                x1 = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                float x2 = event.getX();
                float deltaX = x2 - x1;
                if (Math.abs(deltaX) > 100) {
                    // Left to Right swipe action
                    if (x2 > x1) {
                        turnPageLeft();
                        return true;
                    }

                    // Right to left swipe action
                    else {
                        turnPageRight();
                        return true;
                    }

                }
                break;
        }
        return true;
    }

    private int current_x = 0;

    private void turnPageLeft() {
        if (getCurrentPage() > 0) {
            int scrollX = getPrevPagePosition();
            loadAnimation(scrollX);
            current_x = scrollX;
            scrollTo(scrollX,0);
        }
    }

    private int getPrevPagePosition() {
        int prevPage = getCurrentPage() - 1;
        return (int) Math.ceil(prevPage * this.getMeasuredWidth());
    }

    private void turnPageRight() {
        if (getCurrentPage() < pageCount - 1) {
            int scrollX = getNextPagePosition();
            loadAnimation(scrollX);
            current_x = scrollX;
            scrollTo(scrollX,0);
        }
    }

    private void loadAnimation(int scrollX) {
        ObjectAnimator anim = ObjectAnimator.ofInt(this,"scrollX",current_x,scrollX);
        anim.setDuration(500);
        anim.setInterpolator(new LinearInterpolator());
        anim.start();
    }

    private int getNextPagePosition() {
        int nextPage = getCurrentPage() + 1;
        return (int) Math.ceil(nextPage * this.getMeasuredWidth());
    }

    public int getCurrentPage() {
        return (int) (Math.ceil((double) getScrollX() / this.getMeasuredWidth()));
    }

    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }
}

在我的xml布局中，我已按如下所示对其进行了初始化-

<HorizontalWebView2
            android:id="@+id/web_view_horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none"
            />

在我的“活动”课程中，我已经借助 Javascript （如下所示）

private void injectJavascript() {
    String js = "function initialize(){\n" +
            "    var d = document.getElementsByTagName('body')[0];\n" +
            "    var ourH = window.innerHeight;\n" +
            "    var ourW = window.innerWidth;\n" +
            "    var fullH = d.offsetHeight;\n" +
            "    var pageCount = Math.floor(fullH/ourH)+1;\n" +
            "    var currentPage = 0;\n" +
            "    var newW = pageCount*ourW;\n" +
            "    d.style.height = ourH+'px';\n" +
            "    d.style.width = newW+'px';\n" +
            "    d.style.margin = 0;\n" +
            "    d.style.webkitColumnCount = pageCount;\n" +
            "    return pageCount;\n" +
            "}";
    mWebView.loadUrl("javascript:" + js);
    mWebView.loadUrl("javascript:alert(initialize())");

}

我调用了此方法，并像下面一样加载了Webview-

mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        mWebView.setWebViewClient(new WebViewClient() {

            public void onPageFinished(WebView view,String url) {
                injectJavascript();
            }
        });

        mWebView.loadDataWithBaseURL(null,stringHTML,"text/html","UTF-8",null);

我试图通过在xml（Horizo​​ntalWebview）中添加边距和填充来解决内容溢出问题，并且还尝试使用CSS来解决此问题，如下所示-

断字：断字
溢出-x：隐藏

但是没有一个解决方案真正起作用。因此，我需要一个永久性的解决方案，以便每个位置的内容都保留在屏幕内并且不会溢出屏幕。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）