RecyclerView+GridLayout——实现陈列式布局和Item间距的调整

岚梁

已于 2022-11-22 23:19:22 修改

阅读量2.5k

点赞数 4

文章标签： android

于 2022-11-22 23:12:53 首次发布

本文链接：https://blog.csdn.net/weixin_51066525/article/details/127990508

版权

实现类似于小红书的发文和视频布局

一、效果图

效果图如下：

从下图可以看出一行有2个小框，这就是我们所说的陈列式布局。

二、新建一个fragment，在它对应的xml文件中放入一个recyclerView。

我这里使用的是fragment，也可以用activity,但是activity和fragment写的有点不同，具体的不同点可以在CSDN上查找，这里就不阐述了。

我建立的fragment 名称是Travel_video,对应的xml文件叫做fragment_travel_video。需要说明的是我的recyclerView布局高的属性用的是wrap_content，recyclerView的高就会随着内容变化。具体如下：

三、在项目里的layout文件夹新建一个xml文件，用于存放你要展示的item样式。具体如下：

1、命名时需要在名称后面加上.xml，命名之后直接点OK，我建的名称是item_video.xml。

2、写item的时候为了实现最外面圆角边框，所以加入了CardView，使用时最好先加CardView，然后在CardView里面加一个ConstraintLayout，然后ConstraintLayout里面就可以加你想要展示的东西。

<?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:id="@+id/rootView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        app:cardCornerRadius="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView_video"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <ImageView
                    android:id="@+id/imageView11"
                    android:layout_width="180dp"
                    android:layout_height="180dp"
                    app:srcCompat="@drawable/jingqu" />
            </androidx.cardview.widget.CardView>

            <TextView
                android:id="@+id/textView44"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginTop="10dp"
                android:text="六百年腾冲银杏村"
                android:textSize="14sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/cardView_video" />

            <TextView
                android:id="@+id/textView45"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="TextView"
                android:textSize="12sp"
                app:layout_constraintStart_toStartOf="@+id/textView44"
                app:layout_constraintTop_toBottomOf="@+id/textView44" />

            <TextView
                android:id="@+id/textView46"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:text="10"
                app:layout_constraintBottom_toBottomOf="@+id/textView45"
                app:layout_constraintEnd_toEndOf="parent"
                tools:textSize="10sp" />

            <ImageView
                android:id="@+id/imageView30"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginEnd="2dp"
                app:layout_constraintBottom_toBottomOf="@+id/textView46"
                app:layout_constraintEnd_toStartOf="@+id/textView46"
                app:layout_constraintTop_toTopOf="@+id/textView46"
                app:srcCompat="@drawable/aixin" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

四、接下来就开始写fragment里面的内容啦。关于用RecyclerView的具体实现的解释，小伙伴们可以手动CSDN一下，这里就不做解释了，这里主要是介绍一下怎么做RecyclerView的陈列式布局，以及item的间距如何调整。具体如下：

package com.hnucm.gingko_system.Fragment;

import android.content.Context;
import android.content.Intent;
import android.graphics.Rect;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.hnucm.gingko_system.Activity.video_detailsActivity;
import com.hnucm.gingko_system.R;

import java.util.ArrayList;
import java.util.List;

public class Travel_video extends Fragment {
    private View view;
    RecyclerView recyclerView;
    Travel_video.MyAdapter myAdapter;
    private Context context;
    private List<String> videoList;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view=inflater.inflate(R.layout.fragment_travel_video, container, false);
        context =view.getContext();//context是fragment和activity最大的区别(自己总结的，可能有错。。。)
        videoList=new ArrayList<>();
        recyclerView = view.findViewById(R.id.videoRecyclerView);//这里是找到使用的RecyclerView的id
        myAdapter= new Travel_video.MyAdapter(context);
        recyclerView.setAdapter(myAdapter);
        setItemSpace();
        //使用网格布局，并且设置为2列（1行2个），当然也可以设置3、4...,这是实现陈列式布局的关键
        recyclerView.setLayoutManager(new GridLayoutManager(context,2));
        initData();
        return view;
    }

    public void initData(){
        videoList.add("test1");
        videoList.add("test2");
        videoList.add("test3");
        //myAdapter.notifyDataSetChanged();
    }
    public void setItemSpace(){//调整item的上下左右的间距大小
        RecyclerView.ItemDecoration decoration=new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent,
                                       @NonNull RecyclerView.State state) {
                super.getItemOffsets(outRect, view, parent, state);
                if (parent.getChildLayoutPosition(view) %2==0) {
                    //表示1行的第1个（标号从0开始）的左边距设置为50，
                    // 右边距设置为0，顶部和底部间距设置为10
                    outRect.left = 50;
                    outRect.right = 0;
                    outRect.top = 10;
                    outRect.bottom = 10;
                }else{//表示1行的第2个
                    outRect.left = 20;
                    outRect.right = 50;
                    outRect.top = 10;
                    outRect.bottom = 10;
                }
            }
        };
        recyclerView.addItemDecoration(decoration);
    }

    //item复制
    public class MyAdapter extends RecyclerView.Adapter<Travel_video.MyHolder>{
        Context context;

        public MyAdapter(Context context){
            this.context=context;
        }
        //加载并但会布局文件
        @NonNull
        @Override
        public Travel_video.MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            //item_video是item的id，这里需要传入它的id
            View view = LayoutInflater.from(context).inflate(R.layout.item_video,parent,false);
            return new Travel_video.MyHolder(view);
        }

        //填充布局控件
        @Override
        public void onBindViewHolder(@NonNull Travel_video.MyHolder holder, int position) {
            holder.textView1.setText(videoList.get(position));

            holder.rootView1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //这里的点击事件就是点击小框(rootView1)跳转到一个activity——video_detailsActivity
                    Intent intent= new Intent(context, video_detailsActivity.class);
                    startActivity(intent);
                }
            });
        }

        //布局复制次数
        @Override
        public int getItemCount() {
            return videoList.size();
        }
    }

    //控制布局文件的控件
    public class MyHolder extends RecyclerView.ViewHolder{
        //修改item中的text值
        TextView textView1;
        ConstraintLayout rootView1;
        public MyHolder(@NonNull View itemView) {
            super(itemView);
            textView1=itemView.findViewById(R.id.textView45);
            //rootView1是item文件中最外层的约束布局
            rootView1=itemView.findViewById(R.id.rootView1);
        }
    }
}

五、最后：

本篇文章仅供参考，且小梁写的是比较简单的recyclerView的实现，想要实现更多功能可能更加复杂，小伙伴们自己去探索吧。加油小伙伴们！