【Blen道】あれはどうやって作ってるのか?


#win8dev_jp #wpdev_jp

今週はいろいろ忙しそうな予感だけはしている高橋です。

image

実際のアプリはどうやってレイアウトしているのか?実はパネルの特徴、コントロールの特徴を知っているとある程度は推測できる。多分慣れている人は、アプリを見るとたいがいどう作れば推測できるものである。

そんなわけで、あくまで私の想像で分析してみた。

Finance

美しい標準アプリの代表格がFinanace である。たぶん、8.1からハブコントロールの可能性もあるが。

image

この手の多くは全体を StackPanel でスタックさせ、それを ScrollViewer で1画面に収めているパターン。

  • いちばん左はImageを固定サイズで表示している。ただし、Gridを間に挟んでいる。なぜなら文字を「重ねて」表示させるため。
  • 2番目のアイテムはGridでしょう。拡大図のように上下の文字やボタンの入った領域は固定長で、画面サイズに合わせてグラフのサイズが変わる。下のボタンや右上の情報表示は「等幅」なのでおそらくGrid。タイトル下の数字表示は左寄せStackPanelでしょう。
  • 3つ目と右から2つ目は提携のListViewで動的にアイテムを増やしやすい形になっている。
  • 右から3つ目はおそらくUserControl を2つ並べている。アイテム1つずつはまとめて1つのオブジェクトとしてクリックできる形で、解像度に合わせて表示項目が変わるがスクロールはしない。おそらくUserControlStackPanel かもしれない。

Facebook

新しく、Windows 8.1 で公開されたFacebook 公式アプリ。これをひも解いてみる。

image

典型的な3ペインタイプ。横幅は固定なので、Gridで全体を構成しているでしょう。

  • タイトル部でGridを切り、左右のペインも固定幅でグリッドを切る。軽量化のために固定幅にすることは大事。
  • 各ペインの中は、StackPanel ScrollViewer でくるむ形になっている。
  • 各項目はすべてListView でやっているだろう。記事もすべてその中で管理していると思われる。
  • 中央のボタンはとうはばなのでおそらくGrid化と。

どう見る?

つまり3つのプロセスがあることがわかる。

  1. 画面内に何の情報を配置するのか考える
  2. 画面のどこにどのように配するのか考える
  3. 適切なパネルやコントロールを選択する。

オブジェクトの選択には、アイテムの数、動的に変化するか、重ねるのか重ならないのか、等幅か左右寄せか、で必然と決まってくる。

またBlend  出てないよ!てへ♪

Comments (0)

Skip to main content