折り返し表示もこれで怖くない! Google製ライブラリ【FlexboxLayout】

FlexboxLayout

https://github.com/google/flexbox-layout
https://developers-jp.googleblog.com/2017/03/build-flexible-layouts-with.html

こういう表示を折り返し部分をやってくれる

タグ表示などで使えそうです。

１、一つのViewの中にViewを配置すると自動で折り返しくれるFlexboxLayout
２、RecyclerView内のViewを紐づけるFlexboxLayoutManager(LayoutManager)
があります。

スクロールするような画面では、RecyclerViewの仕組みでViewが再利用されるので
FlexboxLayoutManagerを使うのが良さそうです。

使い方

今回は2のFlexboxLayoutManagerを使ってみます。
既存のRecyclerViewにLayoutMnagerをセットします。

// RecyclerViewを用意
RecyclerView recyclerView = findViewById(R.id.flexbox_layout);

// ライブラリに定義されているFlexboxLayoutManagerを準備
FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(flexboxLayoutManager);

// Adapterを準備
FlexLayoutManagerAdapter flexLayoutManagerAdapter = new FlexLayoutManagerAdapter();
recyclerView.setAdapter(flexLayoutManagerAdapter);
flexLayoutManagerAdapter.setData(getTagList());

  // データ
  private ArrayList<String> getTagList() {
    ArrayList<String> tags = new ArrayList<>();
      for (int i = 0; i < 5; i++) {
        tags.add("あいうえお");
        tags.add("かきくけこ");
        tags.add("さし");
        tags.add("すせそ");
        tags.add("たちつてとなにぬねのは");
        tags.add("ひふえほまみ");
        tags.add("むめもやゆよ");
        tags.add("らりる");
        tags.add("れろわをん");
      }
    return tags;
  }

で一番載せたに書いた画面ができ、上下にスクロールもします。

FlexLayoutManagerをインスタンス化するときに

new FlexboxLayoutManager(getApplicationContext(), FlexDirection.COLUMN);

第二引数にFlexDirection.COLUMNを指定することにより
縦柚はアイテムが揃っており、横にスクロールすることができるようにします。

Adapterも載せておきますが、こっちは通常のRecyclerViewを表示する時のAdapterで大丈夫です。

// Adapter
    private class FlexLayoutManagerAdapter extends RecyclerView.Adapter {
        private ArrayList<String> tags;

        public void setData(ArrayList<String> tags) {
            this.tags = tags;
            notifyDataSetChanged();
        }

        @NonNull
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            LayoutInflater inflater = LayoutInflater.from(parent.getContext());
            return new FlexLayoutViewHolder(inflater.inflate(R.layout.tag_item, parent, false));
        }

        @Override
        public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
            if (holder instanceof FlexLayoutViewHolder) {
                ((FlexLayoutViewHolder) holder).bind(tags.get(position));
            }
        }

        @Override
        public int getItemCount() {
            if (tags == null) return 0;
            return tags.size();
        }

        // Holder
        public class FlexLayoutViewHolder extends RecyclerView.ViewHolder {
            private TextView tagTextView;

            public FlexLayoutViewHolder(@NonNull View itemView) {
                super(itemView);
                tagTextView = itemView.findViewById(R.id.tag_text_view);
            }

            public void bind(String tag) {
                tagTextView.setText(tag);
            }
        }
    }