3

Я использую ItemTouchHelper для реализации фичи "удаление по свайпу". Знаю, что есть и другие способы сделать это, но читал что использование ItemTouchHelper - самый удобный и современный, а в добавок он не требует сторонних библиотек.

Вот так мое приложение ведет себя в настоящий момент. Как только на экране не остается элеметов - показывается картинка посередине

введите сюда описание изображения

Корзина реализована фрагментом ShoppingCartFragment.java, а адаптер для RecyclerView, который используется в этом фрагменте, реализован в ShoppingCartItemRecyclerViewAdapter.java. Извиняюсь, что код выкладываю не сюда, а на гитхаб - это из-за ограничения на 30000 символов. Я поместил весь свой проект в отдельную ветку для StackOverflow, чтобы этот код в будущем не пропал.

ВОПРОСЫ

  1. Почему при свайпе у элемента сверху и снизу появляются края?

    введите сюда описание изображения

  2. Почему красный фон, оставленный после удаления элемента в середине списка, аккуратно уменьшается по высоте (гифка 1), в то время как после удаления элемента анимации изменения высоты не происходит, если этот элемент был единственный в списке (гифка 2).

    Гифка 1 Гифка 2

  3. Как удалить черные тени во время анимации появления кнопки UNDO (т.е. когда оа выезжает слева)? Мне кажется, что нужно изменить стандартную анимацию появления кнопки UNDO, которая зарыта где-то в ItemTouchHelper, но я не знаю где это сделать (т.е. какой метод за это отвечает)

    введите сюда описание изображения

  4. САМЫЙ ВАЖНЫЙ ВОПРОС - Как задать свою анимацию для объектов, которые расположены "позади" элемента, сдвинутого свайпом? Например, в Gmail используется совершенно другая анимация появления кнопки UNDO:

    введите сюда описание изображения

Буду рад любым советам, ссылкам и предложениям. Не стесняйтесь задать вопрос, если я где-то непонятно выразился.

1
  • 1
    У recyclerview есть itemAnimator, также гугл написал defaultItemAnimator, я в своей задачи просто скопировал их код из этого класса , он файнал вроде, и переопределил анимации какие нужно было
    – A-Z
    30 мая 2017 в 15:59

1 ответ 1

3

Этот ответ будет дополнен позже.

И так, вот что мне удалось узнать по поводу вопросов выше. Не забывайте что я ссылаюсь на код проекта в соответствующей ветке на моем гитхабе.

1) Мне кажется, что тут возможны две причины: либо это связанно с ItemDecorator'ом, который используется для RecyclerView (ShoppingCartFragment.java, строка 344), либо мы не видим тени у элементов RecyclerView т.к. между ними нет расстояния и тени просто "прячутся" под смежными элементами списка. У меня нет сейчас времени и возможности это выяснить, так что вопрос пока можно считать открытым. Я дополню ответ, как только выясню в чем конкретно заключается такое поведение теней.

2) Это связано с тем, что "анимация", которую вы видите - иллюзия. На самом деле красный фон не изменяет себя по высоте - его просто перекрывает элемент снизу. В этом легко убедиться, если добавить в разметку отступы.

Анимация замедлена в 10 раз

