Hinweis: Dieser Artikel basiert auf der Version Material Materials 1.2.0-beta01 ab 1. Juni 2020 .



In meinen dreieinhalb Jahren in einem kleinen Android-Team bei HASHTAGS ist eines der wichtigsten Dinge, die mich motivieren, jeden Tag zur Arbeit zu kommen, die Freiheit und das Vertrauen unseres Unternehmens, ein Problem so anzugehen, wie wir es für am besten halten.



Die Freiheit, viele verschiedene Lösungen für ein Problem zu erforschen und zu erforschen, die wir für notwendig halten, und gleichzeitig einen Zeitrahmen für die Bereitstellung von Produktupdates zu berücksichtigen, ermöglicht es uns, die beste Lösung sowohl für unsere Kunden als auch für unsere Software zu finden.

Eine solche Herausforderung bestand darin, eine UI-Komponente für unsere neue Funktion für mobile Berichte zu erstellen. Diese neue Komponente war eine Monatsauswahl, mit der unsere Benutzer einen Datumsbereich für einen Analysebericht festlegen konnten.

Der Startplatz, den wir ausgewählt haben, war der vorhandene Materialkomponentenbibliothek . Anstatt von vorne zu beginnen, wird diese Bibliothek aktiv gepflegt und richtet sich nach den Materialspezifikationen. Mit dieser Bibliothek als Grundlage könnten wir wahrscheinlich die Menge an Logik reduzieren, die wir selbst schreiben müssten.

In diesem Artikel werde ich erläutern, wie wir diesen Prozess angegangen sind, einige einzigartige Faktoren beim Erstellen der Sprout Android-App, einige „Fallstricke“, die auf dem Weg aufgetaucht sind (und behoben wurden), und was Sie wissen sollten, wenn Sie es sind an einem ähnlichen Projekt arbeiten.

Einführung

Die Android-Materialkomponenten 1.1.0 Release Einführung einer neuen Datumsauswahl-UI-Komponente. Eine der willkommenen Ergänzungen dieses neuen MaterialDatePicker über den AppCompat CalendarView ist die Möglichkeit, einen Datumsbereich mithilfe einer Kalenderansicht oder eines Texteingabefelds auszuwählen.



Das alte AppCompat CalendarView war nicht sehr flexibel. Es war eine gute Komponente für den begrenzten Anwendungsfall, den es lösen sollte; Das heißt, Sie wählen ein einzelnes Datum und optionale minimale und maximale Daten aus, um einen zulässigen gebundenen Datumsbereich anzugeben.

Der neue MaterialDatePicker wurde mit mehr Flexibilität erstellt, um die Verwendung erweiterter Verhaltensfunktionen zu ermöglichen. Es funktioniert über eine Reihe von Schnittstellen, die implementiert werden können, um das Verhalten des Pickers zu optimieren und zu modifizieren.

Diese Verhaltensänderung wird zur Laufzeit über eine Reihe von Builder-Musterfunktionen auf dem MaterialDatePicker.Builder durchgeführt Klasse.



Dies bedeutet, dass wir das Basisverhalten dieses MaterialDatePicker erweitern können durch zusammensetzbare Schnittstellenkomponenten.

Hinweis: Während es eine Reihe verschiedener Komponenten gibt, ist MaterialDatePicker In diesem Artikel wird nur die Datumsauswahlkomponente behandelt.

101 Bedeutung Numerologie

Datumsbereichsauswahl

Das Android-Team von HASHTAGS war dabei, unseren Bereich für Analytics-Berichte zu erstellen.

In diesem neuen Abschnitt können unsere Benutzer eine Reihe von Filtern und Datumsbereichen auswählen, die der Bericht abdecken würde.

Die MaterialDatePicker Es wurden einige vorgefertigte Komponenten mitgeliefert, mit denen wir unseren Anwendungsfall erfüllen können.

In unserem häufigsten Fall, in dem ein Benutzer einen Bereich von Daten auswählen kann, ist das vorgefertigte MaterialDatePicker würde genügen:

Mit diesem Codeblock erhalten wir eine Datumsauswahl, mit der Benutzer einen Datumsbereich auswählen können.

Monatliche Datumsauswahl

Einer der HASHTAGS-Berichte mit einer eindeutigeren Datumsauswahl ist der Twitter Trends Report.

Dieser Bericht unterscheidet sich von den anderen darin, dass er keinen Datumsbereich zulässt, sondern eine Auswahl für einen einzelnen Monat erzwingt. Dies bedeutet, dass ein Benutzer nur den März 2020 gegenüber dem 3. März bis zum 16. März 2020 auswählen kann.

Unsere Web-App erledigt dies mithilfe eines Dropdown-Formularfelds:

Die MaterialDatePicker hat keine Möglichkeit, eine solche Einschränkung mit dem im vorherigen Abschnitt beschriebenen vorgefertigten Material Date Range Range Picker durchzusetzen. Glücklicherweise wurde MaterialDatePicker mit zusammensetzbaren Teilen erstellt, mit denen wir das Standardverhalten für unseren speziellen Anwendungsfall erweitern können.

Datumsauswahlverhalten

Die MaterialDatePicker nutzt a DateSelector als Schnittstelle für die Auswahllogik des Pickers.

Aus dem Javadoc:

