Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve streaming layout in Flexbox+ReclyclerView". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve streaming layout in Flexbox+ReclyclerView".

Effect:

Module build.gradle introduction

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

Overall Arrangement

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); / / the flexDirection attribute determines the direction of the spindle (that is, the direction of the items). Similar to LinearLayout's vertical and horizontal. FlexboxLayoutManager.setFlexDirection (FlexDirection.ROW); / / the principal axis is horizontal and the starting point is at the left end. / / flexWrap by default, like LinearLayout, Flex is arranged without line breaks, but the flexWrap attribute can support line breaks. / / flexboxLayoutManager.setFlexWrap (FlexWrap.WRAP); / / Line wrapping in the normal direction / / the justifyContent attribute defines the alignment of the item on the spindle. / / flexboxLayoutManager.setJustifyContent (JustifyContent.FLEX_START); / / the start point of the cross axis is aligned. Rv_Flexbox.setLayoutManager (flexboxLayoutManager); list_data = new ArrayList (); list_data.add ("Xiaomi Mobile"); list_data.add ("balance"); list_data.add ("Unmanned aerial vehicle"); list_data.add ("Shenzhou Notebook"); list_data.add ("Xiaopeng Automobile"); list_data.add ("Tesla") 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.fragmentationrvtemtempjj); return new myHolder (view);} @ Override public void onBindViewHolder (@ NonNull final myHolder myHolder, int I) {myHolder.tv_title.setText (list_data.get (I)) / / if callback is set, set click event 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);}} / * define the interface for each item clicked * / public interface OnItemClickLitener {void OnItemClick (View view, int positon);} private OnItemClickLitener mOnItemClickLitener; public void setOnItemClickLitener (OnItemClickLitener mOnItemClickLitener) {this.mOnItemClickLitener = mOnItemClickLitener;}}

Under drawable

Flex_item_bg.xml

At this point, I believe you have a deeper understanding of "Flexbox+ReclyclerView how to achieve streaming layout", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.