GlideのCompactレイアウトの使い方

Glideのレイアウトで「Compact」というレイアウトがあります。
一覧形式のアプリを作成できるレイアウトなので、試してみたいと思います。

なお、一覧形式を作成するには「List」というレイアウトがあり、「Compact」は「List」をシンプルにしたものです。
「List」レイアウトについては以下の記事をご覧ください。
本記事では以下の記事で作成したアプリに対して、タブを追加する形で作成します。

スプレッドシートでデータを準備する

Glideでは、一覧形式にしたいデータをスプレッドシートに記載します。
本記事では「List」レイアウトの記事と同様にミスドを使用して、店舗一覧を作ってみました。

ミスドの店舗一覧

このデータを使用して、Glideで一覧表示します。

Glideの設定

Glideの画面にて、リロードボタンをクリックします。

リロードすると、スプレッドシートで修正した内容が反映されます。
タブボタン(以下赤枠)をクリックすると、タブを追加することができます。

Glideのタブ

右側にタブのメニューが表示されます。
タブを追加するには、右上の+ボタンをクリックします。

Glideのタブメニュー

「Source」という部分でスプレッドシートのシートを選択できるので、上記で作成したシートを選択します。

Glideでタブを作成する

すると、真ん中のアプリ表示エリアにて、下部にタブが表示されました。

Glideのタブ表示

店舗一覧のタブをクリックすると、表示内容が変わります。

Glideのタブをクリックすると表示が変わる

スプレッドシートの内容から、自動でレイアウトが作成されているので、「Compact」レイアウトに変更してみます。
レイアウトのメニューで、「STYLE」から「Compact」を選択します。

GlideのCompactレイアウト

「Compact」レイアウトでは「List」レイアウトに比べて、表示できる項目の数が少なくなっています。
本記事では、上記のように店名と住所を表示するようにしてみました。

GlideのCompactレイアウトの表示

すると、店名、住所ともに、表示できる文字数を超えていて、全て表示できず「…」で表示されています。
試しに、店名だけを表示するようにした場合は以下のようになります。

GlideのCompactレイアウトの表示

表示する項目が1つだけなら、綺麗に表示できそうです。
続いて、店名と住所の表示に戻して、折り返して表示するようにしてみました。

GlideのCompactレイアウトで折り返して表示

折り返して表示した場合は、文字が全て表示されますが、見た目が綺麗ではないですね。
項目ごとに表示する幅を変えるとかできれば、綺麗に収まりそうですが、ノーコードのGlideはこういうところが変更できないので、「Compact」レイアウトはあまり使えない印象です。

Glideで一覧形式で表示するなら、「Compact」ではなく「List」レイアウトが良い

今回は「Compact」レイアウトを使ってみましたが、一覧形式で表示するなら、「List」レイアウトを使えば事足りそうです。

表示する項目を1つにすれば良いかもですが、一覧形式で表示する場合、2〜3項目は情報を表示できると、分かりやすいアプリになるのではないか?と思います。
どうでしょうかね?
何か良い使い方があれば、ぜひ教えていただきたいです。

▼Glide公式ドキュメントのCompact layout
https://docs.glideapps.com/all/reference/design-and-structure/layouts/compact-list
※英語だと文字の幅を取らないので良いですね。