机器人的WebView呈现空白/白，视图不CSS的变化或HTML的变化更新，动画是波涛汹涌 [英] Android WebView renders blank/white, view doesn't update on css changes or HTML changes, animations are choppy
问题描述
在以往我做一个CSS类的变化，这些变化并不总是出现。这似乎发生时，我有一个触摸事件，增加了像一个倒类名的按钮。该按钮不会更新，而且也没有任何其他的页面上。这是非常多变的，当它工作的地方。我也注意到，有时我的元素出现白色，没有内容或任何东西。这是非常令人沮丧的！
When ever I make a css class change, the changes don't always appear. This appears to happen when I have a touch event that adds something like a down class name to a button. The button doesn't update, and neither does anything else on the page. It's very inconstant in when it works. I've also noticed that sometimes my elements appear white with no content or anything. This is very frustrating!
推荐答案
我回答我自己的问题，希望能够帮助人们用同样的问题我。
I'm answering my own question to hopefully help people out with the same issues as me.
好。我一直在处理与Android的WebView功能和PhoneGap的几个星期了。我来恨Android的WebKit的执行的。这太可怕了。在动画或渲染方面没有什么是你所期望的。
Okay. I've been dealing with Android's WebView and PhoneGap for a few weeks now. I've come to hate Android's implementation of WebKit. It's awful. Nothing in terms of animation or rendering is ever as you would expect.
我试过几种方法来使事情变得更好，甚至是所有臭名昭著的-webkit-变换：translate3d（0,0,0）;即使是没有工作都非常清楚。
I've tried several methods to making things better, even the all notorious -webkit-transform: translate3d(0,0,0); Even that didn't work all too well.
我想与大家分享一下做的工作。
Let me share with you what did work.
首先，使用最新的API。我使用的API 15.在你的Android清单，请务必启用硬件加速。如果你的API的版本不支持这个，然后转移到下一位。
First, use the most recent API. I'm using API 15. In your android manifest, make sure to enable hardware acceleration. If your version of API does not support this, then move on to the next bit.
如果您的版本不支持它，你可以通过修改你的清单启用它：
If your version does support it, you can enable it by modifying your manifest:
<application
...
android:hardwareAccelerated="true"
...
>
此外，请确保您的清单具有最小支持的API到您所使用的。由于我使用的是API 15，这是我的表现有：
Also, make sure that your manifest has the minimum supported API to the one that you are using. Since I'm using API 15, this is what my manifest has:
<uses-sdk
android:minSdkVersion="15"
android:targetSdkVersion="15" />
现在，在什么将是psented在web视图$ P $，加上这样的事情您的主CSS文件：
Now, in your primary CSS file for what will be presented in a WebView, add something like this:
body div {
-webkit-transform: translate3d(0,0,0);
}
添加到身体的div位与你有任何其他的元素类型;你也许可以排除的图像，UL，李等原因将这个CSS样式的一切仅仅是通过试验和错误，我发现蛮力把它应用到一切似乎最好的工作。有了更大的DOM树，你可能需要更具体的。我不知道什么样的规格将然而是，
Add onto the body div bit with any other element types you have; you can probably exclude images, ul, li, etc. The reason for applying this CSS style to everything is just by trial and error, and I found that brute-applying it to everything appears to work the best. With a larger DOM tree, you may need to be more-specific. I'm not sure what the specification would be, however.
当你实例化你的web视图，也有一些设置你要设置：
When you instantiate your webview, there are some settings you'll want to set:
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
this.appView.getSettings().setRenderPriority(RenderPriority.HIGH);
this.appView.getSettings().setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND);
}
倒数第二，但关键的一点：我读通过源$ C $下的WebView，发现关于力重绘这一点微小的评论。有一个静态最终布尔值，比当设置为true，将强制视图始终重绘。我不是巨大的Java语法，但我不认为你可以直接改变一个类的静态最终属性。我所做的就是，我扩展的类像这样：
Second to last, but crucial bit: I was reading through the source code for WebView and found this little tiny comment about force redrawing. There is a static final boolean, than when set to true, will force the view to always redraw. I'm not huge on Java syntax, but I don't think you can directly change a static final attribute of a class. What I did was, I extended the class like so:
import org.apache.cordova.CordovaWebView;
import android.content.Context;
import android.graphics.Canvas;
public class MyWebView extends CordovaWebView {
public static final String TAG = "MyWebView";
public MyWebView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Warning! This will cause the WebView to continuously be redrawn
// and will drain the devices battery while the view is displayed!
invalidate();
}
}
记
请，我使用PhoneGap的，所以我不得不从CordovaWebView延伸。如果在OnDraw中的方法看，有一个叫无效。我不知道是什么巫术这种方法做，但它是pretty的神奇。
Keep in mind, I'm using PhoneGap, so I had to extend from the CordovaWebView. If you see in the onDraw method, there is a call to invalidate. I'm not sure what sorcery this method does, but it's pretty magical.
还有最后一步，如果你使用PhoneGap的。你必须告诉PhoneGap的使用自己的WebView类新的WebView类代替。在您的MainActivity类，补充一点：
There is one final step, if you are using PhoneGap. You have to tell PhoneGap to use your new WebView class instead of their own WebView class. In your MainActivity class, add this:
public void init(){
CordovaWebView webView = new MyWebView(MainActivity.this);
super.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}
这就是它！尝试并运行你的应用程序，看看是否一切顺利得多。在此之前所有的这些变化，该网页将显示为白色，没有任何CSS的变化将被应用到再次点击屏幕后，动画是超级波涛汹涌，甚至并不明显。我要指出的动画依然波涛汹涌，但比以前远远少得多波动。
That's it! Try and run your app and see if everything is much smoother. Before doing all of these changes, the pages would appear white, no CSS changes would be applied until after tapping on the screen again, animations were super choppy or not even noticeable. I should mention that the animations are still choppy, but far much less choppy than before.
如果任何人有任何添加到这个，只是评论下。我总是打开的优化;而且我充分认识到可能有更好的方法来做到我刚才推荐的。
If anyone has anything to add to this, just comment under. I'm always open for optimizations; and I'm fully aware there may be better ways to do what I have just recommended.
如果我的上述解决方案，为你没有工作，你可以描述你的具体情况和什么样的结果，你所看到的机器人的WebView？
If my above solution did not work for you, could you describe your specific situation and what results you are seeing with Androids WebView?
最后，我已经启用了这个答案为社区维基，所以任何人，每个人，随时作出调整。
Lastly, I have enabled this answer as a "community wiki", so anyone and everyone, feel free to make adjustments.
谢谢！
- 编辑 -
通过最最新的PhoneGap，你需要让你的init（）方法看起来更像是这样的：
With the most latest PhoneGap, you'll need to have your init() method look more like this:
public void init(){
CordovaWebView webView = new MyWebView(MainActivity.this);
super.init(webView, new IceCreamCordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}
这篇关于机器人的WebView呈现空白/白，视图不CSS的变化或HTML的变化更新，动画是波涛汹涌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
