Xamarin: Wartedialog Daten laden: Unterschied zwischen den Versionen

Zeile 1: Zeile 1:
 
==='''Wartedialog für Xamarin App '''===
 
==='''Wartedialog für Xamarin App '''===
Sie haben eine mobile App entwickelt, die ihre Daten aus dem Internet, z.B. von einem Webservice, abruft. Es dauert ein bisschen,<br />
+
Sie haben eine mobile App entwickelt, die ihre Daten aus dem Internet, z.B. von einem Webservice, abruft. Es dauert ein bisschen, bis die Daten komplett geladen werden und der Benutzer Ihrer App muss diese ein paar Sekunden vor dem leeren Bildschirm sitzen bleiben. Das möchten Sie ändern und den Ladeprozess mit einem Wartedialog klar andeuten.  
bis die Daten komplett geladen werden und der Benutzer Ihrer App muss diese ein paar Sekunden vor dem leeren Bildschirm sitzen bleiben.<br />
 
Das möchten Sie ändern und den Ladeprozess mit einem Wartedialog klar andeuten.  
 
 
   
 
   
 
==='''Viewmodel vorbereiten'''===
 
==='''Viewmodel vorbereiten'''===
Zeile 54: Zeile 52:
 
         }
 
         }
 
</pre>
 
</pre>
 +
 
==='''Wartedialog für Xamarin.Android'''===
 
==='''Wartedialog für Xamarin.Android'''===
Zuerst nehmen Sie bitte in das Layout Ihrer Xamarin.Android-App ein ProgressBar mit auf. Dieses sollte mittels<br />
+
Zuerst nehmen Sie bitte in das Layout Ihrer Xamarin.Android-App ein ProgressBar mit auf. Dieses sollte mittels eines FrameLayouts mit dem eigentlichen Content zusammengefasst werden.  
eines FrameLayouts mit dem eigentlichen Content zusammengefasst werden.  
 
 
<pre>
 
<pre>
 
<FrameLayout
 
<FrameLayout
Zeile 157: Zeile 155:
 
[[Datei:Wartemaske_Android.jpg|left|thumb|200px]]
 
[[Datei:Wartemaske_Android.jpg|left|thumb|200px]]
 
<br /><br /><br /><br /><br /><br />
 
<br /><br /><br /><br /><br /><br />
 +
 
==='''Wartedialog für Xamarin.iOS'''===
 
==='''Wartedialog für Xamarin.iOS'''===
Bei Xamarin.iOS können Sie die gleiche Vorgehensweise benutzen, nur noch heißt da das entspre-chende Control für<br />
+
Bei Xamarin.iOS können Sie die gleiche Vorgehensweise benutzen, nur noch heißt da das entspre-chende Control für Wartedialog „UIActivityIndicatorView“ und sieht so aus:
Wartedialog „UIActivityIndicatorView“ und sieht so aus:
 
 
[[Datei:Wartemaske_iOS.png|left|thumb|100px]]
 
[[Datei:Wartemaske_iOS.png|left|thumb|100px]]
<br /><br /><br /><br /><br /><br /><br />
+
<br /><br /><br /><br /><br /><br /><br /><br /><br />
 
Und die entsprechende Methode SetActivContent sieht dann wie folgt aus:
 
Und die entsprechende Methode SetActivContent sieht dann wie folgt aus:
 
<pre>
 
<pre>
Zeile 181: Zeile 179:
 
         }
 
         }
 
</pre>
 
</pre>
 +
 
=== '''Weitere Informationen''' ===
 
=== '''Weitere Informationen''' ===
 
Mehr Informationen zu unseren Softwarelösungen und Services finden Sie auf<br />
 
Mehr Informationen zu unseren Softwarelösungen und Services finden Sie auf<br />
Zeile 192: Zeile 191:
 
