{"id":792121,"date":"2023-12-01T01:42:30","date_gmt":"2023-12-01T07:42:30","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/sprout-engineering-skapa-en-android-manadsvaljare\/"},"modified":"2023-12-01T01:42:30","modified_gmt":"2023-12-01T07:42:30","slug":"sprout-engineering-skapa-en-android-manadsvaljare","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/sprout-engineering-skapa-en-android-manadsvaljare\/","title":{"rendered":"Sprout Engineering: Skapa en Android-m\u00e5nadsv\u00e4ljare"},"content":{"rendered":"

Obs: Den h\u00e4r artikeln baserades p\u00e5 Material Components version 1.2.0-beta01 fr\u00e5n och med 1 juni 2020<\/strong>.<\/p>\n

Under mina tre och ett halvt \u00e5r som jag arbetat i ett litet Android-team p\u00e5 Sprout Social, \u00e4r en av de viktigaste sakerna som motiverar mig att arbeta varje dag friheten och f\u00f6rtroendet hos v\u00e5rt f\u00f6retag att ta itu med ett problem p\u00e5 det s\u00e4tt vi tycker \u00e4r b\u00e4st.<\/p>\n

Friheten att unders\u00f6ka och utforska m\u00e5nga olika l\u00f6sningar p\u00e5 ett problem vi anser vara n\u00f6dv\u00e4ndigt, samtidigt som vi har en tidsram f\u00f6r att leverera produktuppdateringar, g\u00f6r att vi kan hitta den b\u00e4sta l\u00f6sningen f\u00f6r b\u00e5de v\u00e5ra kunder och v\u00e5r mjukvara.<\/p>\n

En av dessa utmaningar var att skapa en UI-komponent f\u00f6r v\u00e5r nya mobilrapporteringsfunktion. Den h\u00e4r nya komponenten var en m\u00e5nadsv\u00e4ljare, vilket gjorde det m\u00f6jligt f\u00f6r v\u00e5ra anv\u00e4ndare att st\u00e4lla in ett datumintervall f\u00f6r en analytisk rapport.<\/p>\n

<\/figure>\n

Utg\u00e5ngsplatsen vi valde var det befintliga materialkomponentbiblioteket. Ist\u00e4llet f\u00f6r att b\u00f6rja om fr\u00e5n b\u00f6rjan underh\u00e5lls det h\u00e4r biblioteket aktivt och anpassas till materialspecifikationerna. Med detta bibliotek som bas skulle vi f\u00f6rmodligen kunna minska m\u00e4ngden logik vi skulle beh\u00f6va skriva sj\u00e4lva.<\/p>\n

I den h\u00e4r artikeln kommer jag att t\u00e4cka hur vi n\u00e4rmade oss denna process, n\u00e5gra unika faktorer f\u00f6r att skapa Sprout Android-appen, n\u00e5gra “buggar” som uppstod (och fixades) l\u00e4ngs v\u00e4gen, och vad du b\u00f6r veta om du arbetar med ett projekt liknande.<\/p>\n

<\/span>Introduktion<\/span><\/h2>\n

Android Material Components version 1.1.0 introducerade en ny datumv\u00e4ljare UI-komponent. Ett av de v\u00e4lkomna till\u00e4ggen av denna nya MaterialDatePicker \u00f6ver AppCompat CalendarView \u00e4r m\u00f6jligheten att v\u00e4lja ett datumintervall med hj\u00e4lp av en kalendervy eller ett textinmatningsf\u00e4lt.<\/p>\n

Den gamla AppCompat CalendarView var inte s\u00e4rskilt flexibel. Det var en bra komponent f\u00f6r det begr\u00e4nsade anv\u00e4ndningsfallet det var t\u00e4nkt att l\u00f6sa; det vill s\u00e4ga, v\u00e4lj ett enstaka datum och valfria l\u00e4gsta och h\u00f6gsta datum f\u00f6r att ange en till\u00e5ten gr\u00e4ns f\u00f6r datumintervall.<\/p>\n

Den nya MaterialDatePicker skapades med mer flexibilitet f\u00f6r att m\u00f6jligg\u00f6ra anv\u00e4ndningen av ut\u00f6kad beteendefunktionalitet. Den fungerar genom en serie gr\u00e4nssnitt som kan implementeras f\u00f6r att justera och modifiera v\u00e4ljarens beteende.<\/p>\n

Denna beteendemodifiering g\u00f6rs under k\u00f6rning genom en upps\u00e4ttning byggm\u00f6nsterfunktioner i klassen MaterialDatePicker.Builder.<\/p>\n

Detta inneb\u00e4r att vi kan ut\u00f6ka basbeteendet f\u00f6r denna MaterialDatePicker genom komponerbara gr\u00e4nssnittskomponenter.<\/p>\n

Obs: \u00c4ven om det finns ett antal olika komponenter som MaterialDatePicker anv\u00e4nder, kommer vi i den h\u00e4r artikeln endast att t\u00e4cka datumv\u00e4ljarkomponenten.<\/p>\n

<\/span>Datumintervallv\u00e4ljare<\/span><\/h2>\n

Sprout Social Android-teamet var i f\u00e4rd med att skapa v\u00e5r analysrapportsektion.<\/p>\n

Detta nya avsnitt skulle till\u00e5ta v\u00e5ra anv\u00e4ndare att v\u00e4lja en upps\u00e4ttning filter och en upps\u00e4ttning datumintervall som rapporten skulle t\u00e4cka.<\/p>\n

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

MaterialDatePicker kom med n\u00e5gra f\u00f6rbyggda komponenter som vi kunde utnyttja f\u00f6r att uppn\u00e5 v\u00e5rt anv\u00e4ndningsfall.<\/p>\n

F\u00f6r v\u00e5rt vanligaste fall, att l\u00e5ta en anv\u00e4ndare v\u00e4lja ett datumintervall, skulle den f\u00f6rbyggda MaterialDatePicker r\u00e4cka:<\/p>\n

Med detta kodblock f\u00e5r vi en datumv\u00e4ljare som l\u00e5ter anv\u00e4ndare v\u00e4lja ett datumintervall.<\/p>\n

\"\"<\/figure>\n

<\/span>M\u00e5natlig datumv\u00e4ljare<\/span><\/h2>\n

En av Sprout Social-rapporterna som har ett mer unikt datumval \u00e4r Twitter Trends Report.<\/p>\n

Den h\u00e4r rapporten skiljer sig fr\u00e5n de andra genom att ist\u00e4llet f\u00f6r att till\u00e5ta vilken typ av datumintervall som helst, till\u00e4mpar den ett val av en enda m\u00e5nad, vilket inneb\u00e4r att en anv\u00e4ndare endast kan v\u00e4lja mars 2020 j\u00e4mf\u00f6rt med 3 mars – 16 mars 2020.<\/p>\n

V\u00e5r webbapplikation hanterar detta med hj\u00e4lp av ett rullgardinsf\u00e4lt:<\/p>\n

\"\"<\/figure>\n

MaterialDatePicker har inte ett s\u00e4tt att uppr\u00e4tth\u00e5lla en s\u00e5dan begr\u00e4nsning med den f\u00f6rbyggda Material Date Range Picker som diskuterades i f\u00f6reg\u00e5ende avsnitt. Lyckligtvis byggdes MaterialDatePicker med komponerbara delar som till\u00e5ter oss att ut\u00f6ka standardbeteendet f\u00f6r v\u00e5rt specifika anv\u00e4ndningsfall.<\/p>\n

<\/span>Beteende f\u00f6r datumval<\/span><\/h3>\n

MaterialDatePicker anv\u00e4nder en DateSelector som gr\u00e4nssnittet som anv\u00e4nds f\u00f6r v\u00e4ljarvalslogiken.<\/p>\n

Fr\u00e5n Javadoc:<\/p>\n

“Gr\u00e4nssnitt f\u00f6r {@link MaterialCalendar}-anv\u00e4ndare f\u00f6r att styra hur kalendern visas och returnerar val…”<\/p>\n

Du kommer att m\u00e4rka att MaterialDatePicker.Builder.dateRangePicker() returnerar en builder-instans av RangeDateSelector, som vi anv\u00e4nde i exemplet ovan.<\/p>\n

Den h\u00e4r klassen \u00e4r en f\u00f6rbyggd v\u00e4ljare som implementerar DateSelector.<\/p>\n

<\/span>Brainstorma ett m\u00e5natligt datumvalsbeteende<\/span><\/h3>\n

F\u00f6r v\u00e5rt anv\u00e4ndningsfall ville vi ha ett s\u00e4tt f\u00f6r v\u00e5ra anv\u00e4ndare att v\u00e4lja en hel m\u00e5nad som ett valt datumintervall; till exempel maj 2020, april 2020 osv.<\/p>\n

Vi tror att den f\u00f6rbyggda RangeDateSelector som refereras till ovan tog oss det mesta p\u00e5 v\u00e4gen. Komponenten gjorde det m\u00f6jligt f\u00f6r en anv\u00e4ndare att v\u00e4lja ett datumintervall och till\u00e4mpa en [lower, upper] bunden<\/strong>.<\/p>\n

Det enda som saknades var ett s\u00e4tt att genomdriva ett urval f\u00f6r att automatiskt v\u00e4lja hela m\u00e5naden. Standardbeteendet f\u00f6r RangeDateSelector g\u00f6r att anv\u00e4ndaren v\u00e4ljer ett startdatum och ett slutdatum.<\/p>\n

Vi ville ha ett beteende s\u00e5 att n\u00e4r en anv\u00e4ndare valde en dag i m\u00e5naden, skulle v\u00e4ljaren automatiskt v\u00e4lja hela m\u00e5naden som datumintervall.<\/p>\n

\"\"<\/figure>\n

L\u00f6sningen vi best\u00e4mde oss f\u00f6r var att ut\u00f6ka RangeDateSelector och sedan \u00e5sidos\u00e4tta beteendet f\u00f6r val av dag f\u00f6r att automatiskt v\u00e4lja hela m\u00e5naden.<\/p>\n

Lyckligtvis finns det en funktion som vi kan \u00e5sidos\u00e4tta fr\u00e5n DateSelector-gr\u00e4nssnittet som heter: select(selection: Long).<\/p>\n

Denna funktion kommer att anropas n\u00e4r en anv\u00e4ndare v\u00e4ljer en dag i v\u00e4ljaren, d\u00e4r den valda dagen har f\u00f6rflutit i UTC-millisekunder sedan epoken.<\/p>\n

<\/span>Implementera ett beteende f\u00f6r val av m\u00e5nadsdatum<\/span><\/h3>\n

Implementeringen visade sig vara den enklaste delen, eftersom vi har en tydlig funktion som vi kan \u00e5sidos\u00e4tta f\u00f6r att f\u00e5 det beteende vi vill ha.<\/p>\n

Den grundl\u00e4ggande logiken blir denna:<\/p>\n

    \n
  1. Anv\u00e4ndaren v\u00e4ljer en dag.<\/li>\n
  2. Funktionen select() anropas med dagen vald i a L\u00e5ng<\/strong> UTC millisekunder sedan epok.<\/li>\n
  3. Hitta den f\u00f6rsta och sista dagen i m\u00e5naden fr\u00e5n den givna dagen som h\u00e4nde oss.<\/li>\n
  4. Ring ett samtal till super.select (f\u00f6rsta dagen i m\u00e5naden) och super.select (sista dagen i m\u00e5naden)<\/li>\n
  5. Huvudbeteendet f\u00f6r RangeDateSelector b\u00f6r fungera som f\u00f6rv\u00e4ntat och v\u00e4lj m\u00e5nad som datumintervall.<\/li>\n<\/ol>\n

    <\/span>F\u00e5 alltid att falla p\u00e5 plats<\/span><\/h3>\n

    Nu n\u00e4r vi har v\u00e5r anpassade MonthRangeDateSelector kan vi konfigurera v\u00e5r MaterialDatePicker.<\/p>\n

    F\u00f6r att ta exemplet vidare kan vi bearbeta urvalsresultatet s\u00e5 h\u00e4r:<\/p>\n

    Resultatet kommer att se ut s\u00e5 h\u00e4r:<\/p>\n

    \"\"<\/figure>\n

    <\/span>Gotchas<\/span><\/h2>\n

    Det fanns bara ett stort problem som gjorde det sv\u00e5rt att n\u00e5 denna l\u00f6sning.<\/p>\n

    Huvudkomponenterna som anv\u00e4ndes f\u00f6r att bygga v\u00e5r MonthRangeDateSelector var RangeDateSelector-klassen och DateSelector-gr\u00e4nssnittet. Den version av biblioteket som anv\u00e4nds i den h\u00e4r artikeln (1.2.0-beta01) begr\u00e4nsade synligheten f\u00f6r dessa tv\u00e5 filer, f\u00f6r att motverka deras f\u00f6rl\u00e4ngning eller implementering.<\/p>\n

    Som ett resultat, \u00e4ven om vi lyckades kompilera v\u00e5r nya MonthRangeDateSelector, visade kompilatorn en mycket skr\u00e4mmande varning f\u00f6r att avskr\u00e4cka oss fr\u00e5n att g\u00f6ra det:<\/p>\n

    \"\"<\/figure>\n

    Ett s\u00e4tt att d\u00f6lja denna varning fr\u00e5n kompilatorn \u00e4r att l\u00e4gga till en @Suppress(“RestrictedApi”) s\u00e5 h\u00e4r:<\/p>\n

    \"\"<\/figure>\n

    Den h\u00e4r erfarenheten illustrerar hur, \u00e4ven om Material Components Library har tillhandah\u00e5llit n\u00e5gra fantastiska nya komponenter till Android-utvecklargemenskapen, det fortfarande p\u00e5g\u00e5r.<\/p>\n

    En stor del av det h\u00e4r biblioteket \u00e4r \u00f6ppenheten f\u00f6r feedback fr\u00e5n Android-gemenskapen. Efter att ha uppt\u00e4ckt denna begr\u00e4nsning av komponentsynlighet, \u00f6ppnade jag ett problem p\u00e5 Github-projektet och \u00f6ppnade till och med en PR f\u00f6r att ta itu med det omedelbart.<\/p>\n

    Denna \u00f6ppna \u00e5terkopplingsslinga mellan Material Components-teamet och Android-gemenskapen skapar fantastiskt samarbete och resultat f\u00f6r alla.<\/p>\n

    <\/span>Slutsats<\/span><\/h2>\n

    Den nya MaterialDatePicker har n\u00e5gra fantastiska funktioner som \u00e4r klara i l\u00e5dan som f\u00f6rmodligen kommer att t\u00e4cka de flesta anv\u00e4ndningsfall f\u00f6r datumplockning.<\/p>\n

    Det b\u00e4sta med n\u00e5got som AppCompat CalendarView \u00e4r dock att det \u00e4r byggt p\u00e5 ett komponerbart s\u00e4tt. S\u00e5 det kan enkelt ut\u00f6kas och modifieras f\u00f6r specifika anv\u00e4ndningsfall, medan det skulle vara mycket sv\u00e5rare att uppn\u00e5 s\u00e5dana saker i CalendarView.<\/p>\n

    <\/span>Speciellt tack<\/span><\/h3>\n

    Jag skulle vilja lyfta fram n\u00e5gra personer som hj\u00e4lpte till att granska den h\u00e4r artikeln:<\/p>\n

    \n
    \n

    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n