Чтобы устранить такое убогое поведение, достаточно привязать верхний и нижний края красного фона к верхнему и нижнему элементу списка соответственно

    /**
     * Подготавливает объект {@link ItemTouchHelper} и его колбэк
     * {@link android.support.v7.widget.helper.ItemTouchHelper.SimpleCallback} для прослушивания
     * свайпов и реализации основных графических эфектов свайпов (например, таких как красный фон
     * позади элемента, сдвигаемого свайпом)
     */
    private void setUpItemTouchHelper() {
        ItemTouchHelper.SimpleCallback simpleItemTouchCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT) {
            /** Фон, который показывается "за" элеметом при свайпе */
            Drawable background;
            /** Рисунок, информирующей пользователя, что сделаый иим свайп приведет к удалеию элемета */
            Drawable deleteMark;
            /** Отступы {@link #deleteMark}'а */
            int xMarkMargin;
            /** Флаг того, что метод {@link #init()} был вызван */
            boolean initiated;

            /** Инициализирует ресурсы графики, требуемые для свайпа. Например, {@link #background} */
            private void init() {
                background = new ColorDrawable(Color.RED);
                deleteMark = ContextCompat.getDrawable(getActivity(), R.drawable.ic_delete_24dp); // Получение ресурса "мусорной корзины"
                deleteMark.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP); // Фильтр, которй делает корзину белой
                xMarkMargin = (int) getActivity().getResources().getDimension(R.dimen.swipe_delete_mark_margin);
                initiated = true;
            }

            /**
             * Метод, обязательный для реализации, но не использующийся в данном приложении.
             * Нужен для реализации "drag & drop".
             * @param recyclerView RecyclerView, к которому прикрепляется нащ ItemTouchHelper
             * @param viewHolder ViewHolder (т.е. элемент списка), который подвергается перетаскиванию
             *                   по инициативе пользователя
             * @param target ViewHolder, над которым перетаскивается текущий активный элемент
             * @return True, если viewHolder перемещен в позицию адаптера элемета target.
             */
            @Override
            public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
                return false;
            }

            /**
             * Возвращает допустимые направления свайпа для данного объекта viewHolder.
             * Эти допустимые направления свайпов настраиваются либо в кострукторе, либо в {@link #setDefaultSwipeDirs(int)}.
             * @param recyclerView {@link RecyclerView}, к которому прикрепляется наш {@link ItemTouchHelper}
             * @param viewHolder {@link RecyclerView.ViewHolder}, для которого запашивается направление свайпа
             * @return Логическое сложение допустимых свайпов (допустимый свайп представляет собой одну из костан группы "Direction Flag")
             */
            @Override
            public int getSwipeDirs(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
                // Порядковый номер элемента, по которому пользователь хочет сделать свайп
                int position = viewHolder.getAdapterPosition();

                // Запретить свайп, если появился красный фон, ожидающий нажатие кнопки Undo
                if (rvAdapter.undoOn && rvAdapter.isPendingRemoval(position)) {
                    return 0;
                }
                return super.getSwipeDirs(recyclerView, viewHolder);
            }

            /**
             * Вызывается когда свайп доведен до конца и палец пользователя убран с экрана.
             * Помещает в очередь на удаление или удаляет элемет списка в зависимости от
             * значения флага {@link ShoppingCartItemRecyclerViewAdapter#undoOn}.
             * @param viewHolder
             * @param swipeDir
             */
            @Override
            public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir) {
                // Порядковый номер элемента, по которому был сделан свайп
                int swipedPosition = viewHolder.getAdapterPosition();
                if (rvAdapter.undoOn) {
                    rvAdapter.pendingRemoval(swipedPosition); // Добавить элемент в список элементов, ожидающих удаление
                } else {
                    rvAdapter.remove(swipedPosition); // Просто удалить элемент
                }
            }

            /**
             * Вызывается для отрисовки всех объектов позади элемента списка, который сдвинули свайпом.
             * Подробнее:
             * <a href="https://developer.android.com/reference/android/support/v7/widget/helper/ItemTouchHelper.Callback.html#onChildDraw(android.graphics.Canvas,%20android.support.v7.widget.RecyclerView,%20android.support.v7.widget.RecyclerView.ViewHolder,%20float,%20float,%20int,%20boolean)"></a>
             *
             * <p>
             * Этот метод так же вызывается, когда элемент сдвинут, палец убран, но список плавно
             * "задвигает" сдвинутый элемент. При этом viewHolder.getAdapterPosition() дает -1.
             * </p>
             *
             * @param c {@link Canvas}, на котором RecyclerView рисует то, что ему скажут
             * @param recyclerView {@link RecyclerView}, к которому прикрепляется наш {@link ItemTouchHelper}
             * @param viewHolder {@link RecyclerView.ViewHolder}, который анимируется из-за действий пользователя, или сам по себе
             * @param dX Величина горизонтального смещения (отностительно "нормальной" позиции элемента), вызванного действием пользователя
             * @param dY Величина вертикального смещения (отностительно "нормальной" позиции элемента), вызванного действием пользователя
             * @param actionState Тип взаимодействия во View. Это может быть ACTION_STATE_DRAG или ACTION_STATE_SWIPE.
             * @param isCurrentlyActive True, когда анимация вызвана дейсвтиями юзера и False, когда анимация работает "сама по себе"
             */
            @Override
            public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
                // View, по которому был сделан свайп
                View itemView = viewHolder.itemView;
                int pos = viewHolder.getLayoutPosition(); // TODO: getAdapterPosition()

                // Этот if сработает, когда элемент сдвинут, палец убран, но список плавно "задвигает" сдвинутый элемент
                if (viewHolder.getAdapterPosition() == -1) {
                    // not interested in those
                    return;
                }

                // Проверка на то, были ли инииализированы графические ресурсы для рисования фона и прочих объектов
                if (!initiated) {
                    init();
                }

                // Вьюха предыдущего элемента (null, если ее абсолютно нет на экране)
                View previousView = recyclerView.getLayoutManager().findViewByPosition(pos-1);
                // Вьюха следующего элемента (null, если ее абсолютно нет на экране)
                View nextView = recyclerView.getLayoutManager().findViewByPosition(pos+1);

                // Получение координат вьюх элементов списка
                int[] nextViewLocation = new int[2]; // Координаты следующей (за свайпнутой) вьюхи
                int[] itemViewLocation = new int[2];  // Координаты свайпнутой вьюхи
                int[] previousViewLocation = new int[2];  // Координаты предыдущей вьюхи
                ViewGroup.MarginLayoutParams lp1 = null; // Инициализация отступов для следующей ...
                ViewGroup.MarginLayoutParams lp2 = null; // ... и предыдущей вьюхи

                if (itemView != null) // Если элемент есть на экране
                    itemView.getLocationInWindow(itemViewLocation); // TODO: Как будет вести себя этот кусок кода, если анимации в процессе, а вьюхи нет на экране. Этого можно досич если во время анимации пролистать список вниз
                if (previousView != null) { // Если предыдущей элемент есть на экране (хотя бы частично)
                    previousView.getLocationInWindow(previousViewLocation); // Получить координаты предыдущего элемента
                    lp2 = (ViewGroup.MarginLayoutParams) previousView.getLayoutParams(); // Получить отступы предыдущего элемента
                }
                if (nextView != null) { // Если следущющий элемент есть на экране (хотя бы частично)
                    nextView.getLocationInWindow(nextViewLocation); // Получить координаты следующего элемента
                    lp1 = (ViewGroup.MarginLayoutParams) nextView.getLayoutParams(); // Получить отступы следующего элемента
                }

                // Вычисления координат высот элеметов
                int cordTop;
                int cordBottom;
                ActionBar ab = ((MainActivity) getActivity()).getSupportActionBar();

                // Вычисление высоты статус бара и action бара
                // TODO: Не зннаю как будет работать для полноэкранного режима. Имеет смысл добавить проверку в if ниже
                int resultStatusBar = 0;
                int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
                if (resourceId > 0) {
                    resultStatusBar = getResources().getDimensionPixelSize(resourceId);
                }
                int barsOffset = resultStatusBar+ab.getHeight(); // Смещение для канвы по оси Y

                if (previousView != null) {
                    cordTop = previousViewLocation[1]+previousView.getHeight()- barsOffset+lp2.topMargin+lp2.bottomMargin;
                    //Log.d( String.valueOf( previousView.getTop() ), String.valueOf( cordTop ));
                } else {
                    cordTop = itemView.getTop();
                }

                if (nextView != null) {
                    //Log.d( String.valueOf( nextView.getTop() ), String.valueOf( nextViewLocation[1] ));
                    //Log.d( "a", "1");
                    cordBottom = nextViewLocation[1] - barsOffset-lp1.topMargin-lp1.bottomMargin;
                } else {
                    //Log.d( "a", "2");
                    cordBottom = itemView.getBottom(); // TODO: Учитывает ли getBottom отступы?
                }

                background.setBounds(itemView.getRight() + (int) dX, cordTop, itemView.getRight(), cordBottom);
                background.draw(c);

                // Рисование иконки удаления
                // Замер элемета, по которому был сдела свайп
                int itemHeight = itemView.getBottom() - itemView.getTop(); // Растояние в пикселях!
                // Замер размеов иконки удаления
                int intrinsicWidth = deleteMark.getIntrinsicWidth(); // Слово "Intrinsic" можно просто отбросить
                int intrinsicHeight = deleteMark.getIntrinsicWidth();

                // Определение позиции икоки на красном фоне
                int xMarkLeft = itemView.getRight() - xMarkMargin - intrinsicWidth;
                int xMarkRight = itemView.getRight() - xMarkMargin;
                int xMarkTop = itemView.getTop() + (itemHeight - intrinsicHeight)/2;
                int xMarkBottom = xMarkTop + intrinsicHeight;

                // Определяет размеры квадратой области за сдвинутым элеметом, где будет нарисован xMark
                deleteMark.setBounds(xMarkLeft, xMarkTop, xMarkRight, xMarkBottom);
                deleteMark.draw(c); // Рисует иконку удаления

                super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
            }
        };
        ItemTouchHelper mItemTouchHelper = new ItemTouchHelper(simpleItemTouchCallback);
        mItemTouchHelper.attachToRecyclerView(recyclerView);
    }

