RecyclerView实现多条目布局（行列）

引言

RecyclerView不只能进行单行布局，而且可以通过改变其LayoutManager的方式来进行多行多列布局。今天我们就来实现它！

效果预览

用法

第一步：布局文件（主）

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".blog.Case35">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/green"
        android:gravity="center"
        android:text="Recycler多条目（行列）布局"
        android:textColor="@color/white"
        android:textSize="20sp"
        tools:ignore="MissingConstraints" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>

第二步：新建适配器类

/**
 * @data on 2020/9/27 11:27 AM
 * @auther armstrong
 * @describe Recycler实现多条目布局（行列）
 */
public class RecyclerGridAdapter extends RecyclerView.Adapter<RecyclerGridAdapter.MyViewHolder> {
    private List<String> imgList;
    private List<String> tvList;
    private Context mContext;

    public RecyclerGridAdapter(Context context, List<String> imageList, List<String> tvList) {
        this.mContext = context;
        this.imgList = imageList;
        this.tvList = tvList;
    }

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

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        //加载图片
//        holder.img.setImageResource(imgList.get(position));
        Glide.with(mContext).load(imgList.get(position)).into(holder.img);
        holder.tv.setText(tvList.get(position));
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public ImageView img;
        public TextView tv;
        
        public MyViewHolder(View itemView) {
            super(itemView);
            img = itemView.findViewById(R.id.case35_iv);
            tv = itemView.findViewById(R.id.case35_tv);
        }
    }

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

第三步：布局文件（子）R.layout.case35_hottype_hor

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/case35_iv"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:layout_margin="4dp"
        android:scaleType="centerCrop"
        android:background="@drawable/recycler_iv_bg"
        android:src="@mipmap/guanggao"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/case35_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:text="#广告"
        app:layout_constraintTop_toTopOf="@id/case35_iv"
        app:layout_constraintBottom_toBottomOf="@id/case35_iv"
        app:layout_constraintStart_toStartOf="@+id/case35_iv"
        app:layout_constraintEnd_toEndOf="@id/case35_iv"
        tools:ignore="MissingConstraints,UnknownId" />

</androidx.constraintlayout.widget.ConstraintLayout>

第四步：在Activity中书写逻辑代码

public class Case35 extends AppCompatActivity {
    private GridLayoutManager layoutManager;
    private List<String> imgList;
    private List<String> tvList;
    private RecyclerView recycler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case35);
        initView();
        layoutManager = new GridLayoutManager(this, 2);
        layoutManager.setOrientation(RecyclerView.HORIZONTAL);
        recycler.setLayoutManager(layoutManager);
        recycler.setAdapter(new RecyclerGridAdapter(this, imgList,tvList));
        recycler.setItemAnimator(new DefaultItemAnimator());
    }

    private void initView() {
        recycler = findViewById(R.id.recycler);

        imgList = new ArrayList<>();
        for (int i = 1; i < 5; i++) {
            String url1 = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601266292514&di=95c75c1bdc303eaca8cb525ee5d596fa&imgtype=0&src=http%3A%2F%2Fp.ssl.qhimg.com%2Fbdr%2F__85%2Fd%2F_open360%2Fcar0911%2F10.jpg";
            String url2 = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601266263658&di=ee89e964bc7596340e61e90f835c15e1&imgtype=0&src=http%3A%2F%2Fimg3.bitautoimg.com%2FVideo%2F2016%2F11%2F07%2F2016117152145523.jpg";
            String url3 = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601266292514&di=583cf250b05e57afcbaa5f87d3ef0fc7&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fauto%2Fpics%2Fhv1%2F39%2F154%2F1518%2F98747259.jpg";
            imgList.add(url1);
            imgList.add(url2);
            imgList.add(url3);
        }
        tvList = new ArrayList<>();
        for (int i = 1; i < 5; i++) {
            tvList.add("#广告");
            tvList.add("#剧情");
            tvList.add("#运动");
            tvList.add("#创意");
        }
    }
}

图示