今回はglideのスタイル【Tiles】について徹底解説していきます。
glideのスタイル【Tiles】の全容
glide公式リンクはこちら↓
glideの登録方法はこちら
glideのコンポーネント10種類の概要をまるっと解説はこちら
お悩み解決！オープンチャットのやり取りをまとめました。→オープンチャットＱ＆Ａ
今回使用するデータはみんな大好きワンピースのイラストを、こちらもみんな大好きいらすとやさんからお借りしました。このデータがどのように表示されるかをイメージしながら見てください！
General
まずGeneralタブにある項目から解説していきます。項目は５つ
- DATA
- DESIGN
- TEXT STYLE
- OVERLAYS ※Tiles per rowが2以下
- OPTIONS
- ACTION ※アクションの概要は【glide】アクション24種類の概要をまるっと解説をご覧ください。
となっています。
DATA
Title…一番目立つ太字の部分
Details …タイトル下の説明・概要などの記述部分
Image…画像を表示
DESIGN
Image is…画像 or Mapを選択
Tile shape…画像のサイズ・形を選択
Tiles per row…列の数を1～4で指定
Orientation…タイルの並びを縦方向・横方向から選択
Corners…タイルの角を2種類から選択
Crop Behavior…顔を認識して写真の位置を調整する？っぽいです。
TEXT STYLE
Position…テキストを画像の下に表示するか、中に表示するかを選択
Alignment(PositionのがOverlayの時のみ)…テキストを画像内に表示するときの位置を選択
Text Size…テキストのサイズを選択
OVERLAYS
画像の中に様々な情報を表示できます。
Button…お気に入りボタンを表示。アプリをログイン必須にし「お気に入りリスト」を作成したい時に使用
Tag…左上に色付きのカードで表示
Avatar…小さい画像を表示
Caption…小さいテキストを表示
OPTIONS
OPTIONS…Only show a few itemsにチェックを入れ数字を入れると、指定した数だけ項目が表示されます。指定した数以上項目がある場合は、右上に「すべてを見る」と表示され、クリックで全項目が開きます。
ACTION
ACTIONではタイルをタップした時に動作するアクションを設定できます。
アクションの概要は【glide】アクション24種類の概要をまるっと解説をご覧ください。
Options
こちらは共通設定項目になりますので、Optionsの設定項目より詳細をご確認ください。
Add Form
こちらは共通設定項目になりますので、Add Formの設定項目詳細をご確認ください。
知らないと損？作業効率爆上がりグッズ
アプリやツールを開発する際はどうしても作業時間が長くなり、疲れやストレスがたまりがちです。
そんな時にあったら嬉しいお役立ちグッズをまとめました！良いアイデアやツールを生かすため、まずは環境を整えましょう！
おすすめグッズの記事はこちら→PCの作業効率爆あがり！おすすめグッズ大特集！
ノーコードで稼げるの？
はい、可能です。
スキルを身に付けた後どうするか？
分かりやすくまとめました。興味がある方は読んでみてください。
個別相談はこちら
作りたいアプリがあるけどどうやっていいかわからない！というひとがいましたら、個別に相談に乗りますのでこちらへご連絡ください。
Tilesまとめ
いかがでしたでしょうか？今回はglideで使えるSTYLEの【Tiles】について徹底解説しました。List表示よりよりリッチな表示が可能になり、うまく設定すればグッと項目も見やすくなりますのでマスターしてアプリ制作に役立ててください。
glide専用ラインオープンチャット作りました！お気軽にご参加ください。イェイイェイ🐣
