Flexbox+ReclyclerView实现流式布局
程序员文章站
2022-06-18 13:51:39
本文实例为大家分享了flexbox+reclyclerview实现流式布局的具体代码,供大家参考,具体内容如下效果:module build.gradle引入implementation 'com.g...
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。