RecyclerView添加点击事件与效果

为RecyclerView添加点击事件与效果

RycyclerView的实现并不包含点击事件和效果, 所以需要自己另外实现。

---

点击事件

原理

1. 自定义接口OnRecyclerViewItemClickListener
2. 在Holder中,为itemView设置View的点击监听
3. 为Holder传入OnRecyclerViewItemClickListener
4. Holder实现View.OnClickListener,并在onClick调用OnRecyclerViewItemClickListener.onItemClick

代码

OnRecyclerViewItemClickListener:

• *自定义接口OnRecyclerViewItemClickListener*

  public interface OnRecyclerViewItemClickListener {
      void onItemClick(View view ,int position);
  }
  

Holder:

• 为itemView设置View的View.OnClickListener

• 实现View.OnClickListener，并在onClick调用OnRecyclerViewItemClickListener.onItemClick

  public static class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {
  
          private OnRecyclerViewItemClickListener onRecyclerViewItemClickListener;
  
          public Holder(View itemView,OnRecyclerViewItemClickListener onRecyclerViewItemClickListener) {
              super(itemView);
              itemView.setOnClickListener(this);
          }
  
          @Override
          public void onClick(View v) {
              if (onRecyclerViewItemClickListener != null){
                  onRecyclerViewItemClickListener.onItemClick(v,getAdapterPosition());
              }
          }
  }
  

RecycleAdapter:

• 为Holder传入OnRecyclerViewItemClickListener

  public class RecycleAdapter extends RecyclerView.Adapter<RecycleAdapter.Holder> {
      //...
      @Override
      public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
          View view = LayoutInflater.from(context).inflate(R.layout.list_item, null);
          TypedValue typedValue = new TypedValue();
          context.getTheme().resolveAttribute(R.attr.selectableItemBackground, typedValue, true);
          view.setBackgroundResource(typedValue.resourceId);
          Holder holder = new Holder(view,mOnItemClickListener);
          return holder;
      }
      public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
          this.mOnItemClickListener = listener;
      }
  }
  

• 实现OnRecyclerViewItemClickListener,并将此实现传入RecycleAdapter

  recycleAdapter.setOnItemClickListener(new RecycleAdapter.OnRecyclerViewItemClickListener() {
      @Override
      public void onItemClick(View view, int position) {
  
      }
  });
  

收工

自此,点击itemView,将会回调接口OnRecyclerViewItemClickListener。

• 与Listview不同的是,设置OnRecyclerViewItemClickListener监听器的是Adapter，而不是RecyclerView.

点击效果

Google并为给RecyclerView设置点击效果，所以需要自己实现.

代码

• *在创建Holder的itemView时，设置一个与主题相关的TypedValue*

  public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
      View view = LayoutInflater.from(context).inflate(R.layout.list_item, null);
      TypedValue typedValue = new TypedValue();
      context.getTheme().resolveAttribute(R.attr.selectableItemBackground, typedValue, true);
      view.setBackgroundResource(typedValue.resourceId);
      Holder holder = new Holder(view,mOnItemClickListener);
      return holder;
  }
  

• itemView的layout:第一版

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:padding="10dp"
      >
  
          <ImageView
              android:id="@+id/item_icon"
              android:layout_width="35dp"
              android:layout_height="35dp"
              android:layout_centerVertical="true"
              android:src="@mipmap/ic_launcher"
              />
  
          <View
              android:id="@+id/item_devide_ver"
              android:layout_width="1px"
              android:layout_height="30dp"
              android:layout_centerVertical="true"
              android:layout_marginLeft="5dp"
              android:layout_toRightOf="@id/item_icon"
              android:background="#323232"
              android:visibility="gone"
              />
  
          <TextView
              android:id="@+id/item_appname"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignTop="@id/item_icon"
              android:layout_marginLeft="10dp"
              android:layout_toRightOf="@+id/item_devide_ver"
              android:text="demo"
              android:textSize="15sp"
              />
  
          <TextView
              android:id="@+id/item_codeSize"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@id/item_appname"
              android:layout_marginLeft="10dp"
              android:layout_toRightOf="@+id/item_devide_ver"
              android:text="正在计算..."
              android:textColor="#9f9f9f"
              android:textSize="13sp"
              />
  
  </RelativeLayout>
  

这个看似正常的版本，还有点小问题：点击效果只能覆盖一部分，而不是整个布局

• itemView的layout:第二版

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:padding="10dp"
      >
  
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
          >
  
          <ImageView
              android:id="@+id/item_icon"
              android:layout_width="35dp"
              android:layout_height="35dp"
              android:layout_centerVertical="true"
              android:src="@mipmap/ic_launcher"
              />
  
          <View
              android:id="@+id/item_devide_ver"
              android:layout_width="1px"
              android:layout_height="30dp"
              android:layout_centerVertical="true"
              android:layout_marginLeft="5dp"
              android:layout_toRightOf="@id/item_icon"
              android:background="#323232"
              android:visibility="gone"
              />
  
          <TextView
              android:id="@+id/item_appname"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignTop="@id/item_icon"
              android:layout_marginLeft="10dp"
              android:layout_toRightOf="@+id/item_devide_ver"
              android:text="demo"
              android:textSize="15sp"
              />
  
          <TextView
              android:id="@+id/item_codeSize"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_below="@id/item_appname"
              android:layout_marginLeft="10dp"
              android:layout_toRightOf="@+id/item_devide_ver"
              android:text="正在计算..."
              android:textColor="#9f9f9f"
              android:textSize="13sp"
              />
  
      </RelativeLayout>
  

在根布局中,再套一个Layout将所有的view包起来, 最终达到想要的点击效果.