Добавить индикатор загрузки / индикатор выполнения на заставку Android Phonegap - PullRequest
Новая
       50

Добавить индикатор загрузки / индикатор выполнения на заставку Android Phonegap

9 голосов
/ 22 февраля 2012

У меня есть проект PhoneGap 1.4.1 / jQueryMobile 1.0.1 / Android, который прекрасно показывает res / drawable / splash.png, и заставка исчезает после загрузки 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 ]

5 голосов
/ 26 июля 2012

Мне наконец-то удалось добавить индикатор прогресса в веб-просмотр PhoneGap, который будет отображать прогресс (процент) загрузки страницы. Надеюсь, это поможет вам

Как этот другой ответ объясняет , appView находится внутри LinearLayout. Защищенная (и, следовательно, унаследованная) переменная root ссылается на этот LinearLayout. Вы можете добавить свои (все) нативные View s к этой переменной.

Вот как я это сделал:

  1. Создание макета в вашем res / layout / 

    <?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 голосов
/ 22 марта 2012

Я думаю, что нашел решение (не полное решение, а решение с вращением). Внутри подкласса 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

0 голосов
/ 24 июля 2013

Прекратите использовать Activity, которая расширяет DroidGap, создайте обычную Android-активность и поместите org.apache.cordova.CordovaWebView в файл макета. Это даст вам гораздо больше гибкости.

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

0 голосов
/ 22 февраля 2012

Я знаю, что вы можете легко добавить индикатор загрузки на экран-заставку, установив для параметра ShowSplashScreenSpinner значение YES в файле конфигурации PhoneGap (PhoneGap.plist на iOS)

Показывает счетчик посерединезаставки во время загрузки приложения

Редактировать: Это работает только с iOS.

0 голосов
/ 22 февраля 2012

Если вы используете jquery-mobile, вы можете сделать: 

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

Затем в onProgressChanged сделать: 

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