如何在RecyclerView中突出显示所选项目

Question

如何在RecyclerView中突出显示所选项目

28

我在我的图像编辑应用程序中使用了RecyclerView来显示缩略图。它的每个项都由一个ImageView（缩略图）和一个textView组成。在我的应用程序中，当点击时，我希望只突出显示当前选择的缩略图。我已经查看了SO上所有相关的帖子，但没有找到更好的解决方案。

我的Adapter类

    public class FiltersAdapter extends RecyclerView.Adapter<FiltersAdapter.ViewHolder> {

    private Context mContext;
    private List<Type> mDataSet;
    private Uri selectedPhoto;

    public enum Type {
        Original,
        Grayscale,
        Sepia,
        Contrast,
        Invert,
        Pixel,
        Sketch,
        Swirl,
        Brightness,
        Vignette
    }

    public FiltersAdapter(Context context, List<Type> dataSet, Uri selectedPhoto) {
        mContext = context;
        mDataSet = dataSet;
        this.selectedPhoto = selectedPhoto;
    }

    @Override
    public FiltersAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.list_item_layout, parent, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(FiltersAdapter.ViewHolder holder, int position) {
        switch (mDataSet.get(position)) {
            case Original:
                holder.image.setImageResource(R.drawable.no_filter);
                break;
            case Grayscale:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new GrayscaleTransformation())
                        .into(holder.image);
                break;
            case Sepia:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new SepiaFilterTransformation(mContext))
                        .into(holder.image);
                break;
            case Contrast:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new ContrastFilterTransformation(mContext, 2.0f))
                        .into(holder.image);
                break;
            case Invert:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new InvertFilterTransformation(mContext))
                        .into(holder.image);
                break;
            case Pixel:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new PixelationFilterTransformation(mContext, 20))
                        .into(holder.image);
                break;
            case Sketch:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new SketchFilterTransformation(mContext))
                        .into(holder.image);
                break;
            case Swirl:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new SwirlFilterTransformation(mContext, 0.5f, 1.0f, new PointF(0.5f, 0.5f)))
                        .into(holder.image);
                break;
            case Brightness:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new BrightnessFilterTransformation(mContext, 0.5f))
                        .into(holder.image);
                break;
            case Vignette:
                Picasso.with(mContext)
                        .load(R.drawable.no_filter)
                        .transform(new VignetteFilterTransformation(mContext, new PointF(0.5f, 0.5f),
                                new float[]{0.0f, 0.0f, 0.0f}, 0f, 0.75f))
                        .into(holder.image);
                break;
            default:
                holder.image.setImageResource(R.drawable.no_filter);
                break;

        }
        holder.title.setText(mDataSet.get(position).name());
    }

    @Override
    public void onViewAttachedToWindow(ViewHolder holder) {
        super.onViewAttachedToWindow(holder);

    }

    @Override
    public int getItemCount() {
        return mDataSet.size();
    }

    @Override
    public int getItemViewType(int position) {
        return position;
    }

    static class ViewHolder extends RecyclerView.ViewHolder {

        public ImageView image;
        public TextView title;

        ViewHolder(View itemView) {
            super(itemView);
            image = (ImageView) itemView.findViewById(R.id.thumbnailImage);
            title = (TextView) itemView.findViewById(R.id.title);
        }


    }
}

片段代码

