RecyclerViewで選択した項目を正しく強調表示する方法
水平型のRecyclerViewとしてListViewを使用しようとしています。選択した項目を強調表示する方法を見つけようとしています。項目の1つをクリックすると、その項目が選択されて正しく強調表示されますが、別の項目をクリックすると、2番目の項目が古い項目とともに強調表示されます。
これが私のonClick関数です。
@Override
public void onClick(View view) {
if(selectedListItem!=null){
Log.d(TAG, "selectedListItem " + getPosition() + " " + item);
selectedListItem.setBackgroundColor(Color.RED);
}
Log.d(TAG, "onClick " + getPosition() + " " + item);
viewHolderListener.onIndexChanged(getPosition());
selectedPosition = getPosition();
view.setBackgroundColor(Color.CYAN);
selectedListItem = view;
}
これがonBindViewHolderです：
@Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {
viewHolder.setItem(fruitsData[position]);
if(selectedPosition == position)
viewHolder.itemView.setBackgroundColor(Color.CYAN);
else
viewHolder.itemView.setBackgroundColor(Color.RED);
}
私はRecyclerViewで自動的にアイテム選択を処理するための基本アダプタクラスを書きました。アダプタをアダプタから派生させて、リストビューで行うのと同じように、state_selectedを使用して描画可能な状態リストを使用するだけです。
私はそれについて Blog Post Here を持っていますが、ここにコードがあります：
public abstract class TrackSelectionAdapter<VH extends TrackSelectionAdapter.ViewHolder> extends RecyclerView.Adapter<VH> {
// Start with first item selected
private int focusedItem = 0;
@Override
public void onAttachedToRecyclerView(final RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
// Handle key up and key down and attempt to move selection
recyclerView.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
RecyclerView.LayoutManager lm = recyclerView.getLayoutManager();
// Return false if scrolled to the bounds and allow focus to move off the list
if (event.getAction() == KeyEvent.ACTION_DOWN) {
if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
return tryMoveSelection(lm, 1);
} else if (keyCode == KeyEvent.KEYCODE_DPAD_UP) {
return tryMoveSelection(lm, -1);
}
}
return false;
}
});
}
private boolean tryMoveSelection(RecyclerView.LayoutManager lm, int direction) {
int tryFocusItem = focusedItem + direction;
// If still within valid bounds, move the selection, notify to redraw, and scroll
if (tryFocusItem >= 0 && tryFocusItem < getItemCount()) {
notifyItemChanged(focusedItem);
focusedItem = tryFocusItem;
notifyItemChanged(focusedItem);
lm.scrollToPosition(focusedItem);
return true;
}
return false;
}
@Override
public void onBindViewHolder(VH viewHolder, int i) {
// Set selected state; use a state list drawable to style the view
viewHolder.itemView.setSelected(focusedItem == i);
}
public class ViewHolder extends RecyclerView.ViewHolder {
public ViewHolder(View itemView) {
super(itemView);
// Handle item click and set the selection
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Redraw the old selection and the new
notifyItemChanged(focusedItem);
focusedItem = getLayoutPosition();
notifyItemChanged(focusedItem);
}
});
}
}
}
これはとても簡単な方法です。
RecyclerViewアダプタクラスにprivate int selectedPos = RecyclerView.NO_POSITION;を付けて、onBindViewHolderメソッドの下で試してください。
@Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {
viewHolder.itemView.setSelected(selectedPos == position);
}
そしてあなたのOnClickイベントで以下を修正します：
@Override
public void onClick(View view) {
notifyItemChanged(selectedPos);
selectedPos = getLayoutPosition();
notifyItemChanged(selectedPos);
}
Navigationalal Drawerや他のRecyclerViewアイテムアダプタにとって魅力的なように機能します。
注意：colabugなどのセレクタを使用して、レイアウトに必ず背景色を使用してください。
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@color/pressed_color" Android:state_pressed="true"/>
<item Android:drawable="@color/selected_color" Android:state_selected="true"/>
<item Android:drawable="@color/focused_color" Android:state_focused="true"/>
</selector>
そうでなければsetSelected（..）は何もしないでしょう、この解決策を役に立たなくします。
アップデート[2017年7月26日]：
Pawan がその固定位置を使用しないことを警告するIDE警告について述べたように、私はコードを次のように変更しました。以下。クリックリスナーは
ViewHolderに移動し、そこでgetAdapterPosition()メソッドを使って位置を取得しています
int selected_position = 0; // You have to set this globally in the Adapter class
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Item item = items.get(position);
// Here I am just highlighting the background
holder.itemView.setBackgroundColor(selected_position == position ? Color.GREEN : Color.TRANSPARENT);
}
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
public ViewHolder(View itemView) {
super(itemView);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// Below line is just like a safety check, because sometimes holder could be null,
// in that case, getAdapterPosition() will return RecyclerView.NO_POSITION
if (getAdapterPosition() == RecyclerView.NO_POSITION) return;
// Updating old as well as new positions
notifyItemChanged(selected_position);
selected_position = getAdapterPosition();
notifyItemChanged(selected_position);
// Do your another stuff for your onClick
}
}
これが役立つことを願っています。
あなたが実装したものはおそらくあなたがビューの外にコンテンツをスクロールしてからビューに戻った場合にうまくいくでしょう。私はあなたの質問に来たとき私は同様の問題を抱えていました。
次のファイルスニペットは私のために働いています。私の実装は複数選択を目的としていましたが、単一選択を強制するためにそこにハックを投げました。（* 1）
// an array of selected items (Integer indices)
private final ArrayList<Integer> selected = new ArrayList<>();
// items coming into view
@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
// each time an item comes into view, its position is checked
// against "selected" indices
if (!selected.contains(position)){
// view not selected
holder.parent.setBackgroundColor(Color.LTGRAY);
}
else
// view is selected
holder.parent.setBackgroundColor(Color.CYAN);
}
// selecting items
@Override
public boolean onLongClick(View v) {
// set color immediately.
v.setBackgroundColor(Color.CYAN);
// (*1)
// forcing single selection here
if (selected.isEmpty()){
selected.add(position);
}else {
int oldSelected = selected.get(0);
selected.clear();
selected.add(position);
// we do not notify that an item has been selected
// because that work is done here. we instead send
// notifications for items to be deselected
notifyItemChanged(oldSelected);
}
return false;
}
前述のように このリンクされた質問では 、viewHoldersのリスナーの設定はonCreateViewHolderで行われるべきです。私は以前にこれを言及するのを忘れました。
私は、RecyclerViewを必要なすべての基本機能（シングル+マルチセレクション、ハイライト、リップル、マルチセレクションでクリックして削除など）で使用する方法に関する最良のチュートリアルを見つけました。
ここにある - > http://enoent.fr/blog/2015/01/18/recyclerview-basics/
それに基づいて、私はSelectableAdapterを拡張するライブラリ "FlexibleAdapter"を作成することができました。私はこれがアダプタの責任であるに違いないと思います、実際には毎回アダプタの基本的な機能を書き直す必要はありません、それをライブラリに任せてください、そうすれば同じ実装を再利用できます。
このアダプタは非常に高速で、そのまま使用できます（拡張する必要はありません）。必要なビュータイプごとにアイテムをカスタマイズします。 ViewHolderは事前定義されています。一般的なイベントはすでに実装されています。シングルクリックおよびロングクリック。回転後の状態を維持し、ずっと多くのを維持します。
自分のプロジェクトに自由に実装してください。
https://github.com/davideas/F flexibleAdapter
Wikiもあります。
私の解決策を見てください。選択した位置をホルダーに設定してViewのTagとして渡します。ビューはonCreateViewHolder（...）メソッドで設定する必要があります。 OnClickListenerやLongClickListenerなど、ビュー用のリスナーを設定する正しい場所もあります。
以下の例を見て、コードへのコメントを読んでください。
public class MyListAdapter extends RecyclerView.Adapter<MyListAdapter.ViewHolder> {
//Here is current selection position
private int mSelectedPosition = 0;
private OnMyListItemClick mOnMainMenuClickListener = OnMyListItemClick.NULL;
...
// constructor, method which allow to set list yourObjectList
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//here you prepare your view
// inflate it
// set listener for it
final ViewHolder result = new ViewHolder(view);
final View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.your_view_layout, parent, false);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//here you set your current position from holder of clicked view
mSelectedPosition = result.getAdapterPosition();
//here you pass object from your list - item value which you clicked
mOnMainMenuClickListener.onMyListItemClick(yourObjectList.get(mSelectedPosition));
//here you inform view that something was change - view will be invalidated
notifyDataSetChanged();
}
});
return result;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
final YourObject yourObject = yourObjectList.get(position);
holder.bind(yourObject);
if(mSelectedPosition == position)
holder.itemView.setBackgroundColor(Color.CYAN);
else
holder.itemView.setBackgroundColor(Color.RED);
}
// you can create your own listener which you set for adapter
public void setOnMainMenuClickListener(OnMyListItemClick onMyListItemClick) {
mOnMainMenuClickListener = onMyListItemClick == null ? OnMyListItemClick.NULL : onMyListItemClick;
}
static class ViewHolder extends RecyclerView.ViewHolder {
ViewHolder(View view) {
super(view);
}
private void bind(YourObject object){
//bind view with yourObject
}
}
public interface OnMyListItemClick {
OnMyListItemClick NULL = new OnMyListItemClick() {
@Override
public void onMyListItemClick(YourObject item) {
}
};
void onMyListItemClick(YourObject item);
}
}
listViewやGridViewのようなRecyclerViewにはセレクタはありませんが、あなたはそれが私のために働いたものの下に試してみてください
以下のように描画可能なセレクタを作成します
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:state_pressed="true">
<shape>
<solid Android:color="@color/blue" />
</shape>
</item>
<item Android:state_pressed="false">
<shape>
<solid Android:color="@Android:color/transparent" />
</shape>
</item>
</selector>
次に、このdrawableをRecyclerViewの行レイアウトの背景として設定します。
Android:background="@drawable/selector"
これは私の解決策です、あなたはアイテム（またはグループ）を設定し、もう一度クリックすることでそれを選択解除することができます：
private final ArrayList<Integer> seleccionados = new ArrayList<>();
@Override
public void onBindViewHolder(final ViewHolder viewHolder, final int i) {
viewHolder.san.setText(Android_versions.get(i).getAndroid_version_name());
if (!seleccionados.contains(i)){
viewHolder.inside.setCardBackgroundColor(Color.LTGRAY);
}
else {
viewHolder.inside.setCardBackgroundColor(Color.BLUE);
}
viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (seleccionados.contains(i)){
seleccionados.remove(seleccionados.indexOf(i));
viewHolder.inside.setCardBackgroundColor(Color.LTGRAY);
} else {
seleccionados.add(i);
viewHolder.inside.setCardBackgroundColor(Color.BLUE);
}
}
});
}
インタフェースとコールバックによる決定選択状態と選択解除状態のインタフェースを作成します。
public interface ItemTouchHelperViewHolder {
/**
* Called when the {@link ItemTouchHelper} first registers an item as being moved or swiped.
* Implementations should update the item view to indicate it's active state.
*/
void onItemSelected();
/**
* Called when the {@link ItemTouchHelper} has completed the move or swipe, and the active item
* state should be cleared.
*/
void onItemClear();
}
ViewHolderにインターフェースを実装します。
public static class ItemViewHolder extends RecyclerView.ViewHolder implements
ItemTouchHelperViewHolder {
public LinearLayout container;
public PositionCardView content;
public ItemViewHolder(View itemView) {
super(itemView);
container = (LinearLayout) itemView;
content = (PositionCardView) itemView.findViewById(R.id.content);
}
@Override
public void onItemSelected() {
/**
* Here change of item
*/
container.setBackgroundColor(Color.LTGRAY);
}
@Override
public void onItemClear() {
/**
* Here change of item
*/
container.setBackgroundColor(Color.WHITE);
}
}
コールバックで状態変更を実行します。
public class ItemTouchHelperCallback extends ItemTouchHelper.Callback {
private final ItemTouchHelperAdapter mAdapter;
public ItemTouchHelperCallback(ItemTouchHelperAdapter adapter) {
this.mAdapter = adapter;
}
@Override
public boolean isLongPressDragEnabled() {
return true;
}
@Override
public boolean isItemViewSwipeEnabled() {
return true;
}
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
int swipeFlags = ItemTouchHelper.END;
return makeMovementFlags(dragFlags, swipeFlags);
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
...
}
@Override
public void onSwiped(final RecyclerView.ViewHolder viewHolder, int direction) {
...
}
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
if (viewHolder instanceof ItemTouchHelperViewHolder) {
ItemTouchHelperViewHolder itemViewHolder =
(ItemTouchHelperViewHolder) viewHolder;
itemViewHolder.onItemSelected();
}
}
super.onSelectedChanged(viewHolder, actionState);
}
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
super.clearView(recyclerView, viewHolder);
if (viewHolder instanceof ItemTouchHelperViewHolder) {
ItemTouchHelperViewHolder itemViewHolder =
(ItemTouchHelperViewHolder) viewHolder;
itemViewHolder.onItemClear();
}
}
}
コールバックでRecyclerViewを作成します（例）。
mAdapter = new BuyItemsRecyclerListAdapter(MainActivity.this, positionsList, new ArrayList<BuyItem>());
positionsList.setAdapter(mAdapter);
positionsList.setLayoutManager(new LinearLayoutManager(this));
ItemTouchHelper.Callback callback = new ItemTouchHelperCallback(mAdapter);
mItemTouchHelper = new ItemTouchHelper(callback);
mItemTouchHelper.attachToRecyclerView(positionsList);
IPaulProの記事で詳細を参照してください。 https://medium.com/@ipaulpro/drag-and-swipe-with-recyclerview-6a6f0c422efd#.6gh29uaaz
私はこの問題に対するウェブ上で良い解決策を見つけることができず、それを自分で解決しました。この問題に苦しんでいる人はたくさんいます。したがって、私はここで私の解決策を共有したいと思います。
スクロールしている間、行はリサイクルされます。したがって、チェックボックスと強調表示された行は正しく機能しません。以下のアダプタクラスを書くことでこの問題を解決しました。
私はまた完全なプロジェクトを実行します。このプロジェクトでは、複数のチェックボックスを選択できます。選択されたチェックボックスを含む行が強調表示されます。そしてもっと重要なことに、これらはスクロールしている間失われません。リンクからダウンロードできます。
https://www.dropbox.com/jp/ssm58w62gw32i29/recyclerView_checkbox_highlight.zip?dl=0
public class RV_Adapter extends RecyclerView.Adapter<RV_Adapter.ViewHolder> {
public ArrayList<String> list;
boolean[] checkBoxState;
MainActivity mainActivity;
MyFragment myFragment;
View firstview;
private Context context;
FrameLayout framelayout;
public RV_Adapter() {
}
public RV_Adapter(Context context, MyFragment m, ArrayList<String> list ) {
this.list = list;
myFragment = m;
this.context = context;
mainActivity = (MainActivity) context;
checkBoxState = new boolean[list.size()];
// relativeLayoutState = new boolean[list.size()];
}
public class ViewHolder extends RecyclerView.ViewHolder {
public TextView textView;
public CheckBox checkBox;
RelativeLayout relativeLayout;
MainActivity mainActivity;
MyFragment myFragment;
public ViewHolder(View v,MainActivity mainActivity,MyFragment m) {
super(v);
textView = (TextView) v.findViewById(R.id.tv_foodname);
/**/
checkBox= (CheckBox) v.findViewById(R.id.checkBox);
relativeLayout = (RelativeLayout)v.findViewById(R.id.relativelayout);
this.mainActivity = mainActivity;
this.myFragment = m;
framelayout = (FrameLayout) v.findViewById(R.id.framelayout);
framelayout.setOnLongClickListener(m);
}
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
firstview = inflater.inflate(R.layout.row, parent, false);
return new ViewHolder(firstview,mainActivity, myFragment);
}
@Override
public void onBindViewHolder( final ViewHolder holder, final int position) {
holder.textView.setText(list.get(position));
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
// When action mode is active, checkboxes are displayed on each row, handle views(move icons) on each row are disappered.
if(!myFragment.is_in_action_mode)
{
holder.checkBox.setVisibility(View.GONE);
}
else
{
holder.checkBox.setVisibility(View.VISIBLE);
holder.checkBox.setChecked(false);
}
holder.checkBox.setTag(position);
holder.checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(compoundButton.isPressed()) // ekrandan kaybolan checkbox'lar otomatik olarak state degistiriyordu ve bu listener method cagiriliyordu, bunu onlemek icin isPressed() method'u ile kullanici mi basmis diye kontrol ediyorum.
{
int getPosition = (Integer) compoundButton.getTag(); // Here we get the position that we have set for the checkbox using setTag.
checkBoxState[getPosition] = compoundButton.isChecked(); // Set the value of checkbox to maintain its state.
//relativeLayoutState[getPosition] = compoundButton.isChecked();
if(checkBoxState[getPosition] && getPosition == position )
holder.relativeLayout.setBackgroundResource(R.color.food_selected); /** Change background color of the selected items in list view **/
else
holder.relativeLayout.setBackgroundResource(R.color.food_unselected); /** Change background color of the selected items in list view **/
myFragment.prepareselection(compoundButton, getPosition, holder.relativeLayout);
}
}
});
holder.checkBox.setChecked(checkBoxState[position]);
if(checkBoxState[position] )
holder.relativeLayout.setBackgroundResource(R.color.food_selected); /** Change background color of the selected items in list view **/
else
holder.relativeLayout.setBackgroundResource(R.color.food_unselected);
}
@Override
public int getItemCount() {
return list.size();
}
public void updateList(ArrayList<String> newList){
this.list = newList;
checkBoxState = new boolean[list.size()+1];
}
public void resetCheckBoxState(){
checkBoxState = null;
checkBoxState = new boolean[list.size()];
}
}
アプリのスクリーンショット：
私は同じ問題を抱えていて、私はそれを以下の方法で解決します：
CreateViewholder内にRowを作成するために使用しているxmlファイルは、以下の行を追加するだけです。
Android:clickable="true"
Android:focusableInTouchMode="true"
Android:background="?attr/selectableItemBackgroundBorderless"
または、行アイテムの親としてframeLayoutを使用している場合：
Android:clickable="true"
Android:focusableInTouchMode="true"
Android:foreground="?attr/selectableItemBackgroundBorderless"
クリックリスナーで追加したビューホルダー内のJavaコードでは、次のようになります。
@Override
public void onClick(View v) {
//ur other code here
v.setPressed(true);
}
セレクタを作る：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@color/Green_10" Android:state_activated="true" />
<item Android:drawable="@color/Transparent" />
</selector>
リストアイテムのレイアウトの背景として設定する
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:background="@drawable/selector_attentions_list_item"
Android:layout_width="match_parent"
Android:layout_height="64dp">
アダプタで、ビューにOnClickListenerを追加します（onBindメソッド）
@Suppress("UNCHECKED_CAST")
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bindItems(item: T) {
initItemView(itemView, item)
itemView.tag = item
if (isClickable) {
itemView.setOnClickListener(onClickListener)
}
}
}
OnClickイベントでビューをアクティブにします。
fun onItemClicked(view: View){
view.isActivated = true
}