RecyclerView——实现短视频布局

不积跬步，无以至千里；不积小流，无以成江海。要沉下心来，诗和远方的路费真的很贵！

RecyclerView——实现短视频布局

加入依赖

• 在build.gradle(Module)中加入依赖

implementation 'de.hdodenhof:circleimageview:2.1.0'//圆形图片
compile 'com.github.bumptech.glide:glide:3.7.0'//glide框架

加入资源

• 在res文件下的drawable目录下加入图片数据
  
  
  
  

创建item布局

• item_list.xml

<?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="wrap_content">

    <ImageView
        android:id="@+id/iv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="220dp"
        android:minHeight="160dp"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/content_01" />

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textColor="@color/black"
        android:textSize="13dp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/iv_content"
        tools:text="尝试一下RecyclerView" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iv_head"
        android:layout_width="18dp"
        android:layout_height="18dp"
        android:layout_marginTop="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_content" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:textSize="11dp"
        app:layout_constraintStart_toEndOf="@+id/iv_head"
        app:layout_constraintTop_toTopOf="@+id/iv_head"
        tools:text="胖个30斤" />

</androidx.constraintlayout.widget.ConstraintLayout>

创建总体布局

• activity_main.xml

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

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        <!-- "teal_200"   #FF03DAC5 -->
        android:background="@color/teal_200"
        android:gravity="center"
        android:text="RecyclerView的短视频布局"
        android:textColor="@color/white"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rcv_Java"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title" />

</androidx.constraintlayout.widget.ConstraintLayout>

创建item实体类

• MyBean

package com.example.myapplication.bean;

//item实体类
public class MyBean {
    
    
     private int content;
     private String sign;
     private int head;
     private String name;

    public int getContent() {
    
    
        return content;
    }

    public void setContent(int content) {
    
    
        this.content = content;
    }

    public String getSign() {
    
    
        return sign;
    }

    public void setSign(String sign) {
    
    
        this.sign = sign;
    }

    public int getHead() {
    
    
        return head;
    }

    public void setHead(int head) {
    
    
        this.head = head;
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }
}

创建工具类

• TCUtils

package com.example.myapplication;

import android.content.Context;
import android.util.TypedValue;

public class TCUtils {
    
    
    //将单位dp2px转换为整数单位
    public static int dp2pxConvertInt(Context context, float dpValue) {
    
    
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
    }
}

总体逻辑类

• MainActivity

package com.example.myapplication;

import android.graphics.Rect;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import com.example.myapplication.bean.MyBean;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    
    
    RecyclerView rcv_Java;
    List<MyBean> list = new ArrayList<>();
    MyAdapter myAdapter;

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

        rcv_Java = findViewById(R.id.rcv_Java);
        myAdapter = new MyAdapter();
        rcv_Java.setAdapter(myAdapter);
        //布局样式
        rcv_Java.addItemDecoration(new GridItemDecoration());
        GridLayoutManager lm = new GridLayoutManager(this,2);
        rcv_Java.setLayoutManager(lm);
    }

    @Override
    protected void onResume() {
    
    
        super.onResume();
        //构造数据
        for (int i = 0; i < 10; i++) {
    
    
            MyBean myBean = new MyBean();
            if (i % 2 == 0) {
    
    
                myBean.setContent(R.drawable.content_01);
                myBean.setName("这是一个名字" + i);
                myBean.setSign("这是一个标签" + i);
                myBean.setHead(R.drawable.head_01);
            } else {
    
    
                myBean.setContent(R.drawable.content_02);
                myBean.setName("这是一个名字" + i);
                myBean.setSign("这是一个标签" + i);
                myBean.setHead(R.drawable.head_02);
            }
            list.add(myBean);
        }
    }

    public class MyAdapter extends RecyclerView.Adapter<MyViewHolder>{
    
    
        //创建ViewHolder
        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    
    
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_list , parent , false);
            MyViewHolder viewHolder = new MyViewHolder(view);
            return viewHolder;
        }

        //绑定ViewHolder
        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
    
    
            MyBean myBean = list.get(position);
            holder.tv_content.setText(myBean.getSign());
            holder.tv_name.setText(myBean.getName());
            Glide.with(getBaseContext())
                    .load(myBean.getContent())
                    .into(holder.iv_content);
            Glide.with(MainActivity.this)
                    .load(myBean.getHead())
                    .into(holder.iv_head);
        }

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

    //item布局缓存加载
    class MyViewHolder extends RecyclerView.ViewHolder {
    
    
        ImageView iv_content;
        TextView tv_content;
        ImageView iv_head;
        TextView tv_name;

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

            iv_content = itemView.findViewById(R.id.iv_content);
            tv_content = itemView.findViewById(R.id.tv_content);
            iv_head = itemView.findViewById(R.id.iv_head);
            tv_name = itemView.findViewById(R.id.tv_name);
        }
    }

    //边距设置
    class GridItemDecoration extends RecyclerView.ItemDecoration {
    
    

        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    
    
            //得到position
            int itemPosition = parent.getItemDecorationCount();
            //没有数据
            if (itemPosition < 0) {
    
    
                return ;
            }
            //定义基数
            int line = TCUtils.dp2pxConvertInt(view.getContext(), 4f);
            //通过column判断左右
            int column = itemPosition % 2;
            int left = 0;
            int right = 0;
            //左边
            if (column == 0) {
    
    
                left = line * 2;
                right = line;
            } else {
    
    
                //右边
                left = line;
                right = line * 2;
            }
            outRect.set(left, line, right, line * 2);
        }
    }
}

实现效果