Android アプリケーションにマテリアルデザインを追加する方法

Android プラットフォームが多様化し、特定のエコシステムに適合するアプリケーションをデザインすることが難しくなっています。このため、GeneXus15 では、開発者がマテリアルデザインのガイドラインに従う際に役立つ機能を Android ジェネレーターに組み込んでいます。この Android 向け機能によって、プラットフォームのバージョン 5 (別名 Lollipop) より、開発者はアプリケーションのルック & フィールをカスタマイズし、最適なユーザーエクスペリエンス (UX) で操作性を高めることができます。
これらの機能は 2 通りの形で使用できます。つまり、プロパティによってカスタマイズして使用することも、既定の状態でそのまま使用することもできます。
ここでは、Sales サンプルを使用して、それぞれについて説明し、GeneXus X を使用した場合の結果を比較します。

プロパティを使用したカスタマイズ

アプリケーションの色や影など、見た目に関するあらゆる要件を満たす一連のプロパティがあります。

1) 全般的な外観

アプリケーションをデザインするとき、アプリケーションの一部のセクションは、色を一度設定したら、そのまま変更しません。
このような場合に使用できる 7 つのプロパティが [ Application Colors ] グループの下に用意されています。

編集可能なフィールド

データをデバイスから中央のシステムに入力するフィールドの配色をカスタマイズできるプロパティが 3 つあります。

また、ガイドラインに従い、その外観が改善されています。テキストフィールドは、従来と異なり、ラインが浮き上がって表示されます。
チェックボックス、ラジオボタンなど、ほかのコントロールにも同様の変更が適用されています。

アクションバー

アプリケーションのもっとも重要なデザインエレメントは、上部のセクションです。この部分の視覚的アピールによって、エンドユーザーがシステムを快適に感じるかどうか、使い続けるかどうかが決まります。
[ Primary Color ] プロパティでは、ブランドを特徴付けるアプリケーションのメインカラーを定義できます。このプロパティと [ Primary Color Dark ] プロパティによって、アプリケーションの全般的な配色が決まります。
この色は、 [ Primary Color ] よりも暗い 700 を使用するようにガイドラインで定められています。

アプリケーションバーに埋め込むアイコンの色は、 [ Action Tint ] プロパティでカスタマイズできます。この色を [ Primary Color ] よりも明るくすると、アプリケーション内の色の調和が保たれます。

有効化の表示

エンドユーザーが有効にしたコントロールの色を 1 つのプロパティで変更できます (例: ボタンのタップやモーダルウィンドウでのテキスト確定)。この動作は Android 4 (またはそれ以前のバージョンの) オペレーティングシステムでは既定で含まれ、アプリケーション内の色の調和が乱れることがありました。Android 5 より、これらのコントロールをカスタマイズできるようになりました。

2) ステータスバーの色

ステータスバーの色は前述の [ Primary Color Dark ] プロパティ ([ Application Colors ] グループの下) で静的に設定できますが、条件 (例: 表示されているパネル、エンドユーザーによって実行されたイベント) に応じて動的に変更することが望ましい場合もあります。そのために、新しいプロパティ [ Status Bar Color ] がテーマの Application Bars クラスの下に追加されました。開発者はこのプロパティを使用して、アプリケーションバー (ステータスバーを含む) に関連付けられているクラスを、一定の条件が満たされたときにのみ (例: 表示されているパネルに応じて) 割り当てることで動的に変更できます。
使用の一例として、エンドユーザーが画面を上にスワイプしたときにアプリケーションバーを非表示にし、ステータスバーを背景に対して表示できます。エンドユーザーが下にスワイプすると、通常の表示に戻ります。

イベントに応じてステータスバーの色が変わる様子が分かります。 [ Status Bar Color ] プロパティを設定した場合、 [ Primary Color Dark ] プロパティは適用されません。

3) エレベーション

Android 搭載の簡単な機能を使用して個別のコントロールに影を付け、機能に応じて一部のコントロールが別のコントロールの上に重なっている (そして重要性に差がある) ような印象をエンドユーザーに与えることができます。開発者の作業を簡素化するため、GeneXus では、一部のコントロールを対象に、対応する Theme クラスの下にこの効果をもたらす [ Elevation ] プロパティが用意されています。
商品を表示しているテーブルと、そこに埋め込まれているボタンに影があることが分かります。これは、商品と、クリック可能なボタンがあることをエンドユーザーに示しています。

このコンセプトは、キャンバスに [ ZOrder ] プロパティを使用して、アプリケーションのコントロールにこのオーバーレイ効果を追加している開発者にとってはなじみがあるかもしれません。
これらのプロパティは同類と考えることができ、通常は同時に使用します。 [ Elevation ] は影を付けるのに対して、 [ ZOrder ] では、複数のコントロールのエレベーションが同じだった場合に、どのコントロールが特定の階層に属するかを開発者が設定できます。

4) タブストリップのカスタマイズ

GeneXus の旧バージョンでは、タブストリップのカスタマイズが、マテリアルデザインのガイドラインに従って設計されていない Tab page クラスに限定されていました。GeneXus 15 より、開発者は 3 つのプロパティを設定するだけになりました。

既定で提供

これは、カスタマイズ可能なプロパティに基づいて動作する一連の効果です。

1) タッチリップル

デバイスで、エンドユーザーのタップジェスチャーが有効だったかどうかが分かりにくい場合があります。タッチリップルは Android が提供するシンプルな視覚効果であり、デバイスがリクエストを正常に理解したことをエンドユーザーに伝えるためのものです。イベントが関連付けられているコントロールをエンドユーザーがタップすると、強調表示された円がタッチポイントからコントロールの境界まで広がり、完全に広がってから、最終的にイベントがトリガーされます。

2) タスクの色

Android デバイスには 3 つの物理/静電容量式ボタンがあり、それぞれ特定の操作専用になっています。ホームボタンと戻るボタンのほか、3 つ目のボタンにはさまざまな呼び名があります。ほとんどの場合、このボタンは履歴ボタンと呼ばれています。エンドユーザーは最近閉じたアプリケーションを確認し、必要に応じて復元し、使用を再開できるからです。
Android Lollipop より、このタスクリストの表示がモバイル版 Chrome のタブ切り替え機能のようになりました。各タスクが重ねて表示され、画面のサムネイルでは上部バー、アイコン、ラベルが色付きになります。GeneXus では、この履歴内のアプリケーションのタスクの色が、開発者が設定したアプリケーションバーの背景色と同じになります。