RoboSwag/base-filters/README.md

Описание

Модуль содержит реализацию следующих типов фильтров:

1. Выбор одного/нескольких из доступных значений списка
2. Выбор одного/нескольких значений из перечня тегов
3. Выбор минимального и максимального значения из диапозона

Использование

1. Выбор одного/нескольких из доступных значений списка

Как использовать

val selectorView = ListSelectionView<DefaultSelectionItem, SelectionItemViewHolder<DefaultSelectionItem>>(context)
        .Builder()
        .setItems(navArgs.items)
        .addItemDecoration((TopDividerItemDecoration(
                context = requireContext(),
                drawableId = R.drawable.list_divider_1dp,
                startMargin = START_MARGIN_DIVIDER_DP.px
        )))
        .withSelectionType(ListSelectionView.SelectionType.SINGLE_SELECT)
        .onResultListener { items ->
            viewModel.dispatchAction(SelectItemAction.SelectItem(items)) 
        }
        .build()

Конфигурации

• при создании ListSelectionView<ItemType, HolderType> необходимо передлать ItemType - класс модели данных в списке, HolderType - класс viewHolder-а в recyclerView. Для использования дефолтной реализации необходимо использовать типы <DefaultSelectionItem, SelectionItemViewHolder<DefaultSelectionItem>>
• в метод setItems(List<ItemType>) необходимо передать список объектов
• метод addItemDecoration(itemDecoration: RecyclerView.ItemDecoration) можно использовать для передачи объекта RecyclerView.ItemDecoration
• метод withSelectionType(type: SelectionType) используется для указания типа выбора:
  • SINGLE_SELECT - по умолчанию - позволяет выбрать один выариант, при этом будет выбран всегда как минимум один вариант
  • MULTI_SELECT - позволяет выбрать несколько вариантов из списка, при этом можно полностью выбрать все варианты и убрать выделение со всех вариантов
• метод showInHolder(HolderFactoryType<ItemType>) используется для определения кастомного viewHolder для списка с недефолтной разметкой.

val selectorView = ListSelectionView<TestSelectionItem, TestItemViewHolder>(context)
        .Builder()
        .showInHolder { parent, clickListener, selectionType ->
            TestItemViewHolder(
                    binding = TestSelectionItemBinding.inflate(LayoutInflater.from(parent.context), parent, false),
                    onItemSelectAction = clickListener,
                    selectionType = selectionType
            )
        }
        ...
        .build()

• колбэк onSelectedItemsListener(listener: OnSelectedItemsListener<ItemType>) можно использовать для получения списка всех элементов ItemType после каждого выбора
• колбэк onSelectedItemListener(listener: OnSelectedItemListener<ItemType>) можно использовать для получения элемента списка ItemType, по которому произошел клик
• после вызова конфигурационных методов обязательно необходимо вызать метод build()

Кастомизация стиля дефолтной реализации ViewHolder без необходимости создания кастомного layout и viewHolder

1) Определить кастомную тему и стили элементов

1. Стиль для текста элемента списка должен быть наследником стиля Widget.FilterSelection.Item

<style name="Widget.Custom.FilterSelection.Item" parent="@style/Widget.FilterSelection.Item">
        <item name="android:textAppearance">@style/Text15sp.Regular.Black</item>
        <item name="android:paddingTop">2dp</item>
        <item name="android:lineSpacingExtra">3sp</item>
        <item name="android:translationY">-1.71sp</item>
</style>

2. Стиль для индикатора выбора должен быть наследником стиля Widget.FilterSelection.Radio Передайте selector-drawable для кастомизации вида индикатора в конце строки

<style name="Widget.Custom.FilterSelection.Radio" parent="@style/Widget.FilterSelection.Radio">
        <item name="android:button">@drawable/selector_checkbox</item>
</style>

3. Создайте тему, которая должна быть наследником Theme.FilterSelection

<style name="Theme.Custom.FilterSelection" parent="@style/Theme.FilterSelection">
        <item name="sheetSelection_itemStyle">@style/Widget.Custom.FilterSelection.Item</item>
        <item name="sheetSelection_radioStyle">@style/Widget.Custom.FilterSelection.Radio</item>
</style>

