Opomba: Ta članek je temeljil na različici Material Components 1.2.0-beta01 od 1. junij 2020 .



V treh letih in pol, ko sem delal v majhni ekipi za Android pri HASHTAGS, je ena glavnih stvari, ki me motivira, da vsak dan prihajam v službo, svoboda in zaupanje našega podjetja, da se problema lotimo na kakršen koli način, ki se nam zdi najboljši.



Svoboda raziskovanja in raziskovanja številnih različnih rešitev problema, za katerega menimo, da je potreben, hkrati pa upošteva časovni okvir za posodabljanje izdelkov, nam omogoča, da najdemo najboljšo rešitev tako za naše stranke kot za našo programsko opremo.

Eden takih izzivov je bil sestaviti komponento uporabniškega vmesnika za našo novo funkcijo Mobile Reporting. Ta nova komponenta je bila izbirnik mesecev, ki je našim uporabnikom omogočal časovno obdobje za analitično poročilo.

Začetno mesto, ki smo ga izbrali, je bilo obstoječe Knjižnica materialnih komponent . Namesto da bi začela od začetka, se ta knjižnica aktivno vzdržuje in je v skladu s specifikacijami materiala. S to knjižnico kot temeljem bi verjetno lahko zmanjšali količino logike, ki bi jo morali napisati sami.

V tem članku bom opisal, kako smo se lotili tega postopka, nekaj edinstvenih dejavnikov pri izdelavi aplikacije Sprout za Android, nekaj »dobljenih« vprašanj, ki so se pojavila (in so bila odpravljena) ob poti, in kaj vedeti, če ste ki delajo na podobnem projektu.

Uvod

Komponente materiala za Android 1.1.0 Sprostitev predstavil novo komponento uporabniškega vmesnika izbirnika datumov. Eden od pozdravnih dodatkov tega novega MaterialDatePicker preko AppCompat CalendarView je možnost izbire obsega datumov s pomočjo pogleda koledarja ali polja za vnos besedila.



Stari AppCompat CalendarView ni bil zelo prilagodljiv. To je bila dobra komponenta za primer omejene uporabe, ki naj bi ga rešili; to je izbira enega samega datuma in neobveznih najnižjih in najdaljših datumov za določitev dovoljenega vezanega časovnega obdobja.

Novi MaterialDatePicker je bil zgrajen z večjo prilagodljivostjo, da je omogočil uporabo razširjene funkcionalnosti vedenja. Deluje skozi vrsto vmesnikov, ki bi jih lahko uporabili za prilagoditev in spreminjanje vedenja izbirnika.

Ta sprememba vedenja se izvede med izvajanjem prek nabora funkcij vzorca gradnika na MaterialDatePicker.Builder razred.



To pomeni, da lahko razširimo osnovno vedenje tega MaterialDatePicker prek sestavljivih komponent vmesnika.

Opomba: Čeprav obstaja več različnih komponent, MaterialDatePicker v tem članku bomo pokrivali samo komponento za izbiro datuma.

numerologija 11 pomen

Izbirnik časovnega obdobja

Skupina Android HASHTAGS je bila v postopku oblikovanja našega oddelka za poročila Analytics.

Ta novi odsek bi našim uporabnikom omogočil, da izberejo nabor filtrov in nabor časovnih obdobij, ki jih bo zajemalo poročilo.

The MaterialDatePicker prišel z nekaj vnaprej sestavljenimi komponentami, s katerimi bi lahko izkoristili naš primer uporabe.

Za naš najpogostejši primer, ki omogoča uporabniku, da izbere obseg datumov, je vnaprej zgrajena MaterialDatePicker bi zadostovalo:

S tem blokom kode dobimo izbirnik datumov, ki uporabnikom omogoča, da izberejo časovno obdobje.

Mesečni izbirnik datuma

Eno od poročil HASHTAGS, ki ima bolj edinstven izbor datumov, je poročilo o trendih Twitterja.

To poročilo se od ostalih razlikuje po tem, da namesto kakršnega koli časovnega obdobja uveljavi enomesečno izbiro, kar pomeni, da lahko uporabnik izbere samo marec 2020 v primerjavi s 3. marcem do 16. marca 2020.

Naša spletna aplikacija to reši z uporabo spustnega polja obrazca:

The MaterialDatePicker ne more uveljaviti takšne omejitve s predhodno vgrajenim izbirnikom časovnega obsega materiala, o katerem smo govorili v prejšnjem razdelku. Na srečo je bil MaterialDatePicker sestavljen iz sestavljivih delov, ki nam omogočajo razširitev privzetega vedenja za naš poseben primer uporabe.

Obnašanje pri izbiri datuma

