今回はglideのスタイル【List】について徹底解説していきます。
glideのスタイル【List】の全容
glide公式リンクはこちら↓
glideの登録方法はこちら
glideのコンポーネント10種類の概要をまるっと解説はこちら
お悩み解決!オープンチャットのやり取りをまとめました。→オープンチャットQ&A
![Data to use onepiece](https://nocodeblog.site/wp-content/uploads/2021/03/2Data-to-use-1.jpg)
今回使用するデータはみんな大好きワンピースのイラストを、こちらもみんな大好きいらすとやさんからお借りしました。このデータがどのように表示されるかをイメージしながら見てください!
General
![01list-general](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-1.jpg)
まずGeneralタブにある項目から解説していきます。項目は5つ
- DATA
- DESIGN
- TEXT STYLE
- OPTIONS
- ACTION
となっています。
①DATA
![02list-data](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-2.jpg)
DATAの設定できる項目は以下
- Title
- Details
- Caption
- Image
Title…一番目立つ太字のテキスト
Details…タイトル下のテキスト
Caption…一番下のテキスト
Image…画像を表示
![03list-data2](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-3.jpg)
Captionの欄を空白にするとなぜか画像が左側に。画像は丸型になります。
![04list-data3](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-4.jpg)
![05list-data4](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-5.jpg)
画像がない場合はShow title when image is not availableのチェックを外すと、画像無しで表示できます。
②DESIGN
![06list-design](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-6.jpg)
表示方法をRegular、Compactの2種類から選べます。※画像はCompact
③TEXT STYLE
![07list-text style](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-7.jpg)
TEXT STYLE…Allow text wrappingにチェックを入れるとTitleとDetailsに挿入したテキストが全文表示されます。
④OPTIONS
![08options](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-8.jpg)
OPTIONS…Only show a few itemsにチェックを入れ数字を入れると、指定した数だけ項目が表示されます。指定した数以上項目がある場合は、右上に「すべてを見る」と表示され、クリックで全項目が開きます。
⑤ACTION
ACTIONでは項目をタップした時に動作するアクションを設定できます。
アクションの概要は【glide】アクション24種類の概要をまるっと解説をご覧ください。
Options
![09list-options](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-9.jpg)
Optionsの設定項目は以下、項目は6つ。
- SEARCH
- FILTER
- SORT
- GROUP
- IN-APP FILTER
- IN-APP SORT
①SEARCH
![10list-search](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-10.jpg)
検索ボックスの設定を行う項目です。表示・非表示の切り替え、初期テキストの設定が行えます。
②FILTER
![11list-filter](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-11.jpg)
データの列を指定しフィルターをかけ表示項目を絞ります。カテゴリー別に表示したりするときに使います。
③SORT
![12list-sort](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-12.jpg)
データの列を指定して並べ替えを行います。ランダムやシートの並び順、各項目に沿った並び順を選択できます。
④GROUP
![13list-group](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-13.jpg)
列を指定しグループごとに表示します。
⑤IN-APP FILTER
![14list-in-app filter](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-14.jpg)
列を指定すると画面右上にアイコンが現れ、ユーザーが自身でカテゴリー検索ができるようになります。
⑥IN-APP SORT
![15list-in-app sort](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-15.jpg)
列を指定すると、ユーザーが自身でカテゴリー別に並べ替えができるようになります。
Add Form
![16list-add form](https://nocodeblog.site/wp-content/uploads/2021/04/Listを徹底解説-16.jpg)
ユーザーが項目を追加できるフォームの設定。Allow users to add itemsにチェックを入れると画面右上に+マークが表示され、入力フォームを開けるようになります。入力フォームの項目はコンポーネントを自由に組み替えることができます。
【glide】コンポーネント10種類の概要をまるっと解説はこちら
Add conditionで条件を指定すると、入力できるユーザーを限定したりできます。
知らないと損?作業効率爆上がりグッズ
アプリやツールを開発する際はどうしても作業時間が長くなり、疲れやストレスがたまりがちです。
そんな時にあったら嬉しいお役立ちグッズをまとめました!良いアイデアやツールを生かすため、まずは環境を整えましょう!
おすすめグッズの記事はこちら→PCの作業効率爆あがり!おすすめグッズ大特集!
ノーコードで稼げるの?
はい、可能です。
スキルを身に付けた後どうするか?
分かりやすくまとめました。興味がある方は読んでみてください。
個別相談はこちら
作りたいアプリがあるけどどうやっていいかわからない!というひとがいましたら、個別に相談に乗りますのでこちらへご連絡ください。
Listまとめ
いかがでしたでしょうか?今回はglideで使えるSTYLEの【List】について徹底解説しました。割と使用頻度の高い表示方法ですのでマスターしてアプリ制作に役立ててください。
glide専用ラインオープンチャット作りました!お気軽にご参加ください。イェイイェイ🐣
![ノーコードで即行動](https://nocodeblog.site/wp-content/uploads/2021/02/ノーコードで即行動.jpg)