SNSのハッシュタグのような表示をリピーティンググループを使って実現する方法を紹介します。リピーティンググループの使い方は知っているけど列や行数、横幅が固定になってうまく表示できずに困っている方は是非このブログを参考にしてください。
とても簡単に実装出来ます。
ゴールイメージ
こんな感じで表示します。
わかりやすいように最初の行は2つ、それ以降の行は3つのアイテムを表示するような形にしています。
実装方法
リピーティンググループを配置します。
リピーティンググループにはoption setsに設定した”hobby”を表示しています。ここはどのような値を設定しても問題ございませんのでお好きなデータをリピーティンググループに設定してください。
リピーティンググループの中身は設定したhobbyのDisplayを表示するようにしています。
ポイントはここからです。
リピーティンググループの“Scroll direction”を”Wrapped horizontally”とし、rowsとcolumnsの固定値のチェックを外してください。以下のようなイメージです。
これで行と列が柔軟になり、1行の横幅に合う数だけ要素を格納できます。
リピーティンググループの横幅はfixed-widthにしておいてください。
これで完成です。
最後に
如何でしたでしょうか？とても簡単ですよね？
プラグインを使って同じようなことも実現できますが、プラグインを使わないほうがアプリを軽くでき、処理もわかりやすかったりするので是非この方法をご利用ください。
それでは。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。