Xamarin: Wartedialog Daten laden: Unterschied zwischen den Versionen

Aus maxTechCorner
← Zum vorherigen Versionsunterschied
imported>TechCorner-Redaktion
Softwareentwicklung: Überarbeitung
 
(6 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
==='''Wartedialog für Xamarin App '''===
{{Hinweis|'''Xamarin''' hat am 1. Mai 2024 das Support-Ende erreicht; Nachfolger ist '''.NET MAUI'''. Dieser Artikel bleibt als Referenz erhalten – für neue Projekte gilt .NET MAUI.}}
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:
<pre>
private ObservableCollection<Customer> _customers;
public ObservableCollection<Customer> MyCustomerList
        {
            get
            {
                return _customers;
            }
            set
            {
                if (_customers!= value)
                {
                    _customers = value;
                    RaisePropertyChanged("MyCustomerList");
                }
            }
        }
</pre>
Nun bereiten Sie bitte in Ihrem Viewmodel ein Flag IsLoaded vor:
<pre>
private bool isLoaded;
public bool IsLoaded
        {
            get
            {
                return isLoaded;
            }
            private set
            {
                if (isLoaded != value)
                {
                    isLoaded = value;
                    RaisePropertyChanged("IsLoaded");
                }
            }
        }
</pre>
Setzen Sie dieses Flag vor und nach dem Laden der eigentlichen Daten:
<pre>
public async void LoadData(int countryId)
        {
            IsLoaded = false;


            MyCustomerList = await DataManager.GetCostumersByLand (countryId);
Lädt eine App Daten aus dem Netz, soll ein Wartedialog den Ladevorgang anzeigen. Umsetzung über ein <code>IsLoaded</code>-Flag im ViewModel und ein an dieses Flag gebundenes UI.


            IsLoaded = true;
== ViewModel vorbereiten ==
        }
<syntaxhighlight lang="csharp">
</pre>
public async void LoadData(int countryId)
==='''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.
    IsLoaded = false;
<pre>
    MyCustomerList = await DataManager.GetCustomersByLand(countryId);
<FrameLayout
    IsLoaded = true;
        android:layout_width="fill_parent"
}
        android:layout_height="match_parent"
</syntaxhighlight>
        <LinearLayout
(<code>MyCustomerList</code> und <code>IsLoaded</code> sind Properties mit <code>RaisePropertyChanged</code>.)
            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>
</pre>
In der C#-Activity-Klasse Initialisieren Sie nun das Binding:
<pre>
private Binding<ObservableCollection<Customer>, ObservableCollection<Customer>> bindingCustomerList;
private Binding<bool, bool> bindingIsLoaded;


protected override void OnStart()
== Xamarin.Android ==
        {
Ein <code>ProgressBar</code> und der Content werden in einem <code>FrameLayout</code> zusammengefasst; die Sichtbarkeit steuert:
            base.OnStart();
<syntaxhighlight lang="csharp">
 
private void SetActivContent(bool isloaded)
            InitializeBindings();
{
    CustomersListView.Visibility = isloaded ? ViewStates.Visible : ViewStates.Gone;
    LoadLayout.Visibility      = isloaded ? ViewStates.Gone    : ViewStates.Visible;
}
</syntaxhighlight>
Bindings in <code>OnStart</code> erzeugen und in <code>OnStop</code> lösen (siehe [[Xamarin MvvmLight-Binding funktioniert nicht]]).
[[Datei:Wartemaske_Android.jpg|thumb|left|200px|Wartemaske (Android)]]<br clear="all" />
== Xamarin.iOS ==
Gleiche Vorgehensweise; als Control dient der <code>UIActivityIndicatorView</code>:
<syntaxhighlight lang="csharp">
private void SetActivContent()
{
    if (!ViewModel.IsLoaded)
    {
        ActivityIndicator1.Hidden = false;
        ActivityIndicator1.StartAnimating();
        CustomerTableView.Hidden = true;
    }
    else
    {
        ActivityIndicator1.Hidden = true;
        CustomerTableView.Hidden = false;
    }
}
</syntaxhighlight>
[[Datei:Wartemaske_iOS.png|thumb|left|100px|Wartemaske (iOS)]]<br clear="all" />


            ViewModel.LoadData();
== Unterstützung von m.a.x. it ==
        }
Bei plattformübergreifender App- und Software­entwicklung unterstützt Sie m.a.x. it mit [https://www.max-it.de/development/individuelle-softwareentwicklung/ individueller Softwareentwicklung].
 
 
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();
                });
        }
</pre>
Die Steuerung über sichtbare Objekte findet in der Methode SetActivContent statt:
<pre>
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;
            }
        }
</pre>
Und sieht dann die Wartemaske in Xamarin.Android-App aus:
[[Datei:Wartemaske_Android.jpg|left|thumb|200px]]
<br /><br /><br /><br /><br /><br />
==='''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:
[[Datei:Wartemaske_iOS.png|left|thumb|100px]]
<br /><br /><br /><br /><br /><br /><br />
Und die entsprechende Methode SetActivContent sieht dann wie folgt aus:
<pre>
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;
              }
        }
