在 ViewPager 内水平滚动 webview [英] Scroll webview horizontally inside a ViewPager

问题描述

我已经在 ViewPager 中放置了一个加载图像的 WebView.当我尝试水平滚动图像时，我移动到下一个视图而不是滚动图像.

I've put a WebView loading an image inside a ViewPager. When I try to scroll the image horizontally I move over to the next view instead of scrolling the image.

是否可以在移动到下一个视图之前使其滚动到图像的末尾?

Is it possible to make it scroll to the end of the image before moving over to the next view?

@Override
public Object instantiateItem(View view, int i) {

    WebView webview = new WebView(view.getContext());
    webview.setHorizontalScrollBarEnabled(true);
    webview.loadUrl("http://www.site.with.an/image.gif");
    ((ViewPager) view).addView(webview, 0);

    return webview;
}

推荐答案

以下是一个真正可行的解决方案，只要 WebView 可以滚动，它就会在水平滑动时滚动.如果 WebView 无法进一步滚动，则下一次水平滑动将被 ViewPager 消耗以切换页面.

The following is a real working solution which will scroll the WebView on a horizontal swipe as long as it can scroll. If the WebView cannot further scroll, the next horizontal swipe will be consumed by the ViewPager to switch the page.

在 API-Level 14 (ICS) 中引入了 View 方法 canScrollHorizo​​ntally()，我们需要解决这个问题.如果你只为ICS或以上开发，你可以直接使用这种方法并跳到下一节.否则，我们需要自己实现此方法，以使该解决方案也适用于 ICS 之前.

With API-Level 14 (ICS) the View method canScrollHorizontally() has been introduced, which we need to solve the problem. If you develop only for ICS or above you can directly use this method and skip to the next section. Otherwise we need to implement this method on our own, to make the solution work also on pre-ICS.

为此，只需从 WebView 派生您自己的类:

To do so simply derive your own class from WebView:

public class ExtendedWebView extends WebView {
    public ExtendedWebView(Context context) {
        super(context);
    }

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

    public boolean canScrollHor(int direction) {
        final int offset = computeHorizontalScrollOffset();
        final int range = computeHorizontalScrollRange() - computeHorizontalScrollExtent();
        if (range == 0) return false;
        if (direction < 0) {
            return offset > 0;
        } else {
            return offset < range - 1;
        }
    }
}

重要提示:请记住在布局文件中引用您的 ExtendedWebView 而不是标准的 WebView.

Important: Remember to reference your ExtendedWebView inside your layout file instead of the standard WebView.

现在您需要扩展 ViewPager 以正确处理水平滑动.在任何情况下都需要这样做——无论您是否使用 ICS:

Now you need to extend the ViewPager to handle horizontal swipes correctly. This needs to be done in any case -- no matter whether you are using ICS or not:

public class WebViewPager extends ViewPager {
    public WebViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
        if (v instanceof ExtendedWebView) {
            return ((ExtendedWebView) v).canScrollHor(-dx);
        } else {
            return super.canScroll(v, checkV, dx, x, y);
        }
    }
}

重要提示:请记住在布局文件中引用您的 WebViewPager，而不是标准的 ViewPager.

Important: Remember to reference your WebViewPager inside your layout file instead of the standard ViewPager.

就是这样！

2012/07/08 更新:我最近注意到，在使用 ViewPager 的当前"实现时，似乎不再需要上面显示的内容.当前"实现似乎在自己捕获滚动事件之前正确检查子视图(请参阅 ViewPager 这里).不确切知道，何时更改实现以正确处理此问题 - 我仍然需要 Android Gingerbread (2.3.x) 及之前的代码.

Update 2012/07/08: I've recently noticed that the stuff shown above seems to be no longer required when using the "current" implementation of the ViewPager. The "current" implementation seems to check the sub views correctly before capturing the scroll event on it's own (see canScroll method of ViewPager here). Don't know exactly, when the implementation has been changed to handle this correctly -- I still need the code above on Android Gingerbread (2.3.x) and before.

这篇关于在 ViewPager 内水平滚动 webview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！