[Android] A variety of ways to achieve streaming layout

Foreword

We often encounter that kind of label layout, the width is fixed and the height is not fixed, and the width of each label is not fixed.

FlexboxLayoutManager + RecyclerView to achieve streaming layout

This is very simple, it RecyclerViewis the same as what we usually use , except LayoutManagerthat it is replaced withFlexboxLayoutManager

Specifically, let's look at the effect first

Here we simply post the code

First introduce the corresponding dependencies

  implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha01'
    implementation 'com.google.android:flexbox:1.1.0'

Next is the same as we usually

public class RecyclerViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler_view);
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new FlexboxLayoutManager(this));
        FlowRecyclerViewAdapter adapter = new FlowRecyclerViewAdapter(DataManager.getData());
        recyclerView.setAdapter(adapter);
    }
}

public class FlowRecyclerViewAdapter extends RecyclerView.Adapter<FlowRecyclerViewAdapter.ViewHolder> {

    private List<String> mDataList;

    public FlowRecyclerViewAdapter(List<String> list) {
        mDataList = list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.mTextView.setText(mDataList.get(position));
    }

    @Override
    public int getItemCount() {
        return mDataList == null ? 0 : mDataList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        private TextView mTextView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            mTextView = itemView.findViewById(R.id.tv_item);
        }
    }
}

Custom View

This is how we achieve this effect ourselves. If you don't want to write it yourself, you can use the ready-made.

github address

Let's take a look at the effect first. The
specific principle will not be described here. If you are interested, you can look at the source code.

We post the usage below

public class FlowLayoutActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flow_layout);
        TagFlowLayout tagFlowLayout = findViewById(R.id.flow_layout);
        FlowAdapter adapter = new FlowAdapter(DataManager.getData());
        tagFlowLayout.setAdapter(adapter);
    }
}

public class FlowAdapter extends TagAdapter<String> {
    public FlowAdapter(List<String> datas) {
        super(datas);
    }

    @Override
    public View getView(FlowLayout parent, int position, String s) {
        ItemView itemView = new ItemView(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow, parent, false));
        itemView.mTextView.setText(s);
        return itemView.itemView;
    }

    class ItemView extends RecyclerView.ViewHolder {

        private TextView mTextView;

        ItemView(@NonNull View itemView) {
            super(itemView);
            mTextView = itemView.findViewById(R.id.tv_item);
        }
    }
}

public class DataManager {

    public static List<String> getData() {
        List<String> list = new ArrayList<>();

        list.add("Test");
        list.add("Test Android");
        list.add("Test Java");
        list.add("Test Python");
        list.add("Test 444444444444455555555555544444444444444");
        list.add("Test");
        list.add("Test Android");
        list.add("Test Java");
        list.add("Test Python");
        list.add("Test 666666");
        list.add("Test");
        list.add("Test Android");
        list.add("Test Java");
        list.add("Test Python");
        list.add("Test 88888888888888888");

        return list;
    }
}