2) Применить тему при создании view

При создании вью в коде можно указать тему, используя ContextThemeWrapper

val newContext = ContextThemeWrapper(requireContext(), R.style.Theme_Custom_FilterSelection)
val selectorView = ListSelectionView(newContext)
        .Builder()
        ...
        .build()

2. Выбор одного/нескольких значений из перечня тегов

• TagLayoutView - view-контейнер для тегов
• TagView - view для тега. Кастомная разметка для тега должна содержать в корне TagView

Как использовать

binding.tagItemLayout
        .Builder(getFilterItem())
        .setSpacing(16)
        .setSelectionType(SelectionType.MULTI_SELECT) // по умолчанию
        .isSingleLine(false)    // по умолчанию
        .onPropertySelectedAction { filterProperty: FilterProperty ->
            //Do something
        }
        .build()

Конфигурации

• метод setSelectionType(SelectionType) конфигурирует тип выбора:
  • SINGLE_SELECT - выбор одного варианта сбрасывает select у всех остальных
  • MULTI_SELECT - по умолчанию - мультивыбор тегов с учетом исключающих фильтров
• метод isSingleLine(Boolean) конфигурирует вид контейнера с тегами: true соответствует горизонтальному контейнеру со скроллом
• setTagLayout(Int) устанавливает разметку для тега. Если не задано - то используется дефолтная разметка layout_default_tag.xml
• setMaxTagCount(Int) позволяет ограничить количество отображаемых тегов. По умолчанию ограничения нет.
• setMoreTagLayout(Int, String) устанавливает разметку для тега, который отображается для дополнительного тега. Если не указана - то тег не будет создан
• setSpacing(Int), setSpacingHorizontal(Int) и setSpacingVertical(Int) можно использовать для настройки расстояния между тегами. По умолчанию - 0
• onMoreValuesAction(FilterMoreAction) и onPropertySelectedAction(PropertySelectedAction) используются для передачи колбэков на клик по тегу типа "Еще" и обычного тега соответственно
• после вызова конфигурационных методов обязательно необходимо вызать метод build()
• в Builder необходимо передать объект filterItem: FilterItem

3. Выбор минимального и максимального значения из диапозона

• RangeChoiceView - контейнер для слайдера и редактируемых полей
• FilterRangeSlider - слайдер - Можно использовать как отдельный элемент
• HintInputView - view для редактируемого поля начала и окончания диапозона

Как использовать

В разметке

<ru.touchin.roboswag.base_filters.range.RangeChoiceView
        android:id="@+id/range_values_test"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/FilterRangeChoice" //не забудьте указать стиль
        app:layout_constraintTop_toTopOf="parent" />

Настройка в коде

fun setupValues(item: FilterRangeItem) {
            binding.rangeValuesTest.setupRangeValues(
                    rangeFilterItem = item,
                    onChangeCallback = callback
            )
        }

        fun resetValues() {
            binding.rangeValuesTest.resetRangeValue()
        }

Конфигурации

Вся конфигурация вьюх осуществляется через стили:

• Для RangeChoiceView:
  • filterRange_sliderMargin - расстояние от слайдера до редактируемых полей
  • filterRange_startHint - ссылка на строку с текстом подсказки в редактируемом поле для начального значения
  • filterRange_endHint - ссылка на строку с текстом подсказки в редактируемом поле для конечного значения
  • filterRange_theme - ссылка на тему
• В теме:
  • атрибут filterRange_sliderStyle - ссылка на стиль слайдера
  • атрибут filterRange_hintViewStyle - ссылка на стиль HintInputView
  • атрибут filterRange_hintTextStyle - ссылка на стиль TextView внутри HintInputView
  • атрибут filterRange_valueEditTextStyle - ссылка на стиль EditText внутри HintInputView
• Для FilterRangeSlider:
  • trackColorActive
  • trackColorInactive
  • trackHeight
  • thumbElevation
  • thumbColor
  • labelBehavior
  • haloRadius
  • filterRange_stepTextAppearance
  • filterRange_activeTickColor
  • filterRange_inactiveTickColor
  • filterRange_stepValueMarginTop
  • filterRange_sliderPointSize
  • filterRange_pointShape