horizontalFilters = (RecyclerView) mView.findViewById(R.id.rvHorizontal);
    LinearLayoutManager horizontalLayoutManagaer
            = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false);
    horizontalFilters.setLayoutManager(horizontalLayoutManagaer);

    List<Type> dataSet = new ArrayList<>();
    dataSet.add(Type.Original);
    dataSet.add(Type.Grayscale);
    dataSet.add(Type.Sepia);
    dataSet.add(Type.Contrast);
    dataSet.add(Type.Invert);
    dataSet.add(Type.Pixel);
    dataSet.add(Type.Sketch);
    dataSet.add(Type.Swirl);
    dataSet.add(Type.Brightness);
    dataSet.add(Type.Vignette);

    horizontalFilters.setAdapter(new FiltersAdapter(act, dataSet, selectedPhotoUri));

    horizontalFilters.addOnItemTouchListener(new RecyclerClick(act, horizontalFilters, new RecyclerClickListener() {
        @Override
        public void onClick(View view, int position) {
            switch (position){
                case 0:
                    photo.setImageDrawable(drawable);
                    break;
                case 1:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new GrayscaleTransformation())
                            .into(photo);
                    break;
                case 2:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new SepiaFilterTransformation(act))
                            .into(photo);
                    break;
                case 3:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new ContrastFilterTransformation(act, 2.0f))
                            .into(photo);
                    break;
                case 4:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new InvertFilterTransformation(act))
                            .into(photo);
                    break;
                case 5:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new PixelationFilterTransformation(act, 20))
                            .into(photo);
                    break;
                case 6:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new SketchFilterTransformation(act))
                            .into(photo);
                    break;
                case 7:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new SwirlFilterTransformation(act, 0.5f, 1.0f, new PointF(0.5f, 0.5f)))
                            .into(photo);
                    break;
                case 8:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new BrightnessFilterTransformation(act, 0.5f))
                            .into(photo);
                    break;
                case 9:
                    Picasso.with(act)
                            .load(selectedPhotoUri)
                            .transform(new VignetteFilterTransformation(act, new PointF(0.5f, 0.5f),
                                    new float[]{0.0f, 0.0f, 0.0f}, 0f, 0.75f))
                            .into(photo);
                    break;
                default:
                    photo.setImageDrawable(drawable);
                    break;
            }
        }

        @Override
        public void onLongClick(View view, int position) {

        }
    }));
}

- musica

你有任何 clickListener 或其他类似的东西吗？这样你就知道你选择/点击了什么东西？ - Rahul

是的，我使用了自定义的监听器...你想让我添加那段代码吗？ - musica

你能否将“public enum Type”更改为“public class Type”作为模型？ - Rahul

9个回答

13

在RecyclerView项的布局XML文件中，使用背景选择器并将其设置为android:background属性。

background_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:state_selected="true">
        <shape>
            <solid android:color="@color/lightPrimaryColor" />
        </shape>
    </item>

    <item android:state_selected="false">
        <shape>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

recyclerview_item.xml（background_selector设置在android:background属性中）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_selector"
    android:orientation="vertical"
    android:paddingBottom="8dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="8dp">

然后，在您获取“点击”事件的位置，您可以使用View函数将其设置为选中状态。

view.setSelected(true)

您需要实现逻辑以通过存储所选项目的位置来取消选择/选择项目的时间。

- Monu Surana

需要将先前选择的视图存储在全局变量中，并将其设置为false。 - Suchith

6

也许只需要在item的xml文件中，将根元素写为以下代码：android:background="?attr/selectableItemBackground"。

- Aliaksei Pakaliuk

应该是 android:background="?android:attr/selectableItemBackground"。 - joecks

4

创建一个模型CalenderModel名称。

class CalenderModel {
var date: String
var isselected: Boolean
constructor(date: String, isselected: Boolean) {
    this.date = date
    this.isselected = isselected
}
 }

创建一个适配器 CalenderAdapter 名称。

class CalenderAdapter(
internal var activity: Activity,
internal var calenderModelList: ArrayList<CalenderModel>
) : RecyclerView.Adapter<CalenderAdapter.MyViewHolder>() {
var selected_defoult = 0
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
    val itemView: View
    itemView =
        LayoutInflater.from(parent.context).inflate(R.layout.item_calenderdate, 
parent, false)
    return MyViewHolder(itemView)
}

