Xamarin: Wartedialog Daten laden

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:

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:

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

https://www.max-it.de/softwareloesungen/

Links und Quellen

http://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: mailto: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