“Schnittstelle für Benutzer von {@link MaterialCalendar} um zu steuern, wie der Kalender Auswahlen anzeigt und zurückgibt… “

Sie werden feststellen, dass MaterialDatePicker.Builder.dateRangePicker() Gibt eine Builder-Instanz von RangeDateSelector zurück, die wir im obigen Beispiel verwendet haben.

Diese Klasse ist ein vorgefertigter Selektor, der DateSelector implementiert.

Brainstorming eines monatlichen Datumsauswahlverhaltens

Für unseren Anwendungsfall wollten wir, dass unsere Benutzer einen ganzen Monat als ausgewählten Datumsbereich auswählen. z.B. Mai 2020, April 2020 usw.

Wir dachten, dass die vorgefertigten RangeDateSelector Das oben genannte hat uns den größten Teil des Weges dorthin gebracht. Mit der Komponente konnte ein Benutzer einen Datumsbereich auswählen und a erzwingen gebunden .

Das einzige, was fehlte, war eine Möglichkeit, eine Auswahl zu erzwingen, um den gesamten Monat automatisch auszuwählen. Das Standardverhalten von RangeDateSelector Der Benutzer wählt ein Startdatum und ein Enddatum aus.

Wir wollten ein Verhalten, bei dem ein Benutzer bei der Auswahl eines Tages im Monat automatisch den gesamten Monat als Datumsbereich auswählt.

Die Lösung, für die wir uns entschieden haben, war die Erweiterung von RangeDateSelector und überschreiben Sie dann das Verhalten bei der Tagesauswahl, um stattdessen automatisch den gesamten Monat auszuwählen.

Glücklicherweise gibt es eine Funktion, die wir über die Schnittstelle DateSelector überschreiben können aufgerufen: select(selection: Long).

Diese Funktion wird aufgerufen, wenn ein Benutzer einen Tag in der Auswahl auswählt, wobei der ausgewählte Tag in UTC-Millisekunden ab der Epoche verstrichen ist.

Implementierung eines monatlichen Datumsauswahlverhaltens

Die Implementierung erwies sich als der einfachste Teil, da wir eine klare Funktion haben, die wir überschreiben können, um das gewünschte Verhalten zu erzielen.

Die grundlegende Logik wird folgende sein:

  1. Der Benutzer wählt einen Tag aus.
  2. Die select() Die Funktion wird mit dem ausgewählten Tag in a aufgerufen Lange UTC Millisekunden von der Epoche.
  3. Finden Sie den ersten und letzten Tag des Monats ab dem angegebenen Tag, der an uns übergeben wurde.
  4. Rufen Sie super.select(1st of month) an & super.select(last day of month)
  5. Das übergeordnete Verhalten von RangeDateSelector sollte wie erwartet funktionieren und den Monat als Datumsbereich auswählen.

Alles zusammenfügen

Nachdem wir unser benutzerdefiniertes MonthRangeDateSelector haben, können wir unser MaterialDatePicker einrichten.

Um das Beispiel weiter zu führen, können wir das Ergebnis der Auswahl folgendermaßen verarbeiten:

Das Ergebnis sieht folgendermaßen aus:

Fallstricke

Es gab nur ein Hauptproblem, das es schwierig machte, zu dieser Lösung zu gelangen.

Die Hauptkomponenten, die zum Erstellen unserer MonthRangeDateSelector verwendet wurden waren die Klasse RangeDateSelector und die Schnittstelle DateSelector. Die in diesem Artikel verwendete Version der Bibliothek (1.2.0-beta01) hat die Sichtbarkeit dieser beiden Dateien eingeschränkt, um deren Erweiterung oder Implementierung zu verhindern.

Obwohl wir unser neues MonthRangeDateSelector erfolgreich kompilieren konnten, zeigte der Compiler eine sehr beängstigende Warnung, um uns davon abzuhalten:

Eine Möglichkeit, diese Compiler-Warnung auszublenden, besteht darin, ein @Suppress('RestrictedApi') hinzuzufügen wie so:

Diese Erfahrung zeigt, dass die Material Components Library, obwohl sie der Android Developer Community einige großartige neue Komponenten zur Verfügung gestellt hat, noch in Arbeit ist.

Ein großer Teil dieser Bibliothek ist die Offenheit für Feedback aus der Android Community! Nachdem ich diese Einschränkung der Sichtbarkeit von Komponenten entdeckt hatte, öffnete ich eine Problem auf dem Github-Projekt und eröffnete sogar eine PR um es sofort anzusprechen.

Diese offene Rückkopplungsschleife zwischen dem Material Components Team und der Android Community führt zu einer großartigen Zusammenarbeit und Ergebnissen für alle.

Fazit

Das neue MaterialDatePicker verfügt über einige großartige sofort einsatzbereite Funktionen, die wahrscheinlich die meisten Anwendungsfälle der Datumsauswahl abdecken.

Das Beste an AppCompat CalendarView ist jedoch, dass es auf komponierbare Weise erstellt wurde. Daher kann es leicht erweitert und für bestimmte Anwendungsfälle modifiziert werden, während es viel schwieriger wäre, solche Dinge in CalendarView zu erreichen.

Besonderer Dank

Ich möchte einige Leute hervorheben, die bei der Begutachtung dieses Artikels geholfen haben:

Teile Mit Deinen Freunden: