将加载指示符/进度条添加到Phonegap Android启动画面

时间:2012-02-22 12:44:41

标签: android jquery-mobile cordova webview splash-screen

我有一个PhoneGap 1.4.1 / jQueryMobile 1.0.1 / Android项目,显示res / drawable / splash.png就好了,加载WebView后闪屏就消失了。

我想在启动画面中添加某种进度指示器百分比文本,但到目前为止都没有成功。

过去我使用普通的webview就取得了成功:

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

但所有这只是一个带有进度指示器文本和背景图像的布局,可以通过以下方式更新:

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

有谁知道如何将此功能添加到现有的PhoneGap实现中,或者知道如何用自己的实现替换PhoneGap?

5 个答案:

答案 0 :(得分:5)

我认为我找到了一个解决方案(不是一个完整的解决方案,而是一个微调解决方案)。在DroidGap子类中,您应该添加以下行:

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

这是我的完整示例

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

您可以在此部分设置几个属性,请参阅以下代码:https://svn.apache.org/repos/asf/incubator/callback/phonegap-android/branches/WebSockets/framework/src/com/phonegap/DroidGap.java

答案 1 :(得分:5)

我终于设法将一个进度条添加到PhoneGap webView,它将显示页面加载的进度(百分比)。希望这可以帮助你

作为this other answer explainsappView位于LinearLayout内。受保护(因此继承)的变量根引用此LinearLayout。您可以将(无论)本机View添加到此变量中。

我是这样做的:

  1. 在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>
    
  2. 按照添加WebView进度条通常会遵循的所有步骤进行操作:

    final Activity activity = this;
    private ProgressBar progessBar1;
    
  3. 添加您创建的布局:

    View footer = View.inflate(getContext(), R.layout.mainshop, null);
    root.addView(footer);
    

    如果在致电super.loadURL(...);后添加它,它将显示在底部。如果您之前添加它,布局将显示在appView之前。

  4. 之后你只需添加:

    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+"");
    
             }
        });
    
  5. 干杯!

答案 2 :(得分:0)

我知道您可以通过在PhoneGap配置文件中将ShowSplashScreenSpinner选项设置为YES(iOS上的PhoneGap.plist)轻松地将加载指示符添加到启动画面

在应用程序加载时,它会在启动画面中间显示一个微调器

编辑:这仅适用于iOS。

答案 3 :(得分:0)

停止使用扩展DroidGap的Activity,创建常规Android活动并将org.apache.cordova.CordovaWebView放入布局文件中。它会给你更多的灵活性。

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

答案 4 :(得分:-1)

如果你使用jquery-mobile,你可以这样做:

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

然后在onProgressChanged上执行:

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