Как создать RecyclerView c передвигаемыми элементами

RecyclerView – это мощный инструмент, который позволяет отображать списки и таблицы на Android-устройствах. Однако, стандартный RecyclerView не предоставляет возможности перетаскивания или перемещения элементов списка.

Как же реализовать такую функциональность? Существует несколько подходов к созданию RecyclerView с передвигаемыми элементами. В данной статье мы рассмотрим один из самых простых и эффективных способов – использование библиотеки ItemTouchHelper.

ItemTouchHelper – это класс из библиотеки поддержки Android, который предоставляет общие методы для реализации действий, связанных с перетаскиванием и свайпом элементов RecyclerView. Благодаря этому классу можно легко добавить поддержку перетаскивания элементов в список и задать пользовательские действия, которые должны происходить при смене позиции элемента.

Что такое RecyclerView

RecyclerView работает с помощью двух основных компонентов: LayoutManager и Adapter. LayoutManager отвечает за размещение элементов списка на экране, в то время как Adapter предоставляет данные для отображения и управляет созданием и повторным использованием представлений списка.

RecyclerView также предоставляет возможность добавления анимаций для плавного отображения изменений в списке и поддерживает передвигаемые элементы, что позволяет пользователям менять порядок элементов списка с помощью перетаскивания.

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

Основные шаги

Шаг 1: Добавьте зависимость RecyclerView в файле build.gradle:

dependencies {   implementation 'androidx.recyclerview:recyclerview:1.2.1'}

Шаг 2: Создайте макет элемента списка с помощью файла XML, определив внутренности элемента (например, изображение и текст).

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal">    <ImageView        android:id="@+id/image"        android:layout_width="50dp"        android:layout_height="50dp" />    <TextView        android:id="@+id/text"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

Шаг 3: Создайте класс ViewHolder, который расширяет RecyclerView.ViewHolder, и определите в нем виджеты, которые будут использоваться в элементе списка.

public class MyViewHolder extends RecyclerView.ViewHolder {    public ImageView imageView;    public TextView textView;    public MyViewHolder(View itemView) {        super(itemView);        imageView = itemView.findViewById(R.id.image);        textView = itemView.findViewById(R.id.text);    }}

Шаг 4: Создайте адаптер, который расширяет RecyclerView.Adapter, и определите в нем методы onCreateViewHolder и onBindViewHolder.

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {    private List<String> mData;    public MyAdapter(List<String> data) {        mData = data;    }    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);        return new MyViewHolder(view);    }    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {        String item = mData.get(position);        holder.textView.setText(item);        // Установите изображение для элемента, если необходимо    }    @Override    public int getItemCount() {        return mData.size();    }}

Подключение библиотеки

Для работы с передвигаемыми элементами в RecyclerView нам потребуется дополнительная библиотека ItemTouchHelper. Для ее подключения укажите следующие зависимости в вашем файле build.gradle (Module: app):

dependencies {implementation 'androidx.recyclerview:recyclerview:1.2.0'implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'implementation 'androidx.recyclerview:recyclerview:1.2.0'implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'implementation 'androidx.recyclerview:recyclerview:1.2.0'implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'implementation 'androidx.recyclerview:recyclerview:1.2.0'implementation 'androidx.recyclerview:recyclerview-selection:1.1.0'}

После добавления зависимостей нужно синхронизировать проект с помощью кнопки «Sync now». После этого вы сможете использовать класс ItemTouchHelper для реализации передвигаемых элементов в RecyclerView.

Создание элемента списка

Для создания элемента списка в RecyclerView необходимо выполнить несколько шагов:

1. Создание разметки элемента списка: В файле разметки элемента списка (обычно это XML-файл) определяется внешний вид элемента списка. Вы можете использовать различные виджеты и компоненты, такие как TextView, ImageView и др., чтобы отображать информацию в элементе списка.
2. Создание класса ViewHolder: Создайте класс, который наследуется от RecyclerView.ViewHolder. Этот класс будет содержать ссылки на виджеты и компоненты элемента списка, а также методы для их инициализации.
3. Реализация адаптера: Создайте класс, который наследуется от RecyclerView.Adapter и параметризуется классом ViewHolder, созданным на предыдущем шаге. В адаптере определяются методы для создания, отображения и управления элементами списка.
4. Инициализация RecyclerView: В разметке активности или фрагмента, где вы хотите отобразить список, разместите элемент RecyclerView для отображения списка и добавьте его в макет. Затем в коде активности или фрагмента создайте объект RecyclerView и настройте его, установив адаптер и менеджер компоновки.

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

Создание адаптера

Для работы с RecyclerView необходимо создать адаптер, который будет отвечать за отображение данных на экране. Адаптер представляет собой промежуточное звено между данными и RecyclerView.

Первым шагом необходимо создать класс, который будет наследоваться от абстрактного класса RecyclerView.Adapter. В этом классе мы определим все необходимые методы для работы с RecyclerView, такие как создание ViewHolder’а и привязка данных к нему.

Создадим класс MyAdapter:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {private List<String> mData;private LayoutInflater mInflater;// Конструкторpublic MyAdapter(Context context, List<String> data) {this.mInflater = LayoutInflater.from(context);this.mData = data;}// Создание нового ViewHolder'а@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = mInflater.inflate(R.layout.item_layout, parent, false);return new ViewHolder(view);}// Привязка данных к ViewHolder'у@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {String item = mData.get(position);holder.textView.setText(item);}// Получение количества элементов@Overridepublic int getItemCount() {return mData.size();}// ViewHolderpublic class ViewHolder extends RecyclerView.ViewHolder {TextView textView;ViewHolder(View itemView) {super(itemView);textView = itemView.findViewById(R.id.textView);}}}

Мы создали адаптер MyAdapter, который наследуется от RecyclerView.Adapter и принимает в конструкторе контекст и список данных для отображения. Затем мы переопределяем несколько методов: onCreateViewHolder, onBindViewHolder и getItemCount.

Метод onCreateViewHolder создает новый ViewHolder, который будет использоваться для отображения элемента списка. Мы используем LayoutInflater для создания View из XML-файла item_layout.

Метод onBindViewHolder связывает данные с ViewHolder’ом. В нашем примере мы берем элемент данных из списка mData по указанной позиции, а затем устанавливаем текст в TextView элемента списка.

Метод getItemCount возвращает количество элементов в списке mData.

Внутри адаптера мы также определяем класс ViewHolder, который представляет собой ссылку на элемент списка. Он содержит ссылку на TextView, в котором будет отображаться данные.

Теперь у нас есть адаптер, который готов к использованию для отображения данных в RecyclerView.

Создание макета

Для создания RecyclerView с передвигаемыми элементами, нам понадобится макет с использованием ConstraintLayout или LinearLayout. Прежде всего, укажем необходимые библиотеки и зависимости в файле build.gradle:

dependencies {implementation 'androidx.recyclerview:recyclerview:1.2.1'implementation 'androidx.constraintlayout:constraintlayout:2.1.0'}

Теперь, создадим макет для RecyclerView с передвигаемыми элементами. Следуя принципам Material Design, рекомендуется использовать ConstraintLayout.

<androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent"app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

В макете мы используем ConstraintLayout как основной контейнер. Внутри него размещаем RecyclerView, устанавливаем ему ширину и высоту «match_parent» и привязываем его к краям родительского контейнера. Также, устанавливаем нужный LayoutManager, который позволяет определить, как будут располагаться элементы в списке (например, LinearLayoutManager).

После создания макета, мы можем приступить к созданию адаптера и модели данных, которые будут использоваться в RecyclerView.

Настройка передвижения

Для обеспечения возможности передвигать элементы в RecyclerView нам понадобится использовать технику перетаскивания элементов. В основе этой техники лежит механизм касания и перемещения пальца по экрану.

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

Сначала нам нужно создать интерфейс, который будет отвечать за обработку событий перемещения элементов. В этом интерфейсе мы определим методы, которые будут вызываться при начале и завершении перемещения элемента:

public interface ItemTouchHelperAdapter {void onItemMove(int fromPosition, int toPosition);void onItemDismiss(int position);}

Затем мы должны создать класс, который будет использоваться для обработки событий перемещения элементов. В этом классе мы определим необходимые методы и логику для перетаскивания элементов:

public class ItemTouchHelperCallback extends ItemTouchHelper.Callback {private final ItemTouchHelperAdapter mAdapter;public ItemTouchHelperCallback(ItemTouchHelperAdapter adapter) {mAdapter = adapter;}@Overridepublic int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END;return makeMovementFlags(dragFlags, swipeFlags);}@Overridepublic boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder,RecyclerView.ViewHolder target) {mAdapter.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());return true;}@Overridepublic void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {mAdapter.onItemDismiss(viewHolder.getAdapterPosition());}}

