Garmin アプリ開発(4) 画面レイアウトとデザインを考える
プログラムのサンプルの理解ができてきたので、画面レイアウトを考えていきます。
要素
今回画面に必要な要素は
・ストップウォッチ2個
なので1画面にレイアウトできそうです。
Reference Guides にあるように、3field layoutでレイアウトするのが良さそうです。
色使い
ただしデフォルトの3 layer layoutそのままだと、白黒の寂しい画面になるので色を使ってデザインしようと思います。
ではこの機種forerunner 55(forathlete 55)はどんな描画ができるか、同じくReference Guides で調べます。
Screen Shape round
Screen Size 208 x 208
Display Colors 8
丸くて、208x208ドットで、なんと 8色 でした！ (買う前に見たカタログに書いて無いよ！)
デジタル8色とは.... 1980年代パソコンみたいなデザインが必要ですね！
8色(3bit)カラーいろいろ
左が元画像、右は8色カラー化した画像。フルカラーの8色化はざらざら(誤差拡散)かのっぺり(誤差拡散なし)になってしまいます。
これだとフルカラーの高級時計などをモチーフにしたデザインは難しそうです
2020年代のデザインは単色アイコンも流行ってますし、プロのデザイナーなら8色でもかっこよく作るんでしょう
80年代ゲームの色使いでプログラミング＋デザインで感心するのはザナドゥの色使い
動くキャラは2bit(白、黒、赤、透明)、背景はなんと1ビット(黄/青)の、3bit(8色を5色に減色)カラーで、これだけのデザインを実現してます！
重ね合わせ処理を省略して高速な描画を実現するため、減色覚悟で2bit / 1bit使い分け。
制約がありながらのデザイン力が素晴らしく背景1bitなのに、神殿、通過可能、乗れるブロックなどが一目で判別できます。
こういうデザインも8 colorで出来ますね。こういう色使いで行きます
画像リソース作成
お好きなビットマップエディタ(GIMP - GNU Image Manipulation Programなど)で、pngファイルを作成します。
背景画像や、アイコンを作ります。
レイアウト指定
https://developer.garmin.com/connect-iq/core-topics/layouts/
このリファレンスマニュアルを参考に、レイアウトをxmlファイルで指定します。
<layout id="MainLayout">
<bitmap id="background" x="center" y="center" filename="../../resources-round-240x240/images/timers11_240x240.png" />
<label id="StopWatchMS" x="210" y="21" font="Graphics.FONT_NUMBER_THAI_HOT" justification="Graphics.TEXT_JUSTIFY_RIGHT" color="Graphics.COLOR_WHITE" />
<label id="StopWatchCenti" x="186" y="95" font="Graphics.FONT_NUMBER_MILD" justification="Graphics.TEXT_JUSTIFY_LEFT" color="Graphics.COLOR_WHITE" />
<label id="FreeRun" x="210" y="116" font="Graphics.FONT_NUMBER_THAI_HOT" justification="Graphics.TEXT_JUSTIFY_RIGHT" color="Graphics.COLOR_WHITE" />
<label id="AdditionalTime" x="68" y="95" font="Graphics.FONT_NUMBER_MILD" justification="Graphics.TEXT_JUSTIFY_LEFT" color="Graphics.COLOR_YELLOW" />
<bitmap id="back" x="148" y="199" filename="../../resources-round-240x240/images/exit_240x240.png"/>
<bitmap id="up" x="5" y="106" filename="../../resources-round-240x240/images/setup_240x240.png"/>
</layout>
bitmap要素で背景やアイコン、label要素でストップウォッチなどの文字列の座標とフォントサイズ、配置、色を指定します。
サンプルプログラムにこれらのリソースを上書きして、↓のようなコードで label に文字列をセットすると、UIが大体できます。
_DrawableStopWatchMS = View.findDrawableById("StopWatchMS");
_DrawableStopWatchMS.setText(”88:88");
文字列はみ出さないように、サイズや座標を微調整してレイアウトの完成です
まだ全く動きませんが、UIのガワができると続きを作るやる気が出てきます
