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

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

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


使用步驟:

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

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

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


第三步:建立兩個item子佈局填充item內容

itemone.xml

<?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>

itemtwo.xml

<?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" />
    </LinearLayout>

</RelativeLayout>

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

package com.ied.recyclerview.entity;

public class Data {
    public static final int TYPE_ONE = 1;//型別1
    public static final int TYPE_TWO = 2;//型別2

    public int type;//item內容 型別

    public int icon;
    public String username;
    public String message;

    public Data(int type, int icon, String username, String message) {
        this.type = type;
        this.icon = icon;
        this.username = username;
        this.message = message;
    }

    public static int getTypeOne() {
        return TYPE_ONE;
    }

    public static int getTypeTwo() {
        return TYPE_TWO;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

第五步:建立自定義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<RecyclerView.ViewHolder>{

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

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

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //選擇型別
        switch (viewType){
            case Data.TYPE_ONE:
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
                return new OneViewHolder(view);
            case Data.TYPE_TWO:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.itemtwo,parent,false);
                return new TwoViewHolder(view);
        }
        return null;
    }

    //繫結
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
   
    }

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

    //item型別
    @Override
    public int getItemViewType(int position) {
        return list.get(position).type;
    }

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

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

    public OnItemClickListener mOnItemClickListener;//第二步:宣告自定義的介面

    //第三步:定義方法並暴露給外面的呼叫者
    public void setOnItemClickListener(OnItemClickListener  listener) {
        this.mOnItemClickListener  = listener;
    }
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    //第一個item型別
    class OneViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        private ImageView ivIcon;
        private TextView tvUsername, tvMessage;
        private Button btnAgree, btnRefuse;
        //private List<Data> list;
        public OneViewHolder(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);
            // 為item及item內部控制元件新增點選事件
            itemView.setOnClickListener(this);
            btnAgree.setOnClickListener(this);
            btnRefuse.setOnClickListener(this);
        }
        @Override
        public void onClick(View v) {
            if (mOnItemClickListener != null) {
                mOnItemClickListener.onItemClick(v, getAdapterPosition());
            }
        }
    }
    
    //第二個item型別
    class TwoViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        private ImageView ivIcon;
        private TextView tvUsername;
        public TwoViewHolder(View itemView) {
            super(itemView);
            ivIcon = itemView.findViewById(R.id.iv_icon);
            tvUsername = itemView.findViewById(R.id.tv_username);
            // 為item新增點選事件
            itemView.setOnClickListener(this);
        }
        @Override
        public void onClick(View v) {
            if (mOnItemClickListener != null) {
                mOnItemClickListener.onItemClick(v, getAdapterPosition());
            }
        }
    }


}

第六步:在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(1,R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(2,R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(1,R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(2,R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
        list.add(new Data(1,R.mipmap.ic_launcher, "username", "讓我們成為好友吧!"));
    }

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

        @Override
        public void onItemClick(View v, int position) {
            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內部控制元件的點選事件!!