[http://mailto:techcorner@max-it.de techcorner@max-it.de].<br />
 
[http://mailto:techcorner@max-it.de techcorner@max-it.de].<br />
  
Über m.a.x. Informationstechnologie AG: <br />
+
'''Über m.a.x. Informationstechnologie AG:''' <br />
Als etabliertes Münchner Systemhaus zeichnen wir uns seit 1989 als verlässlicher IT-Partner mittelständischer und<br />
+
Als etabliertes Münchner Systemhaus zeichnen wir uns seit 1989 als verlässlicher IT-Partner mittelständischer und großer Unternehmen aus. Unser Portfolio reicht von IT- Services über individuelle Softwareentwicklung bis hin zur ERP-Beratung.
großer Unternehmen aus. Unser Portfolio reicht von IT- Services über individuelle Softwareentwicklung bis hin zur ERP-Beratung.<br />
+
 
<br />
 
 
=== '''Tags''' ===
 
=== '''Tags''' ===
 
Xamarin, Android, iOS, Daten laden, ProgressBar, ActivityIndivator, Wartedialog, Wartemaske
 
Xamarin, Android, iOS, Daten laden, ProgressBar, ActivityIndivator, Wartedialog, Wartemaske
 
[[Kategorie: Softwareentwicklung]]
 
[[Kategorie: Softwareentwicklung]]

Version vom 14. Mai 2020, 13:55 Uhr

Wartedialog für Xamarin App

Sie haben eine mobile App entwickelt, die ihre Daten aus dem Internet, z.B. von einem Webservice, abruft. Es dauert ein bisschen, bis die Daten komplett geladen werden und der Benutzer Ihrer App muss diese ein paar Sekunden vor dem leeren Bildschirm sitzen bleiben. Das möchten Sie ändern und den Ladeprozess mit einem Wartedialog klar andeuten.

Viewmodel vorbereiten

Angenommen, Sie haben im ViewModel Ihr Datenobjekt:

private ObservableCollection<Customer> _customers;
public ObservableCollection<Customer> MyCustomerList
        {
            get
            {
                return _customers;
            }
            set
            {
                if (_customers!= value)
                {
                    _customers = value;
                    RaisePropertyChanged("MyCustomerList");
                }
            }
        }

Nun bereiten Sie bitte in Ihrem Viewmodel ein Flag IsLoaded vor:

private bool isLoaded;
public bool IsLoaded
        {
            get
            {
                return isLoaded;
            }
            private set
            {
                 if (isLoaded != value)
                 {
                    isLoaded = value;
                    RaisePropertyChanged("IsLoaded");
                 }
            }
        }

Setzen Sie dieses Flag vor und nach dem Laden der eigentlichen Daten:

public async void LoadData(int countryId)
        {
            IsLoaded = false;

            MyCustomerList = await DataManager.GetCostumersByLand (countryId);

            IsLoaded = true;
        }

Wartedialog für Xamarin.Android

Zuerst nehmen Sie bitte in das Layout Ihrer Xamarin.Android-App ein ProgressBar mit auf. Dieses sollte mittels eines FrameLayouts mit dem eigentlichen Content zusammengefasst werden.

<FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        <LinearLayout
            android:id="@+id/LoadLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:visibility="invisible"
            android:gravity="center_horizontal|center_vertical">
            <ProgressBar
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/ProgressBar1"
                android:indeterminateOnly="true"
                android:keepScreenOn="true"
                android:layout_marginTop="10dp"
                android:gravity="center_horizontal|center_vertical" />
        </LinearLayout>
        <ListView
            android:id="@+id/CustomersListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</FrameLayout>

In der C#-Activity-Klasse Initialisieren Sie nun das Binding:

private Binding<ObservableCollection<Customer>, ObservableCollection<Customer>> bindingCustomerList;
private Binding<bool, bool> bindingIsLoaded;

protected override void OnStart()
        {
            base.OnStart();

            InitializeBindings();

            ViewModel.LoadData();
        }


protected override void OnStop()
        {
            base.OnStop();

            // Bindings detachen, sonst bleiben diese am Viewmodel hängen und 
            // Binding funktioniert fehlerhaft
            if (bindingCustomerList != null)
            {
                bindingCustomerList.Detach();
                bindingCustomerList = null;
            }

            if (bindingIsLoaded != null)
            {
                bindingIsLoaded.Detach();
                bindingIsLoaded = null;
            }
        }       

private void InitializeBindings()
        {
            // Bei Änderung der Daten im ViewModel UI aktualisieren
            bindingCustomerList = this.SetBinding(
                () => ViewModel.MyCustomerList).WhenSourceChanges(()
                =>
                {
                    myAdapter.DataSource = ViewModel.MyCustomerList;
                    CustomersListView.Adapter = myAdapter;
                    myAdapter.NotifyDataSetChanged();
                });

            // Sobald die Daten geladen werden, werden entsprechende Controls angezeigt
            bindingIsLoaded = this.SetBinding(() => ViewModel.IsLoaded).WhenSourceChanges(
                () => {
                    SetAktivContent();
                });
        }

Die Steuerung über sichtbare Objekte findet in der Methode SetActivContent statt:

private void SetActivContent(bool isloaded)
        {
            if (isloaded)
            {
                // Daten anzeigen
                this.CustomersListView.Visibility = ViewStates.Visible;
                this.LoadLayout.Visibility = ViewStates.Gone;
            }
            else
            {
                // Wartedialog anzeigen
                this.CustomersListView.Visibility = ViewStates.Gone;
                this.LoadLayout.Visibility = ViewStates.Visible;
            }
        }

Und sieht dann die Wartemaske in Xamarin.Android-App aus:

Wartemaske Android.jpg







Wartedialog für Xamarin.iOS

Bei Xamarin.iOS können Sie die gleiche Vorgehensweise benutzen, nur noch heißt da das entspre-chende Control für Wartedialog „UIActivityIndicatorView“ und sieht so aus:

Wartemaske iOS.png










Und die entsprechende Methode SetActivContent sieht dann wie folgt aus:

private void SetActivContent ()
        {
             if (ViewModel.IsLoaded == false)
             {
                    // Wartedialog anzeigen
                    this.ActivityIndicator1.Hidden = false;
                    this.ActivityIndicator1.StartAnimating();
		             this.CustomerTableView.Hidden = true;
             }
             else
             {
                    // Daten sind da
                    this.ActivityIndicator1.Hidden = true;
		             this.CustomerTableView.Hidden = false;
              }
         }

Weitere Informationen

Mehr Informationen zu unseren Softwarelösungen und Services finden Sie auf
www.max-it.de/Softwarelösungen

Links und Quellen

www.cdn1.xamarin.com/webimages/images/infographics/xamarin-mobile-controls-infographic-062014.pdf

Kontakt

Wenn Sie Fragen oder Anmerkungen zu diesem Artikel haben, melden Sie sich bitte bei uns:
techcorner@max-it.de.

Über m.a.x. Informationstechnologie AG:
Als etabliertes Münchner Systemhaus zeichnen wir uns seit 1989 als verlässlicher IT-Partner mittelständischer und großer Unternehmen aus. Unser Portfolio reicht von IT- Services über individuelle Softwareentwicklung bis hin zur ERP-Beratung.

Tags

Xamarin, Android, iOS, Daten laden, ProgressBar, ActivityIndivator, Wartedialog, Wartemaske