</pre>
=== '''Weitere Informationen''' ===
https://mittelstand.max-it.de/Software-Loesungen/App-Entwicklung/Xamarin<br />


=== '''Links und Quellen''' ===
{{Uebermax}}
http://cdn1.xamarin.com/webimages/images/infographics/xamarin-mobile-controls-infographic-062014.pdf 
[[Kategorie:Softwareentwicklung]]
=== '''Kontakt''' ===
Wenn Sie Fragen oder Anmerkungen zu diesem Artikel haben, melden Sie sich bitte bei uns: mailto:techcorner@max-it.de.<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 großer Unternehmen aus. Unser Portfolio reicht von IT- Services über individuelle Softwareentwicklung bis hin zur ERP-Beratung.<br />
=== '''Tags''' ===
Xamarin, Android, iOS, Daten laden, ProgressBar, ActivityIndivator, Wartedialog, Wartemaske
[[Kategorie: Softwareentwicklung]]

Aktuelle Version vom 15. September 2026, 00:00 Uhr

HinweisXamarin hat am 1. Mai 2024 das Support-Ende erreicht; Nachfolger ist .NET MAUI. Dieser Artikel bleibt als Referenz erhalten – für neue Projekte gilt .NET MAUI.

Lädt eine App Daten aus dem Netz, soll ein Wartedialog den Ladevorgang anzeigen. Umsetzung über ein IsLoaded-Flag im ViewModel und ein an dieses Flag gebundenes UI.

ViewModel vorbereiten

public async void LoadData(int countryId)
{
    IsLoaded = false;
    MyCustomerList = await DataManager.GetCustomersByLand(countryId);
    IsLoaded = true;
}

(MyCustomerList und IsLoaded sind Properties mit RaisePropertyChanged.)

Xamarin.Android

Ein ProgressBar und der Content werden in einem FrameLayout zusammengefasst; die Sichtbarkeit steuert: 

private void SetActivContent(bool isloaded)
{
    CustomersListView.Visibility = isloaded ? ViewStates.Visible : ViewStates.Gone;
    LoadLayout.Visibility       = isloaded ? ViewStates.Gone    : ViewStates.Visible;
}

Bindings in OnStart erzeugen und in OnStop lösen (siehe Xamarin MvvmLight-Binding funktioniert nicht).

Wartemaske (Android)


Xamarin.iOS

Gleiche Vorgehensweise; als Control dient der UIActivityIndicatorView: 

private void SetActivContent()
{
    if (!ViewModel.IsLoaded)
    {
        ActivityIndicator1.Hidden = false;
        ActivityIndicator1.StartAnimating();
        CustomerTableView.Hidden = true;
    }
    else
    {
        ActivityIndicator1.Hidden = true;
        CustomerTableView.Hidden = false;
    }
}
Wartemaske (iOS)


Unterstützung von m.a.x. it

Bei plattformübergreifender App- und Software­entwicklung unterstützt Sie m.a.x. it mit individueller Softwareentwicklung.


Über m.a.x. it Die m.a.x. Informationstechnologie AG ist seit über 30 Jahren IT-Partner mittelständischer und großer Unternehmen in München und bietet maßgeschneiderte Lösungen und Services in den Bereichen Cloud, Cybersecurity, Netzwerk, Windows, Linux und Softwareentwicklung. Sie haben eine Frage zu diesem Artikel oder brauchen Unterstützung? Kontakt aufnehmen

Abgerufen von „http://techcorner.max-it.de/index.php?title=Xamarin:_Wartedialog_Daten_laden&oldid=2746“