Забележка: Тази статия се основава на версията на Материални компоненти 1.2.0-бета01 към 1 юни 2020 г. .



През моите три години и половина работа в малък екип за Android в HASHTAGS, едно от основните неща, които ме мотивират да влизам на работа всеки ден, е свободата и доверието от нашата компания да се справим с проблема по какъвто и да е начин, който сметнем за най-добър.



Свободата да изследваме и изследваме много различни решения на проблем, който сметнем за необходим, като същевременно отчитаме времеви период за предоставяне на актуализации на продуктите, ни позволява да намерим най-доброто решение както за нашите клиенти, така и за нашия софтуер.

Едно такова предизвикателство включва изграждането на UI компонент за новата ни функция за мобилно отчитане. Този нов компонент беше инструмент за избор на месец, който позволи на нашите потребители да обхванат период от време за отчет за анализ.

Изходното място, което избрахме, беше съществуващото Библиотека на материалните компоненти . Вместо да започне от нулата, тази библиотека се поддържа активно и се привежда в съответствие със спецификациите на материала. С тази библиотека като основа, вероятно бихме могли да намалим количеството логика, което би трябвало да напишем сами.

В тази статия ще разкажа как подходихме към този процес, някои уникални фактори при изграждането на приложението Sprout Android, няколко „разбрани неща“, които се появиха (и бяха коригирани) по пътя, и какво да знаете, ако сте работи по подобен проект.

Въведение

Материалните компоненти на Android 1.1.0 Освобождаване представи нов компонент на потребителския интерфейс за избор на дата. Едно от приветствените допълнения на този нов MaterialDatePicker над AppCompat CalendarView е възможността за избор на диапазон от дати, използвайки или изглед на календар или поле за въвеждане на текст.



Старият AppCompat CalendarView не беше много гъвкав. Това беше добър компонент за случая с ограничена употреба, който трябваше да реши; тоест, избиране на единична дата и незадължителни минимални и максимални дати, за да се определи допустим обвързан период от време.

Новият MaterialDatePicker е създаден с повече гъвкавост, за да позволи използването на разширена функционалност на поведението. Той работи чрез поредица от интерфейси, които човек може да внедри, за да променя и променя поведението на инструмента за избор.

Тази модификация на поведението се извършва по време на изпълнение чрез набор от функции на шаблона на конструктора на MaterialDatePicker.Builder клас.



Това означава, че сме в състояние да разширим базовото поведение на това MaterialDatePicker чрез композируеми интерфейсни компоненти.

Забележка: Въпреки че има редица различни компоненти, MaterialDatePicker използва, в тази статия ще разгледаме само компонента за избор на дата.

1144 ангелски числа

Избор на период от време

Екипът на HASHTAGS Android беше в процес на изграждане на нашата секция за отчети в Google Анализ.

Този нов раздел ще позволи на нашите потребители да изберат набор от филтри и набор от периоди от време, които отчетът ще обхваща.

MaterialDatePicker дойде с някои предварително изградени компоненти, които бихме могли да използваме, за да изпълним нашия случай на употреба.

За най-често срещания ни случай, позволяващ на потребителя да избере диапазон от дати, предварително изградената MaterialDatePicker би било достатъчно:

С този кодов блок получаваме инструмент за избор на дата, който позволява на потребителите да избират период от време.

Месечен избор на дата

Един от отчетите на HASHTAGS, който има по-уникален избор на дати, е отчетът за тенденциите в Twitter.

Този отчет се различава от останалите по това, че вместо да позволява какъвто и да е период от време, той налага едномесечен избор, което означава, че потребителят може да избере само март 2020 спрямо 3 март до 16 март 2020.

Нашето уеб приложение се справя с това, като използва падащо поле за формуляр:

MaterialDatePicker няма начин да наложи такова ограничение с предварително изградения Материал за избор на диапазон от време, обсъден в предишния раздел. За щастие, MaterialDatePicker е създаден с композируеми части, които ни позволяват да разширим поведението по подразбиране за конкретния ни случай на употреба.

Поведение при избор на дата

MaterialDatePicker използва a DateSelector като интерфейс, използван за логиката за избор на инструмента за избор.