После этого мы создадим экземпляр класса ItemTouchHelper и присоединим его к RecyclerView. Это позволит обработать события перемещения элементов и вызывать соответствующие методы в адаптере:

ItemTouchHelper.Callback callback = new ItemTouchHelperCallback(adapter);ItemTouchHelper touchHelper = new ItemTouchHelper(callback);touchHelper.attachToRecyclerView(recyclerView);

Теперь наш RecyclerView будет поддерживать перемещение элементов с помощью перетаскивания пальца поперек экрана. Мы успешно настроили возможность передвигать элементы в RecyclerView!

Обработка событий

RecyclerView позволяет обрабатывать различные события, которые происходят с его элементами. Для этого необходимо создать отдельный класс, реализующий интерфейс RecyclerView.OnItemTouchListener.

В этом классе нужно определить методы, которые будут вызываться при возникновении событий касания на элементах RecyclerView. Например, метод onInterceptTouchEvent будет вызываться, когда пользователь касается элемента.

Пример кода:

public class RecyclerItemClickListener implements RecyclerView.OnItemTouchListener {private OnItemClickListener mListener;public interface OnItemClickListener {public void onItemClick(View view, int position);}GestureDetector mGestureDetector;public RecyclerItemClickListener(Context context, OnItemClickListener listener) {mListener = listener;mGestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener() {@Overridepublic boolean onSingleTapUp(MotionEvent e) {return true;}});}@Overridepublic boolean onInterceptTouchEvent(RecyclerView view, MotionEvent e) {View childView = view.findChildViewUnder(e.getX(), e.getY());if (childView != null && mListener != null && mGestureDetector.onTouchEvent(e)) {mListener.onItemClick(childView, view.getChildAdapterPosition(childView));return true;}return false;}@Overridepublic void onTouchEvent(RecyclerView view, MotionEvent motionEvent) {}@Overridepublic void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {}}

В данном примере класс RecyclerItemClickListener реализует интерфейс RecyclerView.OnItemTouchListener и содержит вложенный интерфейс OnItemClickListener. В методе onInterceptTouchEvent определено, что при касании элемента вызывается метод onItemClick из интерфейса OnItemClickListener.

Теперь необходимо присоединить созданный слушатель событий к RecyclerView:

recyclerView.addOnItemTouchListener(new RecyclerItemClickListener(context, new RecyclerItemClickListener.OnItemClickListener() {@Overridepublic void onItemClick(View view, int position) {// обработка события нажатия на элемент}}));

Таким образом, с помощью класса RecyclerItemClickListener можно реализовать обработку различных событий, которые происходят с элементами RecyclerView.