О RecyclerView и выделении элементов
Привет, %username%! В этой статье я хочу рассказать немного о новом виджете в Android SDK — RecyclerView, о реализации выделения элементов и нескольких полезных «рецептах» при работе с ним.
Немного о ViewHolder’ах
Вкратце о RecyclerView
Выделяем элементы
Заключение + Бонус
Полезные ссылки
До выхода в свет Android SDK 5.0 Lollipop для отображения списков и таблиц использовались виджеты ListView и GridView. Общей рекомендацией при работе с этим виджетом было использование паттерна ViewHolder. Суть паттерна заключается в том, что для каждого элемента списка создаётся объект, хранящий ссылки на отдельные вьюхи внутри элемента. Таким образом, приходится выполнять достаточно дорогой вызов findViewById (int) только один раз при создании элемента.Пример типичного ViewHolder’а прямиком из руководств гугла:
static class ViewHolder { TextView text; TextView timestamp; ImageView icon; ProgressBar progress; int position; } Cсылка на такой холдер для каждого элемента сохраняется в корневом layout’е, используя метод setTag (int, Object) (с моей точки зрения тот ещё костыль). Всё вроде здорово, но при отображении больших списков таких вот ViewHolder’ов создаётся достаточно много, что плохо влияет на размер используемой памяти. К выходу Android SDK 5.0 Lollipop разработчиков Google наконец-то озарило, что два вышеперечисленных виджета морально устарели и нужно бы заменить их на нечто более стильное, модное и молодёжное. Было принято решение не переделывать старые виджеты, а написать новый. Так и появился на свет RecyclerView. Так в чём же его отличия, спросите вы? Я приведу вкратце основные, а для более полного их раскрытия советую к ознакомлению вот эту статью на хабре. Итак:
Сам виджет больше не берёт на себя обязанность по размещению элементов. Для этого появились LayoutManager’ы. Паттерн ViewHolder стал обязательным. Причём виджет научился заново использовать уже созданные ViewHolder’ы и удалять уже не используемые (отсюда и название), что благоприятно сказывается на быстродействии и размере используемой памяти. Новый, удобный способ работы с анимацией. Я попробовал его и виджет оставил у меня противоречивые впечатления. С одной стороны, да, здорово, что теперь использование ViewHolder’а является обязательным, работает вроде тоже быстрей, памяти жрёт меньше. С другой стороны, есть проблемы со сложностью и недоделанностью виджета.Что я понимаю под сложностью? Если что-то не работало в ListView (или работало не так как задумано) всегда можно было залезть в исходники, разобраться, в чём ошибка, исправить её, подоткнуть костылей тут и там и всё начинало работать. RecyclerView гораздо сложнее в плане логики работы, мозг сломаешь, пока разберёшься. Я пытался, но забросил, уж слишком много времени и сил для этого нужно.
Вторая проблема — банальное отсутствие функционала, присутствовавшего в ListView и GridView. За примерами далеко ходить не надо — стандартный функционал выделения элементов (дальнейшая тема этой статьи), отступы между элементами. Раньше, чтобы добавить всё это, нужно было написать буквально пару строчек кода, теперь на это уйдут уже десятки строк. Есть анимации, но только для добавления/удаления/редактирования элемента. Если же вы хотите, например, анимировать частичное изменение элемента, то к вам в дверь уже стучится птица обломинго. Виджет не поддерживает анимацию части элемента, и если анимировать элемент извне (из адаптера, например), то лучше этого не делать — подобные манипуляции оставляют элементы виджета (те самые ViewHolder’ы) в неопределённом состоянии, что приводит к совершенно фантастическому поведению вашего списка.
Резюмируя — если у вас в проекте используются старые виджеты и вы не используете анимации, то лучше пока оставить всё как есть и дождаться, когда виджет наполнят отсутствующим функционалом. Если же вы хотите простые анимации и при этом взаимодействие пользователя с виджетом подразумевается простое — попробуйте RecyclerView, вдруг понравиться.
Итак, перейдём к главному — к технической части статьи. Поговорим о том, как выделять элементы в RecyclerView. Сразу оговорюсь — идея реализации почерпнута из замечательной серии статей Билла Филлипса про RecyclerView (ссылки в конце), так что всё нижеследующее можно считать вольным кратким пересказом.В ListView для выделения элементов использовался метод setChoiceMode (int), RecyclerView же понятия не имеет, что элементы могут выделяться, поэтому мы должны научить этому наш адаптер.Схема такая: 
На диаграмме я схематично обозначил связи между объектами. Пунктирные стрелки — ссылки, остальные — вызовы методов. Зелёным я обозначил объекты, которые непосредственно реализуют логику выделения.
Принцип работы получается следующий:
ViewHolderWrapper устанавливает себя в качестве ClickListener’а для корневой вьюхи ViewHolder’а и начинает получать события onClick и onLongClick. В зависимости от реализации он может просто проксировать эти события в HolderClickObservable (ViewHolderClickWrapper), либо, исходя из текущего статуса SelectionHelper’а выделять элемент вызовом setItemSelected (ViewHolder, boolean) (ViewHolderMultiSelectionWrapper). SelectionHelper сохраняет информацию о выделенных элементах и оповещает слушателей (SelectionObserver) об изменении выделения. Слушатель (в нашем случае адаптер) отвечает за визуальное отображение выделения элемента, а также взаимодействия с ним (на диаграмме вызов startActionMode у Activity). В самом адаптере необходимо сделать следующие изменения:1. Создать SelectionHelper и зарегистрировать слушателей (в данном случае сам адаптер, но это может быть и Activity, например)
mSelectionHelper = new SelectionHelper (mHolderTracker);
mSelectionHelper.registerSelectionObserver (this);
2. Обернуть создаваемые ViewHolder’ы во ViewHolderWrapper нужного типа.
@Override
public RecyclerView.ViewHolder onCreateViewHolder (ViewGroup viewGroup, int position)
{
LayoutInflater inflater = LayoutInflater.from (viewGroup.getContext ());
ImageViewHolder holder = new ImageViewHolder (
inflater.inflate (R.layout.gallery_item, viewGroup, false));
return mSelectionHelper.wrapSelectable (holder);
}
Метод wrapSelectable (ViewHolder) у SelectionHelper’а:
public
Checkable view = (Checkable) viewHolder.itemView; view.setChecked (mSelectionHelper.isItemSelected (position)); mHolderTracker.bindHolder (imageViewHolder, position); } Это нужно по причине того, что пока нет другого способа получить от RecyclerView список используемых в настоящий момент ViewHolder’ов. Если не вести их учёт, при необходимости обновить отрисовку выделения у всех выбранных элементов (пользователь закрыл ActionMode, например), SelectionHelper просто не сможет этого сделать. Вьюхи остануться выглядеть выделенными, когда по факту таковыми не будут.Вы спросите — «А почему бы просто не запоминать выделяемые ViewHolder’ы в методе setItemSelected (ViewHolder, boolean)?». Тут как раз сказывается особенность RecyclerView — он использует заново уже созданные ViewHolder’ы.
Выглядит это примерно так:
Открываем приложение. На экране 10 элементов — 10 ViewHolder’ов создано для них. Запускаем ActionMode, начинаем выделять элементы — 1,2,3. Прокручиваем вьюху вниз, видим элементы с 10 по 20. Думаете, что теперь в памяти висит 20 ViewHolder’ов? Как бы ни так! Для части данных RecyclerView создаст новые ViewHolder«ы, а для другой заново использует уже имеющиеся. Причём неизвестно в каком порядке. Теперь если мы прокрутим вьюху обратно вверх, часть из наших 10 ViewHolder’ов будет уничтожена, вместо них будут созданы новые. Оставшаяся часть будет использована заново и совершенно не обязательно для тех же позиций. Отменяем ActionMode. SelectionHelper должен раскидать слушателям уведомления о сменившемся выделении на элементах с указанием ViewHolder’а для каждого элемента, но он уже не владеет актуальными данными, все Holder’ы поменялись! В результате это приведёт к тому, что часть элементов останется отображаться с выделением.И здесь становится очевидным ещё один важный момент — нельзя сохранять строгие ссылки (strong reference) на ViewHolder’ы! Они могут быть удалены из RecyclerView в зависимости от фазы Луны и желания левой пятки Ларри Пейджа. В этом случае, если мы будем хранить строгие ссылки на них, случится утечка памяти. Поэтому для хранения ссылок в ViewHolderWrapper и WeakHolderTracker используются только WeakReference.
private abstract class ViewHolderWrapper implements android.view.View.OnClickListener
{
protected final WeakReference
protected ViewHolderWrapper (RecyclerView.ViewHolder holder)
{
mWrappedHolderRef = new WeakReference<>(holder);
}
}
WeakHolderTracker
public class WeakHolderTracker
{
private final SparseArray
public void bindHolder (RecyclerView.ViewHolder holder, int position) { mHoldersByPosition.put (position, new WeakReference<>(holder)); }
@Nullable
private RecyclerView.ViewHolder getHolder (int position)
{
WeakReference
RecyclerView.ViewHolder holder = holderRef.get (); if (holder == null || (holder.getAdapterPosition () != position && holder.getAdapterPosition () != RecyclerView.NO_POSITION)) { mHoldersByPosition.remove (position); return null; }
return holder; }
public List
for (int i = 0; i < mHoldersByPosition.size(); i++) { int key = mHoldersByPosition.keyAt(i); RecyclerView.ViewHolder holder = getHolder(key);
if (holder!= null) { holders.add (holder); } }
return holders; } } 4. Также важно не забыть в onBindViewHolder (ViewHolder, int) визуально отобразить выделение если оно есть (если нет — не забыть убрать!). Вы же помните, что для не выделенного элемента может быть использован ViewHolder, ранее использовавшийся для не выделенного и наоборот? У меня это реализовано следующим образом:4.1. SelectableRecyclerViewAdapter.onBindViewHolder (ViewHolder, int)
Checkable view = (Checkable) viewHolder.itemView;
view.setChecked (mSelectionHelper.isItemSelected (position));
4.2. layout-файл для элемента
4.3. Виджет CheckableAutofitHeightFrameLayout public class CheckableAutofitHeightFrameLayout extends FrameLayout implements Checkable { private static final int[] CHECKED_STATE_SET = {android.R.attr.state_checked};
private boolean mIsChecked; private boolean mIsCheckable;
public CheckableAutofitHeightFrameLayout (Context context) { super (context); }
public CheckableAutofitHeightFrameLayout (Context context, AttributeSet attrs) { super (context, attrs); }
public CheckableAutofitHeightFrameLayout (Context context, AttributeSet attrs, int defStyleAttr) { super (context, attrs, defStyleAttr); }
@TargetApi (Build.VERSION_CODES.LOLLIPOP) public CheckableAutofitHeightFrameLayout (Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super (context, attrs, defStyleAttr, defStyleRes); }
@Override protected int[] onCreateDrawableState (int extraSpace) { final int[] drawableState = super.onCreateDrawableState (extraSpace + 1); if (isChecked ()) { mergeDrawableStates (drawableState, CHECKED_STATE_SET); } return drawableState; }
@Override public boolean isCheckable () { return mIsCheckable; }
@Override public void setCheckable (boolean isCheckable) { boolean wasCheckable = isCheckable (); mIsCheckable = isCheckable; if (! isCheckable && isChecked ()) { setChecked (false); } else if (wasCheckable ^ mIsCheckable) { refreshDrawableState (); }
}
@Override public void setChecked (boolean isChecked) { boolean wasChecked = isChecked (); mIsChecked = isCheckable () && isChecked;
if (wasChecked ^ mIsChecked) { refreshDrawableState (); } }
@Override public boolean isChecked () { return mIsChecked; }
@Override public void toggle () { setChecked (! mIsChecked); }
@Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)
{
//noinspection SuspiciousNameCombination
super.onMeasure (widthMeasureSpec, widthMeasureSpec);
}
}
CheckableAutofitHeightFrameLayout добавляет к FrameLayout всего 2 вещи: во-первых, он всегда квадратный (смотри onMeasure (int, int)) и, во-вторых, добавляет к DrawableStates (те самые, которые используются в xml) состояние state_checked. В результате, для отображения выделения у такого layout’а можно использовать StateListDrawable на вроде этого:
и все детали отображения уползают в xml-ки, в Java только нужно установить соответствующие состояния.5. Передать событие onSelectableChanged (boolean) в Activity и запустить ActionMode:
В Адаптере
@Override public void onSelectableChanged (boolean isSelectable) { if (isSelectable) { mActivity.startActionMode (); } } Запуск ActionMode в Activity public class GalleryActivity extends Activity { private final ActionModeCallback mActionModeCallback = new ActionModeCallback ();
private SelectableRecyclerViewAdapter mAdapter;
@Override protected void onCreate (Bundle savedInstanceState) { super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);
RecyclerView recyclerView = (RecyclerView) findViewById (R.id.gallery);
int columnWidth = getResources ().getDimensionPixelSize (R.dimen.column_width);
int vSpacing = getResources ().getDimensionPixelSize (R.dimen.grid_spacing_vertical);
int hSpacing = getResources ().getDimensionPixelSize (R.dimen.grid_spacing_horizontal);
recyclerView.setLayoutManager (new GridAutofitLayoutManager (this, columnWidth));
recyclerView.addItemDecoration (new GridSimpleSpacingDecoration (hSpacing, vSpacing));
DataSet
public void startActionMode () { startActionMode (mActionModeCallback); }
private class ActionModeCallback implements ActionMode.Callback, SelectionObserver { private ActionMode mActionMode;
@Override public boolean onPrepareActionMode (ActionMode actionMode, Menu menu) { return false; }
@Override public void onDestroyActionMode (ActionMode actionMode) { SelectionHelper selectionHelper = mAdapter.getSelectionHelper (); selectionHelper.unregisterSelectionObserver (this); mActionMode = null; selectionHelper.setSelectable (false); }
@Override public boolean onCreateActionMode (ActionMode actionMode, Menu menu) { mActionMode = actionMode; mActionMode.getMenuInflater ().inflate (R.menu.gallery_selection, menu); mAdapter.getSelectionHelper ().registerSelectionObserver (this); return true; }
@Override public boolean onActionItemClicked (ActionMode actionMode, MenuItem menuItem) { switch (menuItem.getItemId ()) { case R.id.menu_toast: Toast.makeText (GalleryActivity.this, R.string.text_simple_toast, Toast.LENGTH_SHORT).show (); break; } return true; }
@Override public void onSelectedChanged (RecyclerView.ViewHolder holder, boolean isSelected) { if (mActionMode!= null) { int checkedImagesCount = mAdapter.getSelectionHelper ().getSelectedItemsCount (); mActionMode.setTitle (String.valueOf (checkedImagesCount)); } }
@Override public void onSelectableChanged (boolean isSelectable) { if (! isSelectable) { mActionMode.finish (); } } } } Как вы видите, при запуске ActionMode, она регистрирует себя как SelectionObserver. Таким образом, можно обновлять количество выделенных элементов в заголовке. Не забудьте вызвать unregisterSelectionObserver (SelectionObserver) при закрытии! Кажется, с выделением разобрались. Весь исходный код также можно посмотреть на GitHub.В заключение вкратце приведу ещё несколько фишек для работы с RecyclerView, которые вы можете найти в примере.
1. Если не нужно выделять элементы, а нужно просто обрабатывать нажатия, вместо ViewHolderMultiSelectionWrapper оборачивайте элементы в ViewHolderClickWrapper методом wrapClickable (ViewHolder). Сам адаптер в таком случае будет выглядеть примерно так:
Скрытый текст
public class SelectableRecyclerViewAdapter extends RecyclerView.Adapter
public SelectableRecyclerViewAdapter () { mSelectionHelper = new SelectionHelper (); mSelectionHelper.registerSelectionObserver (this); }
public SelectionHelper getSelectionHelper () { return mSelectionHelper; }
@Override public RecyclerView.ViewHolder onCreateViewHolder (ViewGroup viewGroup, int position) { LayoutInflater inflater = LayoutInflater.from (viewGroup.getContext ()); ImageViewHolder holder = new ImageViewHolder ( inflater.inflate (R.layout.gallery_item, viewGroup, false)); return mSelectionHelper.wrapClickable (holder); }
@Override public void onHolderClick (RecyclerView.ViewHolder holder) { // perform item click }
@Override public boolean onHolderLongClick (RecyclerView.ViewHolder holder) { // perform item long click return false; }
//… } 2. GridLayoutManager не умеет автоматически подбирать количество столбцов в зависимости от ширины контента. Я добавил этот функционал в GridAutofitLayoutManager public class GridAutofitLayoutManager extends GridLayoutManager { private int mColumnWidth; private boolean mColumnWidthChanged = true;
public GridAutofitLayoutManager (Context context, int columnWidth) { /* Initially set spanCount to 1, will be changed automatically later. */ super (context, 1); setColumnWidth (checkedColumnWidth (context, columnWidth)); }
public GridAutofitLayoutManager (Context context, int columnWidth, int orientation, boolean reverseLayout) { /* Initially set spanCount to 1, will be changed automatically later. */ super (context, 1, orientation, reverseLayout); setColumnWidth (checkedColumnWidth (context, columnWidth)); }
private int checkedColumnWidth (Context context, int columnWidth) { if (columnWidth <= 0) { context.getResources().getDimensionPixelSize(R.dimen.rv_def_column_width); } return columnWidth; }
public void setColumnWidth (int newColumnWidth) { if (newColumnWidth > 0 && newColumnWidth!= mColumnWidth) { mColumnWidth = newColumnWidth; mColumnWidthChanged = true; } }
/* I don’t actually remember why I choose to set span count in onLayoutChildren, I wrote this class some time ago. But the point is we need to do so after view get measured, so we can get its height and width. */ @Override public void onLayoutChildren (RecyclerView.Recycler recycler, RecyclerView.State state) { if (mColumnWidthChanged && mColumnWidth > 0) { int totalSpace; if (getOrientation () == VERTICAL) { totalSpace = getWidth () — getPaddingRight () — getPaddingLeft (); } else { totalSpace = getHeight () — getPaddingTop () — getPaddingBottom (); } int spanCount = Math.max (1, totalSpace / mColumnWidth); setSpanCount (spanCount); mColumnWidthChanged = false; } super.onLayoutChildren (recycler, state); } } Виджет подбирает ширину столбцов в зависимости от параметра columnWidth. Важный момент: если доступная ширина 330 пикселей, а мы передадим желаемую ширину 100, в итоге в таблице будет 3 столбца по 110 пикселей и элементы будут этой ширины. Именно поэтому я также сделал CheckableAutofitHeightFrameLayout автоматически изменяющим свою высоту в зависимости от ширины.3. Для добавления отступов между элементами можно выставить paddingTop/Left у RecyclerView и marginRight/Bottom у элементов, однако это выглядит как костыль. Рекомендуемым способом является добавление ItemDecoration к RecyclerView. В примере можно найти несколько. Для добавления отступов к обычному GridLayoutManager (под «обычным» я имею ввиду GridLayoutManager со стандартным SpanSizeLookup, в нём каждый элемент занимает 1 span) можно использовать
GridSimpleSpacingDecoration public class GalleryActivity extends Activity { private final ActionModeCallback mActionModeCallback = new ActionModeCallback ();
private SelectableRecyclerViewAdapter mAdapter;
@Override protected void onCreate (Bundle savedInstanceState) { super.onCreate (savedInstanceState); setContentView (R.layout.activity_main);
RecyclerView recyclerView = (RecyclerView) findViewById (R.id.gallery);
int columnWidth = getResources ().getDimensionPixelSize (R.dimen.column_width);
int vSpacing = getResources ().getDimensionPixelSize (R.dimen.grid_spacing_vertical);
int hSpacing = getResources ().getDimensionPixelSize (R.dimen.grid_spacing_horizontal);
recyclerView.setLayoutManager (new GridAutofitLayoutManager (this, columnWidth));
recyclerView.addItemDecoration (new GridSimpleSpacingDecoration (hSpacing, vSpacing));
DataSet
