滚动视图中的 Web 视图 [英] Webview in Scrollview
问题描述
我必须将 WebView 放入 ScrollView.但是我必须在 webview 之前将一些视图放入同一个滚动视图中.所以它看起来像这样:
I have to place WebView into ScrollView. But I have to put some views into the same scrollview before webview. So it looks like this:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="@+id/articleDetailPageContentLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/articleDetailRubricLine"
android:layout_width="fill_parent"
android:layout_height="3dip"
android:background="@color/fashion"/>
<ImageView
android:id="@+id/articleDetailImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="@drawable/article_detail_image_test"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:text="PUBLISH DATE"/>
<WebView
android:id="@+id/articleDetailContentView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/fashion"
android:isScrollContainer="false"/>
</LinearLayout>
我从后端获取了一些 HTML 信息.它没有任何正文或头部标签，只有被 或 或其他一些标签包围的数据.它还有 标签.有时图片对于当前屏幕宽度来说太宽了.所以我在 HTML 的开头添加了一些 css.所以我像这样将数据加载到 webview:
I'm getting some HTML info from backend. It has no any body or head tags, just data surrounded by <p> or <h4> or some other tags. Also it has <img> tags in there. Sometimes pictures are too wide for current screen width. So I added some css in the begining of HTML. So I loads data to webview like this:
private final static String WEBVIEW_MIME_TYPE = "text/html";
private final static String WEBVIEW_ENCODING = "utf-8";
String viewport = "<head><meta name="viewport" content="target-densitydpi=device-dpi" /></head>";
String css = "<style type="text/css">" +
"img {width: 100%;}" +
"</style>";
articleContent.loadDataWithBaseURL("http://", viewport + css + articleDetail.getContent(), WEBVIEW_MIME_TYPE,
WEBVIEW_ENCODING, "about:blank");
有时当页面加载时，scrollview 会滚动到 webview 开始的位置.我不知道如何解决这个问题.
Sometimes when page loaded, scrollview scrolls to place where webview begins. And I don't know how to fix that.
此外，有时在 webview 内容之后会出现巨大的空白区域.我也不知道该怎么办.
Also, sometimes there is huge white empty space appears after webview content. I also don't know what to do with that.
有时滚动视图的滚动条会在我滚动时随机开始抽搐...
Sometimes scrollview's scrollbars starts twitch randomly while I scrolling...
我知道将 webview 放入 scrollview 是不对的，但似乎我没有其他选择.任何人都可以建议将所有视图和所有 HTML 内容放置到 webview 的正确方法吗?
I know that it's not right to place webview into scrollview, but it seems like I have no other choise. Could anyone suggest rigth way to place all views and all HTML content to webview?
推荐答案
Update 2014-11-13: 由于 Android KitKat 没有下面描述的解决方案 - 您需要寻找不同的方法，例如Manuel Peinado 的 FadingActionBar，为 WebView 提供滚动标题.
Update 2014-11-13: Since Android KitKat neither of the solutions described below are working -- you will need to look for different approaches like e.g. Manuel Peinado's FadingActionBar which provides a scrolling header for WebViews.
2012-07-08 更新:Nobu games"善意地创建了一个 TitleBarWebView 类将预期行为带回 Android Jelly Bean.在旧平台上使用时，它将使用隐藏的 setEmbeddedTitleBar() 方法，当在 Jelly Bean 或更高版本上使用时，它将模仿相同的行为.源代码在 Apache 2 许可下可用 at google code
Update 2012-07-08: "Nobu games" kindly created a TitleBarWebView class bringing the expected behavior back to Android Jelly Bean. When used on older platforms it will use the hidden setEmbeddedTitleBar() method and when used on Jelly Bean or above it will mimic the same behavior. The source code is available under the Apache 2 license at google code
更新 2012-06-30: 似乎 setEmbeddedTitleBar() 方法已在 Android 4.1 aka Jelly Bean 中删除:-(
Update 2012-06-30: It seems as if the setEmbeddedTitleBar() method has been removed in Android 4.1 aka Jelly Bean :-(
原答案:
可以将 WebView 放入 ScrollView 并且它确实有效.我在 Android 1.6 设备上的 GoodNews 中使用它.主要的缺点是用户不能滚动对角线"，意思是:如果网页内容超过了屏幕的宽度，ScrollView 负责在 WebView 处进行水平滚动滚动.由于其中只有一个处理触摸事件，因此您可以水平或垂直滚动但不能对角滚动.
It is possible to place a WebView into a ScrollView and it does work. I am using this in GoodNews on Android 1.6 devices. The main drawback is that the user cannot scroll "diagonal" meaning: If the web content exceeds the width of the screen the ScrollView is responsible for vertical scrolling at the WebView for horizontal scrolling. As only one of them handles the touch events you can either scroll horizontally or vertically but not diagonal.
此外，还有您描述的一些烦人的问题(例如，加载比前一个小的内容时垂直空间为空).我在 GoodNews 中找到了所有解决方法，但现在想不起来了，因为我找到了更好的解决方案:
Further on there are some annoying problems as described by you (e.g. empty vertical space when loading a content smaller than the previous one). I've found workarounds for all of them in GoodNews, but cannot remember them now, because I've found a much better solution:
如果您只将 WebView 放入 ScrollView 以将控件above 放在 Web 内容之上，并且您可以仅支持 Android 2 和上面，那么就可以使用WebView隐藏的内部setEmbeddedTitleBar()方法.它已在 API 级别 5 中引入，并且(意外地?)只发布了一个版本(我认为它是 3.0).
If you only put the WebView into the ScrollView to place Controls above the web content and you are OK to support only Android 2 and above, then you can use the hidden internal setEmbeddedTitleBar() method of the WebView. It has been introduced in API level 5 and (accidentally?) became public for exactly one release (I think it was 3.0).
此方法允许您将布局嵌入到 WebView 中，该布局将放置在 Web 内容上方.这种布局在垂直滚动时会滚出屏幕，但在网页内容水平滚动时会保持在相同的水平位置.
This method allows you to embed a layout into the WebView which will be placed above the web content. This layout will scroll out the screen when scrolling vertically but will be kept at the same horizontal position when the web content is scrolled horizontally.
由于此方法不是由 API 导出的，因此您需要使用 Java 反射来调用它.我建议按如下方式派生一个新类:
As this method isn't exported by the API you need to use Java reflections to call it. I suggest to derive a new class as followed:
public final class WebViewWithTitle extends ExtendedWebView {
private static final String LOG_TAG = "WebViewWithTitle";
private Method setEmbeddedTitleBarMethod = null;
public WebViewWithTitle(Context context) {
super(context);
init();
}
public WebViewWithTitle(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
try {
setEmbeddedTitleBarMethod = WebView.class.getMethod("setEmbeddedTitleBar", View.class);
} catch (Exception ex) {
Log.e(LOG_TAG, "could not find setEmbeddedTitleBar", ex);
}
}
public void setTitle(View view) {
if (setEmbeddedTitleBarMethod != null) {
try {
setEmbeddedTitleBarMethod.invoke(this, view);
} catch (Exception ex) {
Log.e(LOG_TAG, "failed to call setEmbeddedTitleBar", ex);
}
}
}
public void setTitle(int resId) {
setTitle(inflate(getContext(), resId, null));
}
}
然后在您的布局文件中，您可以使用
Then in your layout file you can include this using
<com.mycompany.widget.WebViewWithTitle
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
在代码中的其他地方，您可以使用要嵌入到 WebView 中的布局的 ID 调用 setTitle() 方法.
and somewhere else in your code you can call the setTitle() method with the ID of the layout to be embedded into the WebView.
这篇关于滚动视图中的 Web 视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
