Napomena: Ovaj se članak temelji na verziji Materijalnih komponenata 1.2.0-beta01 od 1. lipnja 2020 .



U moje tri i pol godine rada u malom Android timu u HASHTAGS-u, jedna od glavnih stvari koja me motivira da svakodnevno dolazim na posao je sloboda i povjerenje naše tvrtke u rješavanju problema na bilo koji način koji smatramo najboljim.



Sloboda da istražujemo i istražujemo mnoga različita rješenja problema za koji smatramo da je potreban, iako uzimajući u obzir vremenski okvir za isporuku ažuriranja proizvoda, omogućuje nam da pronađemo najbolje rješenje i za naše kupce i za naš softver.

Jedan od takvih izazova uključivao je izgradnju korisničke komponente za našu novu značajku mobilnog izvještavanja. Ova nova komponenta bila je alat za odabir mjeseca, koji je našim korisnicima omogućio da opseg datuma za analitičko izvješće.

Početno mjesto koje smo odabrali bilo je postojeće Biblioteka komponenata materijala . Umjesto da započne od nule, ova se knjižnica aktivno održava i usklađuje sa specifikacijama materijala. S ovom knjižnicom kao temeljem, vjerojatno bismo mogli smanjiti količinu logike koju bismo morali sami napisati.

U ovom ću članku opisati kako smo pristupili ovom procesu, neke jedinstvene čimbenike u izgradnji aplikacije Sprout za Android, nekoliko 'problema' koji su se pojavili (i bili su popravljeni) usput i što znati ako ste radeći na sličnom projektu.

Uvod

Komponente Android materijala 1.1.0 Izdanje predstavio je novu komponentu korisničkog sučelja birača datuma. Jedan od dobrodošlih dodataka ovog novog MaterialDatePicker preko AppCompat CalendarView je mogućnost odabira raspona datuma pomoću prikaza kalendara ili polja za unos teksta.



Stari AppCompat CalendarView nije bio vrlo fleksibilan. Bila je to dobra komponenta za slučaj ograničene upotrebe koji je trebala riješiti; to jest, odabir jednog datuma i neobaveznih minimalnih i maksimalnih datuma za određivanje dopuštenog ograničenog raspona datuma.

Novi MaterialDatePicker izgrađen je s više fleksibilnosti kako bi omogućio upotrebu proširene funkcionalnosti ponašanja. Djeluje kroz niz sučelja koja se mogu implementirati za dotjerivanje i modificiranje ponašanja birača.

Ova modifikacija ponašanja vrši se tijekom izvođenja kroz skup funkcija uzoraka graditelja na MaterialDatePicker.Builder razred.



To znači da smo u mogućnosti proširiti osnovno ponašanje ovog MaterialDatePicker kroz sastavljive komponente sučelja.

Napomena: Iako postoji niz različitih komponenata, MaterialDatePicker koristi, u ovom ćemo članku pokrivati ​​samo komponentu odabira datuma.

što znače 111

Birač datumskog raspona

Androidov tim HASHTAGS bio je u fazi izrade našeg Odjeljka za izvješća o Analyticsu.

Ovaj novi odjeljak omogućio bi našim korisnicima odabir skupa filtara i raspona datumskih raspona koje bi izvješće pokrivalo.

The MaterialDatePicker došao s nekim unaprijed izrađenim komponentama koje bismo mogli iskoristiti da bismo postigli svoj slučaj upotrebe.

Za naš najčešći slučaj, koji omogućava korisniku da odabere raspon datuma, unaprijed izgrađeni MaterialDatePicker bilo bi dovoljno:

Ovim blokom koda dobivamo alat za odabir datuma koji korisnicima omogućuje odabir datumskog raspona.

Mjesečni birač datuma

Jedno od izvješća HASHTAGS-a koje ima jedinstveniji odabir datuma je Twitter Trends Report.

Ovo se izvješće razlikuje od ostalih po tome što umjesto dopuštanja bilo kakvog vremenskog raspona provodi jednomesečni odabir, što znači da korisnik može odabrati samo ožujak 2020. u odnosu na 3. i 16. ožujka 2020.

Naša web aplikacija to rješava pomoću padajućeg polja obrasca:

The MaterialDatePicker nema način da izvrši takvo ograničenje s unaprijed izgrađenim odabirom vremenskog raspona materijala koji je razmatran u prethodnom odjeljku. Srećom, MaterialDatePicker je izgrađen s dijelovima koji se mogu sastaviti koji nam omogućuju da proširimo zadano ponašanje za naš određeni slučaj korištenja.

Ponašanje odabira datuma

The MaterialDatePicker koristi a DateSelector kao sučelje koje se koristi za logiku odabira birača.

Iz Javadoca:

“Sučelje za korisnike {@link MaterialCalendar} za kontrolu načina na koji Kalendar prikazuje i vraća odabire ... '

Primijetit ćete da MaterialDatePicker.Builder.dateRangePicker() vraća instancu graditelja RangeDateSelector, koju smo koristili u gornjem primjeru.

Ova je klasa unaprijed izgrađeni selektor koji implementira DateSelector.

Mozgalice mjesečnog ponašanja odabira datuma

Za naš slučaj upotrebe, željeli smo način da naši korisnici odaberu cijeli mjesec kao odabrani datumski raspon; npr. Svibanj 2020., travanj 2020. itd.

Mislili smo da je unaprijed izgrađena RangeDateSelector gore navedena referenca dovela nas je do većine puta tamo. Komponenta je korisniku omogućila da odabere datumski raspon i izvrši a vezani .

Jedino što je nedostajalo bio je način da se nametne odabir za automatski odabir cijelog mjeseca. Zadano ponašanje RangeDateSelector ima li korisnik odabrati datum početka i datum završetka.

Željeli smo ponašanje tako da kada korisnik odabere dan u mjesecu, alat za odabir će zatim automatski odabrati cijeli mjesec kao datumski raspon.

Rješenje za koje smo se odlučili bilo je proširiti RangeDateSelector a zatim nadjačajte ponašanje odabira dana da biste umjesto njega automatski odabrali cijeli mjesec.

Srećom, postoji funkcija koju možemo nadjačati sa sučelja DateSelector pod nazivom: select(selection: Long).

Ova će se funkcija aktivirati kada korisnik odabere dan u biraču, a odabrani dan prosljeđuje se u UTC milisekundama od epohe.

Implementacija ponašanja odabira mjesečnih datuma

Ispostavilo se da je provedba najjednostavniji dio, budući da imamo jasnu funkciju koju možemo nadjačati kako bismo postigli ponašanje koje želimo.

Osnovna logika bit će sljedeća:

  1. Korisnik odabire dan.
  2. The select() funkcija se poziva s odabranim danom u a Dugo UTC milisekunde od epohe.
  3. Pronađite prvi i zadnji dan u mjesecu od dana koji nam je prešao.
  4. Nazovite super.select(1st of month) & super.select(last day of month)
  5. Ponašanje roditelja iz RangeDateSelector trebao raditi prema očekivanjima i odabrati mjesec kao datumski raspon.

Sve zajedno

Sad kad imamo svoj Custom MonthRangeDateSelector, možemo postaviti svoj MaterialDatePicker.

Da uzmemo primjer dalje, rezultat odabira možemo obraditi ovako:

Rezultat će izgledati ovako:

Shvaćam

Bilo je samo jedno glavno pitanje zbog kojeg je bilo teško doći do ovog rješenja.

Primarne komponente korištene za izgradnju našeg MonthRangeDateSelector su bili razred RangeDateSelector i sučelje DateSelector. Verzija knjižnice korištena u ovom članku (1.2.0-beta01) ograničila je vidljivost ove dvije datoteke kako bi obeshrabrila njihovo proširenje ili primjenu.

Kao rezultat toga, iako smo uspješno mogli kompajlirati naš novi MonthRangeDateSelector, kompajler je pokazao vrlo zastrašujuće upozorenje da nas odvrati od toga:

Jedan od načina da sakrijete ovo upozorenje kompajlera je dodavanje @Suppress('RestrictedApi') ovako:

Ovo iskustvo ilustrira kako, iako je Knjižnica komponenata materijala osigurala neke sjajne nove komponente za Zajednicu programera za Android, to je još uvijek u tijeku.

Veliki dio ove knjižnice je otvorenost povratnim informacijama Android zajednice! Nakon otkrivanja ovog ograničenja vidljivosti komponente, otvorio sam problem na projektu Github, pa čak otvorio i PR da se to odmah obrati.

Ova otvorena petlja povratnih informacija između tima za materijalne komponente i Android zajednice donosi izvrsnu suradnju i rezultate za sve.

Zaključak

Novi MaterialDatePicker ima izvrsnu funkcionalnost koja će vjerojatno pokrivati ​​većinu slučajeva odabira datuma.

Međutim, najbolji dio njega, poput nečega poput AppCompat CalendarView, jest to što je izgrađen na način koji se može komponirati. Stoga se može lako proširiti i izmijeniti za određene slučajeve uporabe, dok bi bilo puno teže postići takve stvari u CalendarView

Posebno hvala

Želio bih istaknuti neke ljude koji su pomogli u recenziji ovog članka:

Podijelite Sa Svojim Prijateljima: