Udostępnij za pośrednictwem

Podsumowanie rozdziału 15. Interfejs interaktywny

  • Artykuł

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

W tym rozdziale omówiono osiem View pochodnych, które umożliwiają interakcję z użytkownikiem.

Przegląd widoku

Xamarin.Forms zawiera 20 wystąpień klas, które pochodzą z View klasy , ale nie Layout. Sześć z nich zostało omówionych w poprzednich rozdziałach:

Osiem widoków w tym rozdziale skutecznie umożliwia użytkownikowi interakcję z podstawowymi typami danych platformy .NET:

Typ danych Widoki
Double Slider, Stepper
Boolean Switch
String Entry, , EditorSearchBar
DateTime DatePicker, TimePicker

Te widoki można traktować jako wizualne interaktywne reprezentacje bazowych typów danych. Ta koncepcja została omówiona bardziej w następnym rozdziale rozdział 16. Powiązanie danych.

Pozostałe sześć poglądów opisano w następujących rozdziałach:

Suwak i krokowy

Zarówno Slider , jak i Stepper zezwala użytkownikowi na wybranie wartości liczbowej z zakresu. Jest Slider to ciągły zakres, podczas gdy Stepper element obejmuje wartości dyskretne.

Podstawy suwaka

Jest Slider to poziomy pasek reprezentujący zakres wartości od minimum po lewej stronie do maksymalnej po prawej stronie. Definiuje trzy właściwości publiczne:

  • Value typu double, wartość domyślna 0
  • Minimum typu double, wartość domyślna 0
  • Maximum typu double, wartość domyślna 1

Właściwości, które są powiązane z tymi właściwościami, upewnij się, że są spójne:

  • Dla wszystkich trzech właściwości metoda określona coerceValue dla właściwości możliwej do powiązania gwarantuje, że Value jest to między Minimum i Maximum.
  • validateValue Metoda w funkcji MinimumProperty zwraca false wartość , jeśli Minimum jest ustawiona na wartość większą lub równą Maximum, i podobną dla parametru MaximumProperty. Zwracanie false z validateValue metody powoduje, że element ArgumentException jest zgłaszany.

SliderValueChanged uruchamia zdarzenie z argumentemValueChangedEventArgs, gdy Value właściwość ulegnie zmianie programowo lub gdy użytkownik manipuluje elementem Slider.

W przykładzie SliderDemo pokazano proste użycie elementu Slider.

Typowe pułapki

Zarówno w kodzie, jak i w języku XAML właściwości Minimum i Maximum są ustawiane w określonej kolejności. Pamiętaj, aby zainicjować te właściwości, Maximum aby zawsze były większe niż Minimum. W przeciwnym razie zostanie zgłoszony wyjątek.

Inicjowanie Slider właściwości może spowodować zmianę Value właściwości i ValueChanged wyzwolenie zdarzenia. Upewnij się, że Slider program obsługi zdarzeń nie uzyskuje dostępu do widoków, które nie zostały jeszcze utworzone podczas inicjowania strony.

Zdarzenie ValueChanged nie jest uruchamiane podczas Slider inicjowania, chyba że Value właściwość ulegnie zmianie. Program obsługi można wywołać ValueChanged bezpośrednio z kodu.

Wybór koloru suwaka

Program RgbSliders zawiera trzy Slider elementy, które pozwalają interaktywnie wybrać kolor, określając jego wartości RGB:

Zrzut ekranu przedstawiający suwaki języka R G B

Przykład TextFade używa dwóch Slider elementów, aby przenieść dwa Label elementy między elementami AbsoluteLayout i zanikać jeden do drugiego.

Różnica kroków

Definiuje Stepper te same właściwości i zdarzenia co Slider właściwość, ale Maximum właściwość jest inicjowana na 100 i Stepper definiuje czwartą właściwość:

Wizualnie element Stepper składa się z dwóch przycisków oznaczonych etykietami : i +. Naciśnięcie Value Increment — zmniejsza się do minimum .Minimum Naciśnięcie + Value Increment przycisku zwiększa się do maksymalnej wartości .Maximum

Jest to pokazane przez przykład StepperDemo.

Przełączanie i pole wyboru

Ustawienie Switch umożliwia użytkownikowi określenie wartości logicznej.

Podstawy przełączania

Wizualnie element Switch składa się z przełącznika, który można wyłączyć i włączyć. Klasa definiuje jedną właściwość:

Switch definiuje jedno zdarzenie:

Program SwitchDemo demonstruje element Switch.

Tradycyjna skrzynka kontrolna

Niektórzy deweloperzy mogą preferować bardziej tradycyjną metodę CheckBox .Switch Biblioteka Xamarin.FormsBook.Toolkit zawiera klasę pochodzącą CheckBox z klasy ContentView. CheckBox jest implementowany przez pliki CheckBox.xaml i CheckBox.xaml.cs . CheckBox definiuje trzy właściwości (Text, FontSize, i IsChecked) i CheckedChanged zdarzenie.

Przykład CheckBoxDemo pokazuje ten element CheckBox.

Wpisywanie tekstu

Xamarin.Forms definiuje trzy widoki, które umożliwiają użytkownikowi wprowadzanie i edytowanie tekstu:

  • Entry dla pojedynczego wiersza tekstu
  • Editor dla wielu wierszy tekstu
  • SearchBar dla pojedynczego wiersza tekstu do celów wyszukiwania.

