Xamarin: Wartedialog Daten laden: Unterschied zwischen den Versionen
Deko (Diskussion | Beiträge) |
Deko (Diskussion | Beiträge) |
||
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, | + | 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. | ||
− | 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 | + | 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 | + | 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 | + | 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. | + | |
− | |||
=== '''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
Inhaltsverzeichnis
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
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