【Blen道】あれはどうやって作ってるのか？
#win8dev_jp #wpdev_jp
今週はいろいろ忙しそうな予感だけはしている高橋です。
実際のアプリはどうやってレイアウトしているのか？実はパネルの特徴、コントロールの特徴を知っているとある程度は推測できる。多分慣れている人は、アプリを見るとたいがいどう作れば推測できるものである。
そんなわけで、あくまで私の想像で分析してみた。
Finance
美しい標準アプリの代表格がFinanace である。たぶん、8.1からハブコントロールの可能性もあるが。
この手の多くは全体を StackPanel でスタックさせ、それを ScrollViewer で1画面に収めているパターン。
- いちばん左はImageを固定サイズで表示している。ただし、Gridを間に挟んでいる。なぜなら文字を「重ねて」表示させるため。
- 2番目のアイテムはGridでしょう。拡大図のように上下の文字やボタンの入った領域は固定長で、画面サイズに合わせてグラフのサイズが変わる。下のボタンや右上の情報表示は「等幅」なのでおそらくGrid。タイトル下の数字表示は左寄せStackPanelでしょう。
- 3つ目と右から2つ目は提携のListViewで動的にアイテムを増やしやすい形になっている。
- 右から3つ目はおそらくUserControl を2つ並べている。アイテム1つずつはまとめて1つのオブジェクトとしてクリックできる形で、解像度に合わせて表示項目が変わるがスクロールはしない。おそらくUserControl でStackPanel かもしれない。
新しく、Windows 8.1 で公開されたFacebook 公式アプリ。これをひも解いてみる。
典型的な3ペインタイプ。横幅は固定なので、Gridで全体を構成しているでしょう。
- タイトル部でGridを切り、左右のペインも固定幅でグリッドを切る。軽量化のために固定幅にすることは大事。
- 各ペインの中は、StackPanel を ScrollViewer でくるむ形になっている。
- 各項目はすべてListView でやっているだろう。記事もすべてその中で管理していると思われる。
- 中央のボタンはとうはばなのでおそらくGrid化と。
どう見る？
つまり３つのプロセスがあることがわかる。
- 画面内に何の情報を配置するのか考える
- 画面のどこにどのように配するのか考える
- 適切なパネルやコントロールを選択する。
オブジェクトの選択には、アイテムの数、動的に変化するか、重ねるのか重ならないのか、等幅か左右寄せか、で必然と決まってくる。
またBlend 出てないよ！てへ♪