Entry i Editor pochodzą z InputViewklasy , która pochodzi z Viewklasy . SearchBar pochodzi bezpośrednio z Viewklasy .

Klawiatura i fokus

Na telefonach i tabletach bez klawiatur fizycznych Entryelementy , Editori SearchBar powodują wyskakujące okienko klawiatury wirtualnej. Obecność tej klawiatury na ekranie jest związana z fokusem wejściowym. Widok musi mieć zarówno jego właściwości, IsVisible jak i IsEnabled , aby true uzyskać fokus danych wejściowych.

Dwie metody, jedna właściwość tylko do odczytu i dwa zdarzenia są związane z fokusem wejściowym. Wszystkie te wartości są definiowane przez program VisualElement:

  • Metoda Focus próbuje ustawić fokus danych wejściowych na element i zwraca true wartość w przypadku powodzenia
  • Metoda Unfocus usuwa fokus wejściowy z elementu
  • Właściwość IsFocused tylko do odczytu wskazuje, czy element ma fokus wejściowy
  • Zdarzenie Focused wskazuje, kiedy element pobiera fokus danych wejściowych
  • Zdarzenie Unfocused wskazuje, kiedy element traci fokus wejściowy

Wybieranie klawiatury

Klasa InputView , z której Entry i Editor pochodzą, definiuje tylko jedną właściwość:

Wskazuje to typ wyświetlanej klawiatury. Niektóre klawiatury są zoptymalizowane pod kątem identyfikatorów URI lub liczb.

Klasa Keyboard umożliwia zdefiniowanie klawiatury za pomocą metody statycznej Keyboard.Create z argumentem typu KeyboardFlags, wyliczenie z następującymi flagami bitowymi:

W przypadku używania wielowierszowego Editor , gdy oczekiwano akapitu lub większej liczby tekstu, wywołanie Keyboard.Create jest dobrym podejściem do wybierania klawiatury. W przypadku pojedynczego wiersza Entryprzydatne są następujące statyczne właściwości Keyboard tylko do odczytu:

Umożliwia KeyboardTypeConverter określenie tych właściwości w języku XAML, jak pokazano w programie EntryKeyboards .

Właściwości i zdarzenia wpisu

Pojedynczy wiersz Entry definiuje następujące właściwości:

Definiuje Entry również dwa zdarzenia:

  • TextChanged z obiektem TextChangedEventArgs , wyzwalany za każdym razem, gdy Text właściwość ulegnie zmianie
  • Completed, wyzwolony po zakończeniu pracy użytkownika, a klawiatura zostanie odrzucona. Użytkownik wskazuje ukończenie w sposób specyficzny dla platformy

W przykładzie QuadraticEquations pokazano te dwa zdarzenia.

Różnica w edytorze

Wielowierszowy Editor definiuje te same Text właściwości i Font co Entry , ale nie inne właściwości. Editor Definiuje również te same dwie właściwości co Entry.

JustNotes to dowolny program do tworzenia notatek, który zapisuje i przywraca zawartość pliku Editor.

Obiekt SearchBar nie pochodzi z InputViewklasy , więc nie ma Keyboard właściwości . Ale ma wszystkie Textwłaściwości , Fonti Placeholder , które Entry definiują. Ponadto SearchBar definiuje trzy dodatkowe właściwości:

Przycisk anulowania specyficznego dla platformy usuwa tekst. Obiekt SearchBar ma również przycisk wyszukiwania specyficznego dla platformy. Naciśnięcie jednego z tych przycisków powoduje wywołanie jednego z dwóch zdarzeń, które SearchBar definiuje:

Przykład SearchBarDemo przedstawia element SearchBar.

Wybór daty i godziny

Widoki DatePicker i TimePicker implementują kontrolki specyficzne dla platformy, które umożliwiają użytkownikowi określenie daty lub godziny.

The DatePicker

DatePicker definiuje cztery właściwości:

  • MinimumDate typu DateTime, zainicjowany do 1 stycznia 1900 r.
  • MaximumDate typu DateTime, zainicjowany do 31 grudnia 2100 r.
  • Date typu DateTime, zainicjowany na DateTime.Today
  • Format typu string, ciąg formatowania platformy .NET zainicjowany na "d", wzorzec daty krótkiej, co powoduje wyświetlenie daty, takiej jak "7/20/1969" w Stanach Zjednoczonych.

Właściwości w języku XAML można ustawić DateTime , wyrażając właściwości jako elementy właściwości i używając niezmiennego formatu daty krótkiej kultury ("7/20/1969").

Przykład DaysBetweenDates oblicza liczbę dni między dwiema datami wybranymi przez użytkownika.

TimePicker (lub czy jest to timeSpanPicker?)

TimePicker definiuje dwie właściwości i brak zdarzeń:

  • Time jest typu TimeSpan , a nie DateTime, wskazując czas, który upłynął od północy
  • Format typu string, ciąg formatowania platformy .NET zainicjowany na "t", wzorzec krótkiego czasu, co powoduje wyświetlenie czasu, takiego jak "1:45 PM" w Stanach Zjednoczonych.

Program SetTimer pokazuje, jak używać parametru TimePicker , aby określić czasomierza. Program działa tylko wtedy, gdy zachowasz go na pierwszym planie.

Program SetTimer demonstruje również użycie DisplayAlert metody Page w celu wyświetlenia pola alertu.