Flexbox+ReclyclerView怎么实现流式布局

本篇内容主要讲解"Flexbox+ReclyclerView怎么实现流式布局"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Flexbox+ReclyclerView怎么实现流式布局"吧!

效果：

module build.gradle引入

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

布局

activity_main.xml

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 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 {    private Context mContext;    private List list_data;    private LayoutInflater inflater;    public FlexBoxAdapter(Context mContext, List 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

到此，相信大家对"Flexbox+ReclyclerView怎么实现流式布局"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！