How to realize streaming layout with Flexbox+ReclyclerView
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!
