{"id":870577,"date":"2023-10-09T10:53:13","date_gmt":"2023-10-09T15:53:13","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/sprout-engineering-erstellen-einer-android-monatsauswahl\/"},"modified":"2023-10-09T10:53:13","modified_gmt":"2023-10-09T15:53:13","slug":"sprout-engineering-erstellen-einer-android-monatsauswahl","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/sprout-engineering-erstellen-einer-android-monatsauswahl\/","title":{"rendered":"Sprout Engineering: Erstellen einer Android-Monatsauswahl"},"content":{"rendered":"

Hinweis: Dieser Artikel basierte ab Version 1.2.0-beta01 von Material Components 1. Juni 2020<\/strong>.<\/p>\n

W\u00e4hrend meiner dreieinhalbj\u00e4hrigen Arbeit in einem kleinen Android-Team bei Sprout Social ist die Freiheit und das Vertrauen unseres Unternehmens, ein Problem so anzugehen, wie wir es f\u00fcr am besten halten, eines der wichtigsten Dinge, die mich jeden Tag zu meiner Arbeit motivieren.<\/p>\n

Die Freiheit, viele verschiedene L\u00f6sungen f\u00fcr ein Problem, das wir f\u00fcr notwendig halten, zu recherchieren und zu erkunden und gleichzeitig einen Zeitrahmen f\u00fcr die Bereitstellung von Produktaktualisierungen zu haben, erm\u00f6glicht es uns, die beste L\u00f6sung sowohl f\u00fcr unsere Kunden als auch f\u00fcr unsere Software zu finden.<\/p>\n

Eine dieser Herausforderungen bestand darin, eine UI-Komponente f\u00fcr unsere neue mobile Berichtsfunktion zu erstellen. Bei dieser neuen Komponente handelte es sich um eine Monatsauswahl, mit der unsere Benutzer einen Datumsbereich f\u00fcr einen Analysebericht festlegen konnten.<\/p>\n

<\/figure>\n

Als Ausgangspunkt w\u00e4hlten wir die bestehende Material Component Library. Anstatt bei Null anzufangen, wird diese Bibliothek aktiv gepflegt und an Materialspezifikationen angepasst. Mit dieser Bibliothek als Basis k\u00f6nnten wir wahrscheinlich die Menge an Logik reduzieren, die wir selbst schreiben m\u00fcssten.<\/p>\n

In diesem Artikel beschreibe ich, wie wir diesen Prozess angegangen sind, einige einzigartige Faktoren bei der Erstellung der Sprout-Android-App, einige \u201eFehler\u201c, die im Laufe der Zeit aufgetreten sind (und behoben wurden) und was Sie wissen sollten, wenn Sie daran arbeiten ein Projekt. \u00e4hnlich.<\/p>\n

Einf\u00fchrung<\/h2>\n

Mit Android Material Components Version 1.1.0 wurde eine neue UI-Komponente f\u00fcr die Datumsauswahl eingef\u00fchrt. Eine der willkommenen Erg\u00e4nzungen dieses neuen MaterialDatePicker gegen\u00fcber AppCompat CalendarView ist die M\u00f6glichkeit, einen Datumsbereich mithilfe einer Kalenderansicht oder eines Texteingabefelds auszuw\u00e4hlen.<\/p>\n

Die alte AppCompat CalendarView war nicht sehr flexibel. Es war eine gute Komponente f\u00fcr den begrenzten Anwendungsfall, den sie l\u00f6sen sollte; Das hei\u00dft, Sie w\u00e4hlen ein einzelnes Datum und optionale Mindest- und H\u00f6chstdaten aus, um eine zul\u00e4ssige Datumsbereichsbeschr\u00e4nkung anzugeben.<\/p>\n

Der neue MaterialDatePicker wurde mit mehr Flexibilit\u00e4t erstellt, um die Verwendung erweiterter Verhaltensfunktionen zu erm\u00f6glichen. Es funktioniert \u00fcber eine Reihe von Schnittstellen, die implementiert werden k\u00f6nnen, um das Verhalten des Selektors anzupassen und zu \u00e4ndern.<\/p>\n

Diese Verhaltens\u00e4nderung erfolgt zur Laufzeit \u00fcber eine Reihe von Builder-Musterfunktionen in der MaterialDatePicker.Builder-Klasse.<\/p>\n

Das bedeutet, dass wir das Basisverhalten dieses MaterialDatePicker durch zusammensetzbare Schnittstellenkomponenten erweitern k\u00f6nnen.<\/p>\n

Hinweis: Obwohl MaterialDatePicker eine Reihe unterschiedlicher Komponenten verwendet, behandeln wir in diesem Artikel nur die Datumsauswahlkomponente.<\/p>\n

Datumsbereichsauswahl<\/h2>\n

Das Sprout Social Android-Team war gerade dabei, unseren Abschnitt f\u00fcr Analyseberichte zu erstellen.<\/p>\n

Dieser neue Abschnitt w\u00fcrde es unseren Benutzern erm\u00f6glichen, eine Reihe von Filtern und eine Reihe von Datumsbereichen auszuw\u00e4hlen, die der Bericht abdecken w\u00fcrde.<\/p>\n

\"\"<\/figure>\n
\"\"<\/figure>\n

MaterialDatePicker wurde mit einigen vorgefertigten Komponenten geliefert, die wir zur Umsetzung unseres Anwendungsfalls nutzen konnten.<\/p>\n

F\u00fcr unseren h\u00e4ufigsten Fall, bei dem ein Benutzer einen Datumsbereich ausw\u00e4hlen kann, w\u00fcrde der vorgefertigte MaterialDatePicker ausreichen:<\/p>\n

Mit diesem Codeblock erhalten wir eine Datumsauswahl, mit der Benutzer einen Datumsbereich ausw\u00e4hlen k\u00f6nnen.<\/p>\n

\"\"<\/figure>\n

Monatliche Datumsauswahl<\/h2>\n

Einer der Sprout Social-Berichte mit einer einzigartigeren Datumsauswahl ist der Twitter Trendbericht.<\/p>\n

Dieser Bericht unterscheidet sich von den anderen dadurch, dass er keinen beliebigen Datumsbereich zul\u00e4sst, sondern eine einzelne Monatsauswahl anwendet, was bedeutet, dass ein Benutzer nur M\u00e4rz 2020 und nicht den 3. bis 16. M\u00e4rz 2020 ausw\u00e4hlen kann.<\/p>\n

Unsere Webanwendung erledigt dies \u00fcber ein Dropdown-Formularfeld:<\/p>\n

\"\"<\/figure>\n

MaterialDatePicker bietet keine M\u00f6glichkeit, eine solche Einschr\u00e4nkung mit dem im vorherigen Abschnitt beschriebenen vorgefertigten Material Date Range Picker durchzusetzen. Gl\u00fccklicherweise wurde MaterialDatePicker mit zusammensetzbaren Teilen erstellt, die es uns erm\u00f6glichen, das Standardverhalten f\u00fcr unseren speziellen Anwendungsfall zu erweitern.<\/p>\n

Verhalten bei der Datumsauswahl<\/h3>\n

MaterialDatePicker nutzt einen DateSelector als Schnittstelle f\u00fcr die Auswahllogik des Selektors.<\/p>\n

Aus dem Javadoc:<\/p>\n

\u201eSchnittstelle f\u00fcr {@link MaterialCalendar}-Benutzer, um zu steuern, wie der Kalender angezeigt wird und Auswahlen zur\u00fcckgibt\u2026\u201c<\/p>\n

Sie werden feststellen, dass MaterialDatePicker.Builder.dateRangePicker() eine Builder-Instanz von RangeDateSelector zur\u00fcckgibt, die wir im obigen Beispiel verwendet haben.<\/p>\n

Diese Klasse ist ein vorgefertigter Selektor, der DateSelector implementiert.<\/p>\n

\u00dcberlegen Sie sich ein Verhalten bei der monatlichen Datumsauswahl<\/h3>\n

F\u00fcr unseren Anwendungsfall wollten wir unseren Benutzern die M\u00f6glichkeit geben, einen ganzen Monat als ausgew\u00e4hlten Datumsbereich auszuw\u00e4hlen. zum Beispiel Mai 2020, April 2020 usw.<\/p>\n

Wir glauben, dass der oben erw\u00e4hnte vorgefertigte RangeDateSelector uns den gr\u00f6\u00dften Teil des Weges dorthin gebracht hat. Die Komponente erm\u00f6glichte es einem Benutzer, einen Datumsbereich auszuw\u00e4hlen und einen zu erzwingen [lower, upper] gebunden<\/strong>.<\/p>\n

Das einzige, was fehlte, war eine M\u00f6glichkeit, eine Auswahl zu erzwingen, um automatisch den gesamten Monat auszuw\u00e4hlen. Das Standardverhalten von RangeDateSelector sieht vor, dass der Benutzer ein Startdatum und ein Enddatum ausw\u00e4hlt.<\/p>\n

Wir wollten ein Verhalten, bei dem der Selektor automatisch den gesamten Monat als Datumsbereich ausw\u00e4hlt, wenn ein Benutzer einen Tag im Monat ausw\u00e4hlt.<\/p>\n

\"\"<\/figure>\n

Die L\u00f6sung, f\u00fcr die wir uns entschieden haben, bestand darin, RangeDateSelector zu erweitern und dann das Tagesauswahlverhalten zu \u00fcberschreiben, um automatisch den gesamten Monat auszuw\u00e4hlen.<\/p>\n

Gl\u00fccklicherweise gibt es eine Funktion namens select(selection: Long), die wir \u00fcber die DateSelector-Schnittstelle \u00fcberschreiben k\u00f6nnen.<\/p>\n

Diese Funktion wird aufgerufen, wenn ein Benutzer einen Tag im Selektor ausw\u00e4hlt, wobei der ausgew\u00e4hlte Tag seit der Epoche in UTC-Millisekunden vergangen ist.<\/p>\n

Implementieren Sie ein monatliches Datumsauswahlverhalten<\/h3>\n

Die Implementierung erwies sich als der einfachste Teil, da wir eine klare Funktion haben, die wir \u00fcberschreiben k\u00f6nnen, um das gew\u00fcnschte Verhalten zu erhalten.<\/p>\n

Die Grundlogik wird folgende sein:<\/p>\n

    \n
  1. Der Benutzer w\u00e4hlt einen Tag aus.<\/li>\n
  2. Die Funktion select() wird mit dem in a ausgew\u00e4hlten Tag aufgerufen Lang<\/strong> UTC-Millisekunden seit der Epoche.<\/li>\n
  3. Finden Sie den ersten und letzten Tag des Monats ab dem angegebenen Tag, der uns passiert ist.<\/li>\n
  4. Rufen Sie super.select (erster Tag des Monats) und super.select (letzter Tag des Monats) an.<\/li>\n
  5. Das Hauptverhalten von RangeDateSelector sollte wie erwartet funktionieren und den Monat als Datumsbereich ausw\u00e4hlen.<\/li>\n<\/ol>\n

    Alles zusammenf\u00fcgen<\/h3>\n

    Nachdem wir nun unseren benutzerdefinierten MonthRangeDateSelector haben, k\u00f6nnen wir unseren MaterialDatePicker konfigurieren.<\/p>\n

    Um das Beispiel weiterzuf\u00fchren, k\u00f6nnen wir das Auswahlergebnis wie folgt verarbeiten:<\/p>\n

    Das Ergebnis wird so aussehen:<\/p>\n

    \"\"<\/figure>\n

    Fallstricke<\/h2>\n

    Es gab nur ein gro\u00dfes Problem, das es schwierig machte, zu dieser L\u00f6sung zu gelangen.<\/p>\n

    Die Hauptkomponenten, die zum Erstellen unseres MonthRangeDateSelector verwendet wurden, waren die RangeDateSelector-Klasse und die DateSelector-Schnittstelle. Die in diesem Artikel verwendete Version der Bibliothek (1.2.0-beta01) schr\u00e4nkte die Sichtbarkeit dieser beiden Dateien ein, um ihre Erweiterung oder Implementierung zu verhindern.<\/p>\n

    Obwohl wir unseren neuen MonthRangeDateSelector erfolgreich kompilieren konnten, zeigte der Compiler eine sehr be\u00e4ngstigende Warnung an, um uns davon abzuhalten:<\/p>\n

    \"\"<\/figure>\n

    Eine M\u00f6glichkeit, diese Warnung vor dem Compiler zu verbergen, besteht darin, ein @Suppress(“RestrictedApi”) wie folgt hinzuzuf\u00fcgen:<\/p>\n

    \"\"<\/figure>\n

    Diese Erfahrung zeigt, dass die Material Components Library zwar einige gro\u00dfartige neue Komponenten f\u00fcr die Android-Entwickler-Community bereitgestellt hat, aber immer noch in Arbeit ist.<\/p>\n

    Ein gro\u00dfer Teil dieser Bibliothek ist die Offenheit f\u00fcr Feedback aus der Android-Community. Nachdem ich diese Einschr\u00e4nkung der Komponentensichtbarkeit entdeckt hatte, er\u00f6ffnete ich ein Problem im Github-Projekt und er\u00f6ffnete sogar eine PR, um das Problem sofort zu beheben.<\/p>\n

    Diese offene Feedbackschleife zwischen dem Material Components-Team und der Android-Community sorgt f\u00fcr eine gro\u00dfartige Zusammenarbeit und Ergebnisse f\u00fcr alle.<\/p>\n

    Abschluss<\/h2>\n

    Der neue MaterialDatePicker verf\u00fcgt \u00fcber einige gro\u00dfartige sofort einsatzbereite Funktionen, die wahrscheinlich die meisten Anwendungsf\u00e4lle f\u00fcr die Datumsauswahl abdecken.<\/p>\n

    Das Beste an etwas wie AppCompat CalendarView ist jedoch, dass es auf eine zusammensetzbare Weise aufgebaut ist. Es kann also leicht f\u00fcr bestimmte Anwendungsf\u00e4lle erweitert und ge\u00e4ndert werden, w\u00e4hrend es in CalendarView viel schwieriger w\u00e4re, solche Dinge zu erreichen.<\/p>\n

    Besonderen Dank<\/h3>\n

    Ich m\u00f6chte einige Personen hervorheben, die bei der Rezension dieses Artikels geholfen haben:<\/p>\n ","protected":false},"excerpt":{"rendered":"

    Hinweis: Dieser Artikel basierte ab Version 1.2.0-beta01 von Material Components 1. Juni 2020. W\u00e4hrend meiner dreieinhalbj\u00e4hrigen Arbeit in einem kleinen Android-Team bei Sprout Social ist die Freiheit und das Vertrauen unseres Unternehmens, ein Problem so anzugehen, wie wir es f\u00fcr am besten halten, eines der wichtigsten Dinge, die mich jeden Tag zu meiner Arbeit motivieren. […]<\/p>\n","protected":false},"author":1,"featured_media":870578,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/28.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/870577"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=870577"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/870577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/870578"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=870577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=870577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=870577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}