Flexbox+ReclyclerView实现流式布局

本文实例为大家分享了flexbox+reclyclerview实现流式布局的具体代码，供大家参考，具体内容如下

效果：

module build.gradle引入

implementation 'com.google.android.flexbox:flexbox:3.0.0'

布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.recyclerview
        android:id="@+id/rv_flexbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</linearlayout>

mainactivity

package com.example.myapplication;

import androidx.appcompat.app.appcompatactivity;
import androidx.recyclerview.widget.recyclerview;

import android.os.bundle;
import android.util.log;
import android.view.view;

import com.google.android.flexbox.flexdirection;
import com.google.android.flexbox.flexwrap;
import com.google.android.flexbox.flexboxlayoutmanager;
import com.google.android.flexbox.justifycontent;

import java.util.arraylist;
import java.util.list;

public class mainactivity extends appcompatactivity {

    private recyclerview rv_flexbox;
    private list<string> list_data;
    private flexboxadapter fadapter;

    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);

        rv_flexbox = (recyclerview)findviewbyid(r.id.rv_flexbox);
        flexboxlayoutmanager flexboxlayoutmanager = new flexboxlayoutmanager(this);
        //flexdirection 属性决定主轴的方向（即项目的排列方向）。类似 linearlayout 的 vertical 和 horizontal。
        flexboxlayoutmanager.setflexdirection(flexdirection.row);//主轴为水平方向，起点在左端。
        //flexwrap 默认情况下 flex 跟 linearlayout 一样，都是不带换行排列的，但是flexwrap属性可以支持换行排列。
//        flexboxlayoutmanager.setflexwrap(flexwrap.wrap);//按正常方向换行
        //justifycontent 属性定义了项目在主轴上的对齐方式。
//        flexboxlayoutmanager.setjustifycontent(justifycontent.flex_start);//交叉轴的起点对齐。
        rv_flexbox.setlayoutmanager(flexboxlayoutmanager);

        list_data = new arraylist<>();
        list_data.add("小米手机");
        list_data.add("平衡車");
        list_data.add("无人机");
        list_data.add("神舟笔记本电脑");
        list_data.add("小鹏汽车");
        list_data.add("特斯拉");
        fadapter = new flexboxadapter(this,list_data);
//        fadapter.notifydatasetchanged();
        rv_flexbox.setadapter(fadapter);

        fadapter.setonitemclicklitener(new flexboxadapter.onitemclicklitener() {
            @override
            public void onitemclick(view view, int positon) {
                log.e("wy", "position: "+positon+"  data:" + list_data.get(positon));
            }
        });
    }
}

flexboxadapter

package com.example.myapplication;

import android.content.context;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.textview;

import androidx.annotation.nonnull;
import androidx.recyclerview.widget.recyclerview;

import java.util.list;

public class flexboxadapter extends recyclerview.adapter<flexboxadapter.myholder> {

    private context mcontext;
    private list<string> list_data;
    private layoutinflater inflater;

    public flexboxadapter(context mcontext, list<string> list_data) {
        this.mcontext = mcontext;
        this.list_data = list_data;
        this.inflater = layoutinflater.from(mcontext);
    }

    @nonnull
    @override
    public myholder oncreateviewholder(@nonnull viewgroup viewgroup, int i) {

        view view = inflater.inflate(r.layout.fragment_rv_item,viewgroup,false);

        return new myholder(view);
    }


    @override
    public void onbindviewholder(@nonnull final myholder myholder, int i) {
        myholder.tv_title.settext(list_data.get(i));

        // 如果设置了回调，则设置点击事件
        if (monitemclicklitener != null)
        {
            myholder.itemview.setonclicklistener(new view.onclicklistener()
            {
                @override
                public void onclick(view v)
                {
                    int pos = myholder.getlayoutposition();
                    monitemclicklitener.onitemclick(myholder.itemview, pos);
                }
            });


        }
    }

    @override
    public int getitemcount() {
        return list_data.size();
    }

    class myholder extends recyclerview.viewholder
    {

        textview tv_title;

        public myholder(@nonnull view itemview) {
            super(itemview);

            tv_title = (textview)itemview.findviewbyid(r.id.tv_title);
        }
    }

    /**
     * 定义点击每项的接口
     */
    public interface onitemclicklitener
    {
        void onitemclick(view view, int positon);
    }

    private onitemclicklitener monitemclicklitener;

    public void setonitemclicklitener(onitemclicklitener monitemclicklitener)
    {
        this.monitemclicklitener = monitemclicklitener;
    }
}

drawable下

flex_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <!-- 填充-->
    <solid android:color="#00000000"/>
    <!-- 描边 -->
    <stroke
        android:width="1dp"
        android:color="#7f7f7f" />
    <!-- 圆角 -->
    <corners
        android:radius="2dp" />
</shape>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。