Имейте ввиду, что получить координаты красного фона при помощи getTop() и getBottom() нельзя (по крайней мере, у меня не вышло). Так что я делаю это используя getLocationInWindow()

3) Что бы ответить на этот вопрос нужно понимать, что View, которую вы видите на экране ДО свайпа и ПОСЛЕ - на самом деле одна и та же View. Эта View включает в себя элементы для двух состояний сразу, но по умолчанию видимо только одно состояние - которое присуще View до свайпа. Когда происходит свайп, мы программно скрываем вложенные View для состояния "до свайпа" и отображаем View, которые должны появиться после свайпа (Например, кнопку Undo). Это можно найти в файле ShoppingCartItemRecyclerViewAdapter.java на строке 157. Но лучше показать на картинке внутреннее устройство элемента списка, чем объяснять словами (shopping_cart_item.xml: Кнопка Undo скрыта, т.к. она будет показана только когда все остальные View элемента списка будут иметь видимость GONE Элемент списка глазами пользователя ДО свайпа Чтобы избавить от теней - я просто отключал их в коде:

    /**
     * Задает значения полям, хранящие ссылки на элементы GUI (например, для {@link #recyclerView})
     * @param view UI, которое вернул метод {@link #onCreateView(LayoutInflater, ViewGroup, Bundle)}
     * @param savedInstanceState Если не равно NULL, то фрагмент восстановился из предыдущего
     *                           сохраненного состояния. Этот объект  и есть его предыдущее состояние.
     */
    @Override
    public void onViewCreated (View view, Bundle savedInstanceState) {

        //...

        recyclerView.setItemAnimator(new DefaultItemAnimator() {
            /**
             * Отвечает за анимацию "выдвижения" кнопки Undo (и, возможно, за что-то еще)
             * @param oldHolder Элемент списка, который подвергся изменению
             * @param newHolder Элемент списка, который получился из-за произошедших изменений
             * @param fromX Левый край oldHolder
             * @param fromY Вверхий край oldHolder
             * @param toX Левый край newHolder
             * @param toY Вверхий край newHolder
             * @return True, если позже ожидается (запрашивается) вызов {@link #runPendingAnimations()}, иначе - false
             */
            @Override
            public boolean animateChange(RecyclerView.ViewHolder oldHolder, RecyclerView.ViewHolder newHolder,
                                         int fromX, int fromY, int toX, int toY) {
                // Получение ссылок на элемет CardView в oldHolder и newHolder
                CardView oldHolderCardView = (CardView) oldHolder.itemView.findViewById(R.id.root_card_view);
                CardView newHolderCardView = (CardView) newHolder.itemView.findViewById(R.id.root_card_view);

                // Сохранение старых значение elevation (на свякий случай)
                // СОХРАНЕНИЕ СТАРЫХ ЗНАЧЕНИЙ И ПОСЛЕДУЮЩЕЕ ИХ ИСПОЛЬЗОВАНИЕ ВЕДЕТ ТОМУ, ЧТО ТЕНЬ НЕ БУДЕТ УБИРАТЬСЯ!
                //float oldHolderElevation = oldHolderCardView.getCardElevation();
                //float newHolderElevation = newHolderCardView.getCardElevation();

                // Убираем тень при выдвижении кнопки Undo
                oldHolderCardView.setCardElevation(0);
                newHolderCardView.setCardElevation(0);

                // Запускаем стандартную анимацию
                boolean returnedBool = super.animateChange(oldHolder, newHolder, fromX, fromY, toX, toY);

                // Возвращаем стандартных elevation
                //oldHolderCardView.setCardElevation(oldHolderElevation);
                //newHolderCardView.setCardElevation(newHolderElevation);

                // Возвращем результат стандартной анимации
                return returnedBool;
            }
        });

4) Ответа на этот вопрос у меня пока нет. Даже не знаю где копать. Я надеюсь, что вернусь это к этому вопросу позже и обязательно дополню этот ответ.

1
  • Спасибо. Ну и каковы результаты поисков?
    – user_MGU
    13 сен 2022 в 14:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.