От Javadoc:

„Интерфейс за потребители на {@link MaterialCalendar} за да контролирате начина, по който Календарът показва и връща селекциите ... ”

Ще забележите, че MaterialDatePicker.Builder.dateRangePicker() връща екземпляр на конструктор на RangeDateSelector, който използвахме в горния пример.

Този клас е предварително изграден селектор, който реализира DateSelector.

Мозъчен штурм на поведение за избор на месечна дата

За нашия случай на употреба искахме начин нашите потребители да изберат цял ​​месец като избран период от време; напр. Май 2020 г., април 2020 г. и т.н.

Смятахме, че предварително изградената RangeDateSelector спомената по-горе ни отведе по-голямата част от пътя. Компонентът позволи на потребителя да избере период от време и да приложи a обвързан .

Единственото нещо, което липсваше, беше начин за налагане на селекция за автоматичен избор на целия месец. Поведението по подразбиране на RangeDateSelector Потребителят избира начална и крайна дата.

Искахме поведение, така че когато потребителят избере ден от месеца, инструментът за избор автоматично ще избере целия месец като период от време.

Решението, което взехме, беше да разширим RangeDateSelector и след това заменете поведението за избор на ден, за да изберете автоматично целия месец вместо това.

За щастие има функция, която можем да заменим от интерфейса DateSelector наречен: select(selection: Long).

Тази функция ще бъде извикана, когато потребителят избере ден в инструмента за избор, като избраният ден се подава в UTC милисекунди от епохата.

Внедряване на поведение за избор на месечна дата

Внедряването се оказа най-простата част, тъй като имаме ясна функция, която можем да заменим, за да постигнем поведението, което искаме.

Основната логика ще бъде следната:

  1. Потребителят избира ден.
  2. select() функция се извиква с избрания ден в a Дълго UTC милисекунди от епохата.
  3. Намерете първия и последния ден от месеца от подадения ни ден.
  4. Обадете се на super.select(1st of month) & super.select(last day of month)
  5. Поведението на родителя от RangeDateSelector трябва да работи според очакванията и изберете месеца като период от време.

Събирайки всичко

Сега, когато разполагаме с потребителски MonthRangeDateSelector, можем да настроим нашите MaterialDatePicker.

За да вземем примера по-нататък, можем да обработим резултата от селекцията по следния начин:

Резултатът ще изглежда така:

Разбрах

Имаше само един основен проблем, който затрудни постигането на това решение.

Основните компоненти, използвани за изграждането на нашите MonthRangeDateSelector бяха класът RangeDateSelector и интерфейса DateSelector. Версията на библиотеката, използвана в тази статия (1.2.0-beta01), ограничава видимостта на тези два файла, за да обезкуражи разширяването или прилагането им.

В резултат, въпреки че успяхме успешно да компилираме новия си MonthRangeDateSelector, компилаторът показа много страшно предупреждение, за да ни обезсърчи от това:

Един от начините да скриете това предупреждение на компилатора е да добавите @Suppress('RestrictedApi') така:

Този опит илюстрира как, въпреки че библиотеката на материалните компоненти е предоставила някои страхотни нови компоненти на общността на разработчиците на Android, тя все още е в процес на разработка.

Голяма част от тази библиотека е отвореността за обратна връзка от общността на Android! След като открих това ограничение на видимостта на компонента, отворих проблем по проекта Github и дори отвори PR да се обърне към него веднага.

Този отворен цикъл на обратна връзка между Екипа на материалните компоненти и Android общността поражда чудесно сътрудничество и резултати за всички.

Заключение

Новото MaterialDatePicker има чудесна функционалност, която вероятно ще покрие повечето случаи на използване на избор на дата.

Най-добрата част обаче от нещо като AppCompat CalendarView е, че е изграден по начин, който може да се композира. Следователно, той може лесно да бъде разширен и модифициран за конкретни случаи на употреба, докато би било много по-трудно да се постигнат такива неща в CalendarView

Специални благодарности

Бих искал да подчертая някои хора, които помогнаха на рецензирането на тази статия:

Споделете С Приятелите Си: