1. 程式人生 > >android RecyclerView介面卡實現item+item內部控制元件點選事件

android RecyclerView介面卡實現item+item內部控制元件點選事件

@先看看效果是不是自己想要的吧@


Adapter:自定義一個繼承RecyclerView.Adapter的介面卡,作用:將資料與每一個item繫結

LayoutManager:佈局管理器,確定每一個item的擺放形式,展示和隱藏

        a: LinearLayoutManager :垂直或水平滾動列表樣式顯示Item

        b:GridLayoutManager :網格樣式

        c:StaggeredGridLayoutManager: 分散交錯寬高不等的格子-->瀑布流的效果

使用步驟:

第一步:新增RecyclerView介面卡依賴

    compile 'com.android.support:recyclerview-v7:27.1.1'

第二步:佈局檔案裡使用RecyclerView


第三步:和listView一樣建立item子佈局填充item內容

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#fff">
    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:src="@mipmap/ic_launcher"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:orientation="vertical"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/iv_icon">
        <TextView
            android:id="@+id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="username" />
        <TextView
            android:id="@+id/tv_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="讓我們成為好友吧?" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:paddingRight="5dp"
        android:layout_centerVertical="true">
        <Button
            android:id="@+id/btn_agree"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:text="同意"
            android:textSize="10dp"/>
        <Button
            android:id="@+id/btn_refuse"
            android:layout_width="60dp"
            android:layout_height="40dp"
            android:text="拒絕"
            android:textSize="10dp"/>
    </LinearLayout>
</RelativeLayout>

第四步:定義一個實體類Data,作為Recyclerview的適配型別


第五步:建立自定義MyRecyclerViewAdapter介面卡繼承RecyclerView.Adapter

package com.ied.recyclerview.adapter;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.ied.recyclerview.R;
import com.ied.recyclerview.entity.Data;
import java.util.List;

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> implements View.OnClickListener{

    private List<Data> list;//資料來源
    private Context context;//上下文

    public MyRecyclerViewAdapter(List<Data> list, Context context) {
        this.list = list;
        this.context = context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        return new MyViewHolder(view);
    }

    //繫結
    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        Data data = list.get(position);
        holder.ivIcon.setBackgroundResource(data.getIcon());
        holder.tvUsername.setText(data.getUsername());
        holder.tvMessage.setText(data.getMessage());

        holder.itemView.setTag(position);
        holder.btnAgree.setTag(position);
        holder.btnRefuse.setTag(position);
    }

    //有多少個item?
    @Override
    public int getItemCount() {
        return list.size();
    }

    //建立MyViewHolder繼承RecyclerView.ViewHolder
    public class MyViewHolder extends RecyclerView.ViewHolder{
        private ImageView ivIcon;
        private TextView tvUsername,tvMessage;
        private Button btnAgree,btnRefuse;

        public MyViewHolder(View itemView) {
            super(itemView);

            ivIcon = itemView.findViewById(R.id.iv_icon);
            tvUsername = itemView.findViewById(R.id.tv_username);
            tvMessage = itemView.findViewById(R.id.tv_message);
            btnAgree = itemView.findViewById(R.id.btn_agree);
            btnRefuse = itemView.findViewById(R.id.btn_refuse);

            // 為ItemView新增點選事件
            itemView.setOnClickListener(MyRecyclerViewAdapter.this);
            btnAgree.setOnClickListener(MyRecyclerViewAdapter.this);
            btnRefuse.setOnClickListener(MyRecyclerViewAdapter.this);
        }

    }

    //=======================以下為item中的button控制元件點選事件處理===================================

    //item裡面有多個控制元件可以點選(item+item內部控制元件)
    public enum ViewName {
        ITEM,
        PRACTISE
    }

    //自定義一個回撥介面來實現Click和LongClick事件
    public interface OnItemClickListener  {
        void onItemClick(View v, ViewName viewName, int position);
        void onItemLongClick(View v);
    }

    private OnItemClickListener mOnItemClickListener;//宣告自定義的介面

    //定義方法並傳給外面的使用者
    public void setOnItemClickListener(OnItemClickListener  listener) {
        this.mOnItemClickListener  = listener;
    }

    @Override
    public void onClick(View v) {
        int position = (int) v.getTag();      //getTag()獲取資料
        if (mOnItemClickListener != null) {
            switch (v.getId()){
                case R.id.rv_recyclerView:
                    mOnItemClickListener.onItemClick(v, ViewName.PRACTISE, position);
                    break;
                default:
                    mOnItemClickListener.onItemClick(v, ViewName.ITEM, position);
                    break;
            }
        }
    }
}

第六步:在MainActivity中編寫,初始化資料,設定介面卡

package com.ied.recyclerview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;
import com.ied.recyclerview.adapter.MyRecyclerViewAdapter;
import com.ied.recyclerview.entity.Data;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity  {

    private RecyclerView rvRecyclerView;
    private MyRecyclerViewAdapter adapter;
    private List<Data> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();

        rvRecyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));//控制佈局為LinearLayout或者是GridView或者是瀑布流佈局
        adapter = new MyRecyclerViewAdapter(list,this);
        rvRecyclerView.setAdapter(adapter);
        // 設定item及item中控制元件的點選事件
        adapter.setOnItemClickListener(MyItemClickListener);
    }

    private void initView() {
        rvRecyclerView = (RecyclerView) findViewById(R.id.rv_recyclerView);
    }
    private void initData() {
        list = new ArrayList<>();
        list.add(new Data(R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
    }

    /**
     * item+item裡的控制元件點選監聽事件
     */
    private MyRecyclerViewAdapter.OnItemClickListener MyItemClickListener = new MyRecyclerViewAdapter.OnItemClickListener() {

        @Override
        public void onItemClick(View v, MyRecyclerViewAdapter.ViewName viewName, int position) {
           //viewName可區分item及item內部控制元件
            switch (v.getId()){
                case R.id.btn_agree:
                    Toast.makeText(MainActivity.this,"你點選了同意按鈕"+(position+1),Toast.LENGTH_SHORT).show();
                    break;
                case R.id.btn_refuse:
                    Toast.makeText(MainActivity.this,"你點選了拒絕按鈕"+(position+1),Toast.LENGTH_SHORT).show();
                    break;
                default:
                    Toast.makeText(MainActivity.this,"你點選了item按鈕"+(position+1),Toast.LENGTH_SHORT).show();
                    break;
            }
        }

        @Override
        public void onItemLongClick(View v) {

        }
    };


}

最後成功實現item的點選事件以及item裡控制元件的點選事件!!

(附加:原始碼已實現item+item內部控制元件點選事件+橫向滑動刪除+拖拉移動item位置)