The MaterialDatePicker vzvoda a DateSelector kot vmesnik, ki se uporablja za izbirno logiko izbirnika.

Iz Javadoca:

“Vmesnik za uporabnike {@link MaterialCalendar} za nadzor nad prikazom in vrnitvijo koledarja… «

Opazili boste, da MaterialDatePicker.Builder.dateRangePicker() vrne primer graditelja RangeDateSelector, ki smo ga uporabili v zgornjem primeru.

Ta razred je vnaprej zgrajen izbirnik, ki izvaja DateSelector.

Razmišljanje o vedenju izbire mesečnega datuma

Za naš primer uporabe smo želeli, da uporabniki izberejo cel mesec kot izbrano časovno obdobje; npr. Maj 2020, april 2020 itd.

Mislili smo, da je vnaprej RangeDateSelector zgoraj omenjena pot nas je vodila večino poti tja. Komponenta je uporabniku omogočala, da izbere časovno obdobje in uveljavi a vezan .

Manjkal je le način, kako uveljaviti izbor za samodejno izbiro celotnega meseca. Privzeto vedenje RangeDateSelector uporabnik izbere začetni in končni datum.

Želeli smo vedenja, tako da ko uporabnik izbere dan v mesecu, izbirnik nato samodejno izbere cel mesec kot časovno obdobje.

Rešitev, za katero smo se odločili, je bila razširiti RangeDateSelector in nato preglasite vedenje izbire dneva, da namesto tega samodejno izberete cel mesec.

Na srečo obstaja funkcija, ki jo lahko preglasimo iz vmesnika DateSelector se imenuje: select(selection: Long).

Ta funkcija se bo sprožila, ko bo uporabnik izbral dan v izbirniku, pri čemer bo izbrani dan v epohi prešel v milisekundah UTC.

Izvajanje mesečnega vedenja izbire datuma

Izvedba se je izkazala za najpreprostejši del, saj imamo jasno funkcijo, ki jo lahko preglasimo, da dobimo vedenje, ki ga želimo.

Osnovna logika bo naslednja:

  1. Uporabnik izbere dan.
  2. The select() funkcija se pokliče z izbranim dnevom v dolga UTC milisekunde od epohe.
  3. Poiščite prvi in ​​zadnji dan v mesecu od danega dne, ki nam je bil poslan.
  4. Pokličite na super.select(1st of month) & super.select(last day of month)
  5. Obnašanje staršev iz RangeDateSelector bi moral delovati po pričakovanjih in kot časovno obdobje izberite mesec.

Vse skupaj

Zdaj, ko imamo našo Custom MonthRangeDateSelector, lahko nastavimo našo MaterialDatePicker.

Če vzamemo primer še naprej, lahko rezultat izbora obdelamo tako:

Rezultat bo videti takole:

Razumem

Samo eno glavno vprašanje je otežilo rešitev.

Primarne komponente, ki se uporabljajo za izdelavo naših MonthRangeDateSelector so bili razred RangeDateSelector in vmesnik DateSelector. Različica knjižnice, uporabljena v tem članku (1.2.0-beta01), je omejila vidnost teh dveh datotek, da bi preprečila njihovo razširitev ali izvajanje.

Kot rezultat, čeprav smo lahko uspešno sestavili našo novo MonthRangeDateSelector, je prevajalnik pokazal zelo strašljivo opozorilo, da nas odvrača od tega:

Eden od načinov, kako skriti to opozorilo prevajalnika, je, da dodate @Suppress('RestrictedApi') takole:

Ta izkušnja ponazarja, da čeprav je knjižnica materialnih komponent skupnosti razvijalcev Android zagotovila nekaj odličnih novih komponent, to še vedno poteka.

Velik del te knjižnice je odprtost za povratne informacije skupnosti Android! Po odkritju te omejitve vidljivosti komponente sem odprl težava na projektu Github in celo odprl a PR da jo takoj reši.

Ta odprta povratna zanka med skupino Material Components in skupnostjo Android prinaša odlično sodelovanje in rezultate za vse.

Zaključek

Novo MaterialDatePicker ima nekaj odličnih funkcionalnosti, ki bodo verjetno zajemale večino primerov uporabe datuma.

Vendar je najboljši del tega, kot je AppCompat CalendarView, ta, da je zgrajen na način, ki ga je mogoče sestaviti. Zato ga je mogoče enostavno razširiti in spremeniti za posebne primere uporabe, medtem ko bi bilo veliko težje doseči take stvari v CalendarView

Posebna hvala

Rad bi izpostavil nekaj ljudi, ki so pomagali pri strokovnem pregledu tega članka:

Delite S Prijatelji: