如何在 XWalkView 中添加进度
How to add a Progress in XWalkView
我用XWalkView加载网页，像这样：
<org.xwalk.core.XWalkView android:id="@+id/webview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</org.xwalk.core.XWalkView>
Activity
XWalkView mXWalkView = (XWalkView) findViewById(R.id.webview);
mXWalkView.load("http://xxxxxxxx", null);
有关实现 XWalkView 的详细信息，请参阅我的这篇 。
但是现在页面内容太多，加载完成需要4~5秒。这将导致应用页面空白。我想为 XWalkView 添加加载进度。因为XWalkView的demo太少，真不知道从何下手
如有任何帮助，我们将不胜感激。谢谢！
已编辑：根据@Srihari 的回答尝试后，又出现了一个奇怪的问题。
进度显示很好，当它完成 100% 时，它就消失了。但是它再次以100%跳出，页面加载完成后很快，就再也没有消失。
activity:
class ResourceClient extends XWalkResourceClient {
public ResourceClient(XWalkView xwalkView) {
super(xwalkView);
}
public void onLoadStarted(XWalkView view, String url) {
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.VISIBLE);
super.onLoadStarted(view, url);
Log.d("INFO", "Load Started:" + url);
}
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
Log.d("INFO", "Load Finished:" + url);
bottomBar = (BottomBar) findViewById(R.id.bottomBar);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.GONE);
}
public void onProgressChanged(XWalkView view, int progressInPercent) {
super.onProgressChanged(view, progressInPercent);
Log.d("INFO", "Loading Progress:" + progressInPercent);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setProgress(progressInPercent);
}
xml
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_marginTop="50dp" />
显示 activity 或片段的创建进度条。
xWalkView.setResourceClient(new XWalkResourceClient(xWalkView){
@Override
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
// Stop your progress bar here
}
});
希望对您有所帮助..
我发现问题中的奇怪行为是由我页面中的动态内容引起的。因为我的页面有stlloader，所以我实现了xwalkview加载进度和stlloader加载进度。
Xwalkview 加载进度：
class ResourceClient extends XWalkResourceClient {
public ResourceClient(XWalkView xwalkView) {
super(xwalkView);
}
public void onLoadStarted(XWalkView view, String url) {
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.VISIBLE);
super.onLoadStarted(view, url);
Log.d("INFO", "Load Started:" + url);
}
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
Log.d("INFO", "Load Finished:" + url);
bottomBar = (BottomBar) findViewById(R.id.bottomBar);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.GONE);
}
public void onProgressChanged(XWalkView view, int progressInPercent) {
super.onProgressChanged(view, progressInPercent);
Log.d("INFO", "Loading Progress:" + progressInPercent);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setProgress(progressInPercent);
}
stlloader加载进度：
var loader = new THREE.STLLoader(manager);
loader.load( "{{ $modelfilepath }}", function ( geometry ) {
var meshMaterial = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
if (geometry.hasColors) {
meshMaterial = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
centerOffset = geometry.center();
var mesh = new THREE.Mesh( geometry, meshMaterial );
tV.z = (-geometry.boundingBox.min.z + geometry.boundingBox.max.z)/2;
mesh.matrix.elements[14] = tV.z;
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.matrixAutoUpdate = false;
boundBox.setFromObject(mesh);
if(!isFillin(boundBox.min, boundBox.max, machineLength))
{
mesh.material.color.setHex(0xff0000);
}
stlMesh = mesh;
scene.add( mesh );
objects.push(mesh);
showPosition(0, 0, tV.z);
}, function(progressItem) {
$('#loaderstatus').html("Loading... " + (Math.round(progressItem.loaded / progressItem.total *100)) + "%");
}, function(){
});
我解决了 activity_main:
中的问题
<org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@android:color/transparent"
android:visibility="visible"></FrameLayout>
<ProgressBar
android:id="@+id/ProgressBar"
style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Large"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="top"
android:layout_marginTop="3dp"
android:background="@android:color/transparent"
android:progress="10"
android:progressDrawable="@drawable/custom_progress" />
</org.xwalk.core.XWalkView>
在我解决我的问题之前，我去麦加做副朝我尝试 2 天在副朝后解决问题我花了 2 分钟解决我的问题我的上帝帮助我
请不要删除我们所有来自上帝的谈话
你需要向上帝祈祷，你会得到你想要的一切吗
这是我的 MainActivity
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.View;
import android.webkit.ValueCallback;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkResourceClient;
import org.xwalk.core.XWalkUIClient;
import org.xwalk.core.XWalkView;
import static com.github.crazyorr.embeddedcrosswalk.R.string.url;
public class MainActivity extends AppCompatActivity {
private XWalkView mXWalkView;
private FrameLayout frameLayout;
private SwipeRefreshLayout swipe;
private ProgressBar progressBar;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
frameLayout = (FrameLayout) findViewById(R.id.framelayout);
progressBar = (ProgressBar) findViewById(R.id.ProgressBar);
swipe= (SwipeRefreshLayout) findViewById(R.id.swipe);
swipe.setColorSchemeResources(R.color.orange, R.color.green, R.color.blue, R.color.purple);
swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh()
{mXWalkView.reload(url);}
});
loadweb();
}
public void loadweb(){
mXWalkView = (XWalkView) findViewById(R.id.webview);
mXWalkView.setResourceClient(new ResourceClient(mXWalkView));
mXWalkView.setUIClient(new XWalkUIClient(mXWalkView) {
@Override
public void onPageLoadStarted(XWalkView view, String url) {
frameLayout.setVisibility(View.VISIBLE);
progressBar.setVisibility(ProgressBar.VISIBLE);
}
@Override
public void onPageLoadStopped(XWalkView view, String url, XWalkUIClient.LoadStatus status) {
progressBar.setVisibility(view.GONE);
swipe.setRefreshing(false);
}
});
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
mXWalkView.getSettings().setJavaScriptEnabled(true);
mXWalkView.loadUrl("https://www.google.com.sa");
}
class ResourceClient extends XWalkResourceClient {
public ResourceClient(XWalkView xwalkView) {
super(xwalkView);
}
public void onProgressChanged(XWalkView view, int progressInPercent){
frameLayout.setVisibility(View.VISIBLE);
progressBar.setProgress(progressInPercent);
if (progressInPercent == 100){
frameLayout.setVisibility(View.GONE);
}
super.onProgressChanged(view, progressInPercent);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public void onBackPressed() {
mXWalkView.evaluateJavascript("onBackPressed()", new ValueCallback<String>() {
@Override
public void onReceiveValue(final String value) {
if (!Boolean.valueOf(value)) {
MainActivity.super.onBackPressed();
}
}
});
}
}
希望对你有所帮助
我用XWalkView加载网页，像这样：
<org.xwalk.core.XWalkView android:id="@+id/webview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</org.xwalk.core.XWalkView>
Activity
XWalkView mXWalkView = (XWalkView) findViewById(R.id.webview);
mXWalkView.load("http://xxxxxxxx", null);
有关实现 XWalkView 的详细信息，请参阅我的这篇
但是现在页面内容太多，加载完成需要4~5秒。这将导致应用页面空白。我想为 XWalkView 添加加载进度。因为XWalkView的demo太少，真不知道从何下手
如有任何帮助，我们将不胜感激。谢谢！
已编辑：根据@Srihari 的回答尝试后，又出现了一个奇怪的问题。 进度显示很好，当它完成 100% 时，它就消失了。但是它再次以100%跳出，页面加载完成后很快，就再也没有消失。
activity:
class ResourceClient extends XWalkResourceClient {
public ResourceClient(XWalkView xwalkView) {
super(xwalkView);
}
public void onLoadStarted(XWalkView view, String url) {
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.VISIBLE);
super.onLoadStarted(view, url);
Log.d("INFO", "Load Started:" + url);
}
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
Log.d("INFO", "Load Finished:" + url);
bottomBar = (BottomBar) findViewById(R.id.bottomBar);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.GONE);
}
public void onProgressChanged(XWalkView view, int progressInPercent) {
super.onProgressChanged(view, progressInPercent);
Log.d("INFO", "Loading Progress:" + progressInPercent);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setProgress(progressInPercent);
}
xml
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_marginTop="50dp" />
显示 activity 或片段的创建进度条。
xWalkView.setResourceClient(new XWalkResourceClient(xWalkView){
@Override
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
// Stop your progress bar here
}
});
希望对您有所帮助..
我发现问题中的奇怪行为是由我页面中的动态内容引起的。因为我的页面有stlloader，所以我实现了xwalkview加载进度和stlloader加载进度。
Xwalkview 加载进度：
class ResourceClient extends XWalkResourceClient {
public ResourceClient(XWalkView xwalkView) {
super(xwalkView);
}
public void onLoadStarted(XWalkView view, String url) {
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.VISIBLE);
super.onLoadStarted(view, url);
Log.d("INFO", "Load Started:" + url);
}
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
Log.d("INFO", "Load Finished:" + url);
bottomBar = (BottomBar) findViewById(R.id.bottomBar);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setVisibility(View.GONE);
}
public void onProgressChanged(XWalkView view, int progressInPercent) {
super.onProgressChanged(view, progressInPercent);
Log.d("INFO", "Loading Progress:" + progressInPercent);
mProgress = (ProgressBar) findViewById(R.id.progressBar);
mProgress.setProgress(progressInPercent);
}
stlloader加载进度：
var loader = new THREE.STLLoader(manager);
loader.load( "{{ $modelfilepath }}", function ( geometry ) {
var meshMaterial = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
if (geometry.hasColors) {
meshMaterial = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
centerOffset = geometry.center();
var mesh = new THREE.Mesh( geometry, meshMaterial );
tV.z = (-geometry.boundingBox.min.z + geometry.boundingBox.max.z)/2;
mesh.matrix.elements[14] = tV.z;
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.matrixAutoUpdate = false;
boundBox.setFromObject(mesh);
if(!isFillin(boundBox.min, boundBox.max, machineLength))
{
mesh.material.color.setHex(0xff0000);
}
stlMesh = mesh;
scene.add( mesh );
objects.push(mesh);
showPosition(0, 0, tV.z);
}, function(progressItem) {
$('#loaderstatus').html("Loading... " + (Math.round(progressItem.loaded / progressItem.total *100)) + "%");
}, function(){
});
我解决了 activity_main:
中的问题<org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@android:color/transparent"
android:visibility="visible"></FrameLayout>
<ProgressBar
android:id="@+id/ProgressBar"
style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Large"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="top"
android:layout_marginTop="3dp"
android:background="@android:color/transparent"
android:progress="10"
android:progressDrawable="@drawable/custom_progress" />
</org.xwalk.core.XWalkView>
在我解决我的问题之前，我去麦加做副朝我尝试 2 天在副朝后解决问题我花了 2 分钟解决我的问题我的上帝帮助我
请不要删除我们所有来自上帝的谈话
你需要向上帝祈祷，你会得到你想要的一切吗
这是我的 MainActivity
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.View;
import android.webkit.ValueCallback;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkResourceClient;
import org.xwalk.core.XWalkUIClient;
import org.xwalk.core.XWalkView;
import static com.github.crazyorr.embeddedcrosswalk.R.string.url;
public class MainActivity extends AppCompatActivity {
private XWalkView mXWalkView;
private FrameLayout frameLayout;
private SwipeRefreshLayout swipe;
private ProgressBar progressBar;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
frameLayout = (FrameLayout) findViewById(R.id.framelayout);
progressBar = (ProgressBar) findViewById(R.id.ProgressBar);
swipe= (SwipeRefreshLayout) findViewById(R.id.swipe);
swipe.setColorSchemeResources(R.color.orange, R.color.green, R.color.blue, R.color.purple);
swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh()
{mXWalkView.reload(url);}
});
loadweb();
}
public void loadweb(){
mXWalkView = (XWalkView) findViewById(R.id.webview);
mXWalkView.setResourceClient(new ResourceClient(mXWalkView));
mXWalkView.setUIClient(new XWalkUIClient(mXWalkView) {
@Override
public void onPageLoadStarted(XWalkView view, String url) {
frameLayout.setVisibility(View.VISIBLE);
progressBar.setVisibility(ProgressBar.VISIBLE);
}
@Override
public void onPageLoadStopped(XWalkView view, String url, XWalkUIClient.LoadStatus status) {
progressBar.setVisibility(view.GONE);
swipe.setRefreshing(false);
}
});
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
mXWalkView.getSettings().setJavaScriptEnabled(true);
mXWalkView.loadUrl("https://www.google.com.sa");
}
class ResourceClient extends XWalkResourceClient {
public ResourceClient(XWalkView xwalkView) {
super(xwalkView);
}
public void onProgressChanged(XWalkView view, int progressInPercent){
frameLayout.setVisibility(View.VISIBLE);
progressBar.setProgress(progressInPercent);
if (progressInPercent == 100){
frameLayout.setVisibility(View.GONE);
}
super.onProgressChanged(view, progressInPercent);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public void onBackPressed() {
mXWalkView.evaluateJavascript("onBackPressed()", new ValueCallback<String>() {
@Override
public void onReceiveValue(final String value) {
if (!Boolean.valueOf(value)) {
MainActivity.super.onBackPressed();
}
}
});
}
}
希望对你有所帮助