Add loading indicator/progress bar to Phonegap Android splashscreen

问题

I have a PhoneGap 1.4.1 / jQueryMobile 1.0.1 / Android project which is showing the res/drawable/splash.png just fine, and the splashscreen goes away once the WebView is loaded.

I would like to add some sort of progress indicator percentage text to the splashscreen but have been unsuccessful so far.

I have had success with this in the past by using a normal webview like so:

myWebView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        myLoadingView.setVisibility(View.GONE);
        myWebView.setVisibility(View.VISIBLE);
    }
});
myWebView.loadUrl(...);

but all that was just a layout with a progress indicator text and a background image that would get updated with:

myWebView.setWebChromeClient(new WebChromeClient() {
    public void onProgressChanged(WebView view, int progress) {
        myLoadingView.setText(progress+"%");
    }
});

Does anyone know how I can add this functionality to the existing PhoneGap implementation, or know how I can replace the PhoneGap one with an implementation of my own?

回答1:

I think I've found a solution (not a full solution, but a spinner solution). Inside DroidGap subclass you should add this line:

super.setStringProperty("loadingDialog", "Wait, Loading...");

Here is my full example

public class MainActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.setIntegerProperty("splashscreen", R.drawable.splash);
        // Display a native loading dialog.  Format for value = "Title,Message".  
        // (String - default=null)
        super.setStringProperty("loadingDialog", "Wait,Loading Demo...");

       super.loadUrl("file:///android_asset/www/index.html");
      }
}

There are several properties you could set up in this section, please see this code: https://svn.apache.org/repos/asf/incubator/callback/phonegap-android/branches/WebSockets/framework/src/com/phonegap/DroidGap.java

回答2:

I finally managed to add a progress bar to a PhoneGap webView which will show the progress (percentage) of the page load. Hope this helps you

As this other answer explains, appView is located inside a LinearLayout. The protected (and therefore inherited) variable root references this LinearLayout. You can add your (whatever) native Views to this variable.

Here is how I did:

Create a layout in your res/layouts/

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:maxHeight="10dip"
        android:minHeight="10dip" />

</LinearLayout>

Follow all the steps you would normally follow for adding a WebView progress bar:
```
final Activity activity = this;
private ProgressBar progessBar1;
```
Add the layout you created:
```
View footer = View.inflate(getContext(), R.layout.mainshop, null);
root.addView(footer);
```
If you add it after calling super.loadURL(...); it will be displayed at the bottom. If you add it before, the layout will be displayed before the appView.

After that you simply add this:

progessBar1 = (ProgressBar) findViewById(R.id.progressBar1);

this.appView.setWebChromeClient(new WebChromeClient() {

        public void onProgressChanged(WebView view, int progress) { 
            activity.setProgress(progress * 1000);
            if(progress < 100 && progessBar1.getVisibility() == ProgressBar.GONE) {
                progessBar1.setVisibility(ProgressBar.VISIBLE);
            }
            progessBar1.setProgress(progress);
            if(progress == 100) {
                progessBar1.setVisibility(ProgressBar.GONE);
            }

            Log.d("Progress", progress+"");

         }
    });

Cheers!

回答3:

I know you can easily add a loading indicator to your splash screen by setting the ShowSplashScreenSpinner option to YES in your PhoneGap configuration file (PhoneGap.plist on iOS)

It shows a spinner in the middle of the splash screen while the app is loading

Edit: This only works with iOS.

回答4:

Stop using a Activity that extends DroidGap, create a regular Android activity and put org.apache.cordova.CordovaWebView in a layout file. It will give you much more flexibility.

http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_android.md.html#Embedding%20Cordova%20WebView%20on%20Android

回答5:

If you use jquery-mobile you can do:

$.mobile.showPageLoadingMsg();
$('.ui-loader h1').html('<h1>Saving ... <span id="ui-loading-extra"></span>');

Then in onProgressChanged do:

$('#ui-loading-extra').text(progress  + '%');

来源：https://stackoverflow.com/questions/9395010/add-loading-indicator-progress-bar-to-phonegap-android-splashscreen

标签

android

jquery-mobile

cordova

webview

splash-screen