override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
    val list = calenderModelList.get(position)
    holder.date_tv.text = Common.formateDate_calender_date(list.date)
    holder.day_tv.text = Common.formateDate_calender_day(list.date)
    if (position <= 3) {
        if (list.isselected) {
            holder.mLinearLayout.setBackgroundDrawable(
                ContextCompat.getDrawable(
                    activity,
                    R.drawable.selected_calender_background_green
                )
            )
        } else {
            holder.mLinearLayout.setBackgroundDrawable(
                ContextCompat.getDrawable(
                    activity,
                    R.drawable.selected_calender_background_gray
                )
            )
        }
    } else {
        holder.mLinearLayout.setBackgroundDrawable(
            ContextCompat.getDrawable(
                activity,
                R.drawable.selected_calender_background_gray_light
            )
        )
    }

    holder.itemView.setOnClickListener {
        if (position <= 3) {
            calenderModelList.get(selected_defoult).isselected = false
            calenderModelList.get(position).isselected = true
            selected_defoult = position
            notifyDataSetChanged()
        }
    }

   }

 override fun getItemCount(): Int {
    return calenderModelList.size
 }

override fun getItemId(position: Int): Long {
    return position.toLong()
}

override fun getItemViewType(position: Int): Int {
    return position
}


inner class MyViewHolder
internal constructor(itemView: View) : RecyclerView.ViewHolder(itemView) {

    val day_tv: TextView
    val date_tv: TextView
    val mLinearLayout: LinearLayout

    init {
        mLinearLayout = itemView.findViewById(R.id.mLinearLayout)
        day_tv = itemView.findViewById(R.id.day_tv)
        date_tv = itemView.findViewById(R.id.date_tv)

    }
 }


 }

- sarjeet singh

1

所以我们有一个 ViewHolder 类和一个 OnBindViewHolder() 方法在 RecyclerView 中，好的？现在当您点击 RecyclerView 中的项目时，将为该视图从视图持有者类调用 OnClickMethod。现在创建一个整数变量 int previousClickedItemPosition = -1;

现在在 viewHolderClass 的 onClickListener 方法中放置这行代码， previousClickedItemPosition = getAdapterPosition(); 从这里，我们可以获得最近单击的项目的位置。

现在在 OnBindViewHolder() 中设置项目背景的颜色为蓝色。

holder.fileNameTextView.setTextColor(Color.BLUE)

现在在 OnClickListener 中添加这些行：

holder.fileNameTextView.setTextColor(Color.YELLOW);

if(previousClickedItemPosition != getAdapterPosition()) {
notifyDataSetchanged(previousClickedItemPosition );
}

提示是当我们调用notifyDataSetchanged时，onBindViewHolder会被调用。

所以，当您启动RecyclerView时，所有颜色都将是蓝色。当您单击一个项目时，颜色将变为黄色。当您单击下一个项目时，上一个项目的颜色将变为蓝色，当前项目的颜色将为黄色。

- Vijay

0

首先将您的枚举类型更新为类以进行标志操作

public class Type {
    public int type; // 0-Original,1-Grayscale,2-Sepia.... same as enum
    public int selected;
}

现在在适配器中

@Override
public void onBindViewHolder(FiltersAdapter.ViewHolder holder, int position) {
    int typeOfItem = mDataSet.get(position).type
    switch (mDataSet.get(position)) {
        case 0:
            holder.image.setImageResource(R.drawable.no_filter);
            break;
        case 1:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new GrayscaleTransformation())
                    .into(holder.image);
            break;
        case 2:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new SepiaFilterTransformation(mContext))
                    .into(holder.image);
            break;
        case 3:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new ContrastFilterTransformation(mContext, 2.0f))
                    .into(holder.image);
            break;
        case 4:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new InvertFilterTransformation(mContext))
                    .into(holder.image);
            break;
        case 5:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new PixelationFilterTransformation(mContext, 20))
                    .into(holder.image);
            break;
        case 6:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new SketchFilterTransformation(mContext))
                    .into(holder.image);
            break;
        case 7:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new SwirlFilterTransformation(mContext, 0.5f, 1.0f, new PointF(0.5f, 0.5f)))
                    .into(holder.image);
            break;
        case 8:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new BrightnessFilterTransformation(mContext, 0.5f))
                    .into(holder.image);
            break;
        case 9:
            Picasso.with(mContext)
                    .load(R.drawable.no_filter)
                    .transform(new VignetteFilterTransformation(mContext, new PointF(0.5f, 0.5f),
                            new float[]{0.0f, 0.0f, 0.0f}, 0f, 0.75f))
                    .into(holder.image);
            break;
        default:
            holder.image.setImageResource(R.drawable.no_filter);
            break;
    }
    holder.title.setText(mDataSet.get(position).name());
    if(mDataSet.get(position).selected == 0){
        holder.title.setTypeface(null, Typeface.BOLD);
    } else {
        holder.title.setTypeface(null,Typeface.NORMAL);
    }
}

不要在每次点击或选择时更新您的列表，而是在更新后调用适配器的notifydatasetChanged()方法。

- Rahul

0

如果您不想使用 notifyDataSetChanged
由 Kotlin 实现

 override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    adapterOrders = OrdersSendAdapter(this, listOrders)
    recyclerOrders = view.findViewById<RecyclerView>(R.id.recycler_orders)
    recyclerOrders.layoutManager = LinearLayoutManager(activity)
    recyclerOrders.setHasFixedSize(true)
    recyclerOrders.addItemDecoration(DividerItemDecoration(activity, DividerItemDecoration.VERTICAL))
    recyclerOrders.adapter = adapterOrders
  }

/* This method will be call when item of adapter has an event */
fun getListDetail(position: Int, idOrders: String) {
    for (index in 0 until recyclerOrders.childCount) {
         recyclerOrders[index].setBackgroundColor(Color.parseColor("#ffffff"))
    }
    recyclerOrders[position].setBackgroundColor(ContextCompat.getColor(context!!, R.color.color_select))
}

- Infomaster

0

在 Kotlin 中，您可以像一些人已经提到的 Java 一样简单地执行操作。您将此代码放入适配器类中即可。

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    if (position < numItems) {
        // Bind your view here
        holder.itemView.setOnClickListener {
            it.setBackgroundResource(R.color.lightBlue)
        }
    }
}

- Knight Forked

0

android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusableInTouchMode="true"

- Infomaster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amit Bhati · Accepted Answer

只需在bindView中添加以下行

holder.itemView.setBackgroundColor(Color.parseColor("#000000"));

如果你想要突出显示一个已选择的项目，只需像下面这样做：

将其设置为全局变量

int selectedPosition=-1;

在onBindViewHolder方法内-

public void onBindViewHolder(FiltersAdapter.ViewHolder holder, int position) {
if(selectedPosition==position)
  holder.itemView.setBackgroundColor(Color.parseColor("#000000"));
else
  holder.itemView.setBackgroundColor(Color.parseColor("#ffffff"));

holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectedPosition=position;
                notifyDataSetChanged();

            }
        });
}

===========================================================

虽然上述代码按照传统的方法可以正常工作，但这里有一种更新的版本可能会对你有所帮助：

Kotlin-

如果您想要突出显示选定的项目，请按照以下步骤操作：

var selectedPosition = -1; //make it global

在onBindViewHolder内部-

override fun onBindViewHolder(holder: FiltersAdapter.ViewHolder, position: Int) {
            if (selectedPosition == position)
                holder.itemView.setBackgroundColor(Color.parseColor("#000000"))
            else
                holder.itemView.setBackgroundColor(Color.parseColor("#ffffff"))
        }

创建内部类ViewHolder，实现View.OnClickListener接口，并重写onClick函数。

override fun onClick(v: View) {
      when (v.id) {
           R.id.parent-> {
               selectedPosition = adapterPosition;
                        notifyDataSetChanged();
               }
           }
       }

干杯。