リストをカスタマイズして見やすくする

どうもこんばんは、みかんです。

！！！！とつぜんですがたいせつなおしらせ！！！！

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1

??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・

！！！！おしらせはおわりです！！！！！

今回は「リストをカスタマイズして見やすくする」という題で書いてみます。
下記ステップでやっていきます。

• 1 下準備
• 2 カスタマイズされたリスト
• 3 エディタの確認
• 4 ボタンアイコンについて

1 下準備

この記事と同様です。
Material Galleryテンプレートを見てUIの引き出しを増やす

Material Galleryテンプレートで説明します。
上の記事ではテンプレート自体の説明を入れているので、是非見ていただければと思います。

2 カスタマイズされたリスト

Sticker Sheetページの、User CardsのところにあるUser Card Listが、既にカスタマイズされたリストになります。

App Makerのフォームやテーブルは、配置した時点である程度完成していてかつあまり見た目のカスタマイズを必要としないウィジェットです。
それに対して、この一覧のように、見栄えを多少気にしたくなるような画面では色々カスタマイズしたいですよね。

3 エディタの確認

それでは、どのようにレイアウトが組まれているか細かく突っ込んでいきます。

リストウィジェットはこの青く囲まれている部分です。
リストウィジェットは、本体とその中に含まれる行でウィジェットが分かれているので、アウトラインも確認してみましょう。

本体と書いたのはこのアウトラインで言うとList: ProjectListList1です。
今はその子要素のPanel: ProjectListList1Rowを選択しています。
一つ前の画像と青枠の位置が変わっていませんが、これは親と行の長さを同じように組んでいるからのようです。

ちょっと分かりにくい説明になっている気がするので、普通にリストを置いた時にどうなるかを見てみましょう。

色を付けてわかりやすくしてみましたが、このようにリストウィジェットには親と子の2つのウィジェットがあります。
親のリストウィジェットに設定されたデータソースのサイズに応じて、実行時には子のウィジェットの数が変わります。
どれくらいの個数になるかは実行時にしかわからないので、レイアウトを定義する時は1行分で良いということですね。

それともう一つ気になる点としては、行には何も配置されていないところからスタートというところです。
フォームやテーブルを置く時は、ベースとなるデータソースを元に自動的にウィジェットが配置されますが、リストのようにユーザーがどうレイアウトを組むかわからないものは空っぽの状態で始まります。そのため、使い方をイメージするには、Material Galleryのようなテンプレートやサンプルをベースに始めたほうが良いでしょう。

1行分のウィジェットの確認に戻ります。
行のウィジェット自身はPanel: ProjectListList1Rowでした。その子要素として色々ウィジェットが配置されていますが、その子要素がどう並ぶかは、行のウィジェットがどのようなレイアウトウィジェットを採用しているかによります。プロパティを確認してみましょう。

ウィジェットタイプは「Panel」で、layoutプロパティは「horizontal」です。これは子要素を横に並べるレイアウトウィジェットであることを示しています。また、このウィジェット自身の横幅は「fill parent」、縦幅は「fit to content」です。横は親の幅に合わせますが、縦はこのレイアウトに含まれる子要素のサイズに合わせるという設定です。

もう一つ、レイアウトパネルにおいて見ておくべきプロパティがあるので確認します。それは「Flow」プロパティです。

注目すべきは「justify」と「alignChildren」です。細かく説明すると長くなるので、設定を変えてみた時の変化で雰囲気を感じ取ってみてください。

設定を変えていない状態

justifyを「spaceBetween」から「start」に変えた場合

alignChildrenを「center」から「start」に変えた場合

それぞれ、子要素の縦軸および横軸に影響します。
画面のサイズは伸縮するものなので、それに合わせて自動的に長さや配置が変わって欲しい、という時はすべてを数値で決め打つことは現実的ではありませんし、何より変わったことを検知してスクリプトで値を更新するのか？となってしまいますよね。
そんな時のために、長さが変わった時にどう自動的に変動するか、という設定がApp Makerに用意されています。
(もちろん、元となるHTML、CSSにもそのための仕様がありますが、それを簡易に設定しやすくしているよ、という感じです)

行ウィジェットの子要素を見ていきます。アウトラインは下記です。

大きく「TextGroup」と「ButtonGroup」の2つに分けていることがわかりますね。
ButtonGroupの中を見ると、同じようにアイコンを4つ横に並べているように見えるので、ButtonGroupは要らないのでは？と思うかもしれません。
ですがこのように大きい分類できっちり分けていくと、ボタンはまとめて右に寄せたいなどの時に設定が楽になります。

TextGroupも同じ様な形です。内部は「Image2」と「TextGroup1」の2つが横に並んでいます。画像とテキストですね。
テキストの部分は更にFullNameとUserNameの2種を縦に並べるため、TextGroup1という縦のレイアウトを用意し、そこに含めています。

このように、縦もしくは横のレイアウトを入れ子にして組んでいくのが、きれいにレイアウトを整えるコツということになります。
要素間のスペースの取り方など、レイアウト上説明が必要な部分はまだあるのですが、このテンプレートでは一部CSSを駆使して設定していたりとやや複雑なので割愛します。

4 ボタンアイコンについて

最後に、ボタンについて触れておきます。
行レイアウトの右側の４つのボタンアイコンが設定されています。
これはどこぞから画像を用意して当てはめているわけではありません。
マテリアルデザインで使用されるアイコンになっていますが、これを簡単に設定する方法が用意されています。

設定されている様子を貼り付けます。

設定すべき箇所は2つです。

1. 左上のStyle Variantを「Icon」に設定する
2. textプロパティをアイコン名にする (ここではemail)

すると、ボタンが画像に変わります。

アイコン名は下記サイトにある中から選ぶ形となります。

全部は試していませんが、ほぼ使えるはずです。
結構な数がありますので、画像の用意の手間を省くために一度目を通しておくと捗ると思います。

主にレイアウトに着目して解説してみました。実際にアプリを動かさないとイメージしにくいと思いますが、理解の一助となれば幸いです。

以上です。良いApp Makerライフを!