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

问题描述

我已经把的WebView加载内ViewPager的图像。当我尝试滚动图像水平我移动到下一个视图，而不是滚动的图像。

是否有可能使其滚动到图像的结尾移动到下一个视图之前？

  @覆盖
公共对象instantiateItem（查看视图，int i）以{

    的WebView的WebView =新的WebView（view.getContext（））;
    webview.setHorizo​​ntalScrollBarEnabled（真正的）;
    webview.loadUrl（http://www.site.with.an/image.gif）;
    （（ViewPager）视图）.addView（web视图，0）;

    返回的WebView;
}
 

解决方案

下面是一个真正可行的解决方案，这将滚动的WebView 在一个水平刷卡，只要它可以滚动。如果的WebView 无法再滚动，下一个水平轻扫将由 ViewPager 来切换页面。

扩展的WebView

通过API级14（ICS）的查看方法 canScrollHorizo​​ntally（）已经出台，这是我们需要要解决的问题。如果你只为ICS或以上的开发，你可以直接使用此方法，并跳到下一个部分。否则，我们需要在我们自己的实现此方法，以使溶液的工作也对$ P $对ICS

要做到这一点只需从的WebView 派生自己的类：

 公共类ExtendedWebView扩展的WebView {
    公共ExtendedWebView（上下文的背景下）{
        超（上下文）;
    }

    公共ExtendedWebView（上下文的背景下，ATTRS的AttributeSet）{
        超（背景下，ATTRS）;
    }

    公共布尔canScrollHor（INT方向）{
        最终诠释偏移量= computeHorizo​​ntalScrollOffset（）;
        最终诠释范围= computeHorizo​​ntalScrollRange（） -  computeHorizo​​ntalScrollExtent（）;
        如果（范围== 0）返回false;
        如果（方向℃，）{
            返回偏移GT; 0;
        } 其他 {
            返回偏移LT;范围 -  1;
        }
    }
}
 

重要提示：记得引用您的 ExtendedWebView 布局文件，而不是标准的内部的WebView 。

扩展 ViewPager

现在你需要扩展 ViewPager 来处理正确处理水平刷卡。这需要做的事情在任何情况下 - 无论您使用的是无论ICS与否：

 公共类WebViewPager扩展ViewPager {
    公共WebViewPager（上下文的背景下，ATTRS的AttributeSet）{
        超（背景下，ATTRS）;
    }

    @覆盖
    保护布尔canScroll（视图V，布尔checkV，INT DX，诠释的x，int y）对{
        如果（V的instanceof ExtendedWebView）{
            返回（（ExtendedWebView）V）.canScrollHor（-dx）;
        } 其他 {
            返回super.canScroll（ⅴ，checkV，DX，X，Y）;
        }
    }
}
 

重要提示：记得引用您的 WebViewPager 布局文件，而不是标准的内部 ViewPager 。

这就是它！

更新2012/07/08：我最近注意到，上面显示的东西，似乎不再需要使用当前的实施 ViewPager <当/ code>。 当前的实施似乎捕捉滚动事件的 ViewPager canScroll 方法之前正确检查分意见C> <一个href="https://github.com/android/platform_frameworks_support/blob/master/v4/java/android/support/v4/view/ViewPager.java">here).不知道到底，当执行已更改为正确地处理这个 - 我还需要上面在Android姜饼（2.3.x）和之前的code

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;
}

解决方案

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.

Extending the WebView

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.

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;
        }
    }
}

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

Extending the ViewPager

Now you need to extend the ViewPager to handle 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);
        }
    }
}

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

That's it!

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.

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