第6回中心会議 齿础惭尝で学ぶ レイアウトスキル 0923
- 1. 齿础惭尝で学ぶ
レイアウトスキル
グレープシティ株式会社
? 巻 雄哉
blog: d.hatena.ne.jp/Yamaki/
Twitter: @yamaki00
- 2. アジェンダ
? なぜ今レイアウトスキル？
? 業務 ア プ リ 画 ? に おける
レイアウトの現状
? レ イ ア ウ ト ? 式 は ? き く 分 け て 2つ
? XAMLを例に相対配置を学ぶ
? 配置する要素
? 配置される領域
? サンプルで 学 ぶ 実 際の 使 い ?
? XAML以外のUIフレームワーク
2
- 4. なぜ今レイアウトスキルなのか？
?画 ? 解像 度 の 多 様 化
? 液晶ディスプレイの低価格化、ワイド化
? ノートPCの普及（3台中2台がノート？）
? PC以外のデバイスの登場
? スマートフォン、タブレットPC／スレートPC
? 国際化
?? DPI
- 5. 画 ? 解像 度 の 多 様 化
2006年7? その他
Yuya Yamaki’s blog
http://d.hatena.ne.jp/Yamaki/
訪問 者 に お け る 画 ? 解像 度 の 内 訳
1680x1050
1400x1050
1280x1024 ,
1600x1200
41.08%
1024x768 ,
29.55%
- 6. 画 ? 解像 度 の 多 様 化
2011年7?
Yuya Yamaki’s blog
http://d.hatena.ne.jp/Yamaki/
訪問 者 に お け る 画 ? 解像 度 の 内 訳
1600x900 その他
1600x1200
1280x1024 ,
1440x900
28.08%
1366x768
1920x1080
1024x768 ,
6.57%
1920x1200
1280x800 1680x1050
- 7. 画 ? 解像度? 較
解像度?
1024×768
1280×1024
1920×1080
- 13. 业务アプリケーションの现状
? ウィンドウサイズの固定
768ピクセル
最 ?化 ／ 最 ? 化
ボ タ ン は ? 表?
1024ピクセル
- 15. 絶対配置のリサイズ対応
? リサイズ時に各コントロールの
位 置 、 ? き さ を 動 的 に 調整
? VB6
? フォームのリサイズイベントでコントロール
の 位置 や ? きさ を 変 更
? Windowsフォーム
? Anchorプロパティ、Dockプロパティ
15
- 17. 絶対配置と相対配置
? 絶対配置
? 位 置 や ? き さ が 直 接 指 定 されて決まる
? 相対配置（動的配置）
? 周りの要素とそれらとの関係で
位置 や ? きさ が 決 まる
さ ま ざ ま な 画 ? 解像 度 に 対応 す る た め に は 、
を 採 ? す る 必 要が あ る
17
- 20. 配置する要素と配置される领域
配置する要素 配置される領域
が持つ属性 が持つ属性
VerticalAlignment：Center 4? 5列のGrid
Margin：10 2? 2列 ? の 領域 の ? き さ
MaxWidth：200 配置要素に合わせて可変
20
- 21. 配置する要素
? 最終的な位置（X座標、Y座標）と
? きさ （ 幅 、 ? さ ） の 決 定 に
影響する３つの属性
① VerticalAlignmentプロパティ、
HorizontalAlignmentプロパティ
② Marginプロパティ
③ コ ン ト ロ ー ル ? ? の ? きさ
21
- 22. ※参考資料
? VerticalAlignmentプロパティ
? Top、Center、Bottom、Stretch
? HorizontalAlignmentプロパティ
? Left、Center、Right、Stretch
? Marginプロパティ
? Thickness構造体
? Left、Top、Right、Bottom
22
- 24. 配置される領域
? Grid
? 列と ? で 構 成 さ れ る
格 ? 状 の 領域 を 定 義 して 配置
? StackPanel
? ? 平 ? 向 ま た は 垂 直 ? 向 に 並 べ て 配置
? WrapPanel
? 基本的な動きはStackPanel
? 領域の端まで? っ た 場 合 に 折 り 返して 表?
24
- 25. ※参考資料
? Grid
? ColumnDefinitionsプロパティ（列を定義）
? ColumnDefinitionクラス
? Widthプロパティ（列幅を指定）
? RowDefinitionsプ ロ パ テ ィ （ ? を 定 義 ）
? RowDefinitionクラス
? Heightプ ロ パ テ ィ （ ? の ? さ を 指 定 ）
? Width、Height共にGridLength型
- 26. ※参考資料
? GridLength構造体
? 3つのモード（GridUnitTypeプロパティ）
? Auto 配置された要素に必要なサイズ
? Pixel ピクセルで指定する絶対値
? Star 全 体 の ? き さ に 対す る ? 率
26
- 27. ※参考資料
? 配置要素に対する添付プロパティ
? Column
? Grid内 の ど の 列 に 表? す る か （ ゼ ロ オ リ ジ ン ）
? ColumnSpan
? Grid内 の い く つ の 列 に ま た が っ て 表? す る か
? Row
? Grid内 の ど の ? に 表? す る か （ ゼ ロ オ リ ジ ン ）
? RowSpan
? Grid内 の い く つ の ? に ま た が っ て 表? す る か
- 28. ※参考資料
? GridSplitter
? ShowsPreviewプロパティ
? ドロップ時に実際のサイズを変更するかどうか
? 以下のプロパティはWPFのみ
（ こ れ ら の プ ロ パ テ ィ が な く て も ?障は ほ と ん ど な い ）
? ResizeDirectionプロパティ
? Auto、Columns、Rows
? ResizeBehaviorプロパティ
? BasedOnAlignment、CurrentAndNext、
PreviousAndCurrent、PreviousAndNext
28
- 29. ※参考資料
? StackPanel
? Orientationプロパティ
?? 要素 が 配置 さ れ る ? 向 （ ? 平 か 垂 直 ）
?? 要素 の VerticalAlignmentプロパティ
? OrientationがVerticalの時は無効
?? 要素 の HorizontalAlignmentプロパティ
? OrientationがHorizontalの時は無効
- 30. ※参考資料
? WrapPanel（WPFのみ）
? Orientationプロパティ
?? 要素 が 配置 さ れ る ? 向 （ ? 平 か 垂 直 ）
? ItemWidthプロパティ
? 1? 要素 の 配置 領域 の 幅
? ItemHeightプロパティ
? 1? 要素 の 配置 領域 の ? さ
- 36. なぜ階層化する必要があるのか
?? 的 や 役 割 ごとに
領域をパネルとして分けたい
? ? 般的 に 、 リ サ イ ズ 処 理 は 領域 単 位 で 異 な る
? 耐変更性に優れている
36
- 40. ? 較表①
Windowsフォーム XAML Adobe Flex Android
Anchor、Dock HorizontalAlignment （スタイル） （コンテナ側）
left、right、 gravity
horizontalCenter
Anchor、Dock VerticalAlignment （スタイル） （コンテナ側）
top、bottom、 gravity、
verticalCenter baselineAligned
Margin Margin （コンテナ側） layout_marginBottom、
paddingBottom、 layout_marginBottom、
paddingLeft、 layout_marginBottom、
paddingRight、 layout_marginBottom
paddingTop
Width Width width、percentWidth layout_width
Height Height height、percentHeight layout_height
MaximumSize MaxWidth、MaxHeight maxWidth、maxHeight maxWidth、maxHeight
MinimumSize MinWidth、MinHeight minWidth、minHeight minWidth、minHeight
※ Adobe FlexとAndroidに関してはドキュメントで確認した
程度の情報のため、かなりあやしいです。ご注意ください。
- 41. ? 較表②
Windowsフォーム XAML Adobe Flex Android
絶対配置
デフォルト Canvas Canvas AbsoluteLayout
（ ? 推 奨）
相対配置
FlowLayoutPanel StackPanel Box LinearLayout
TableLayoutPanel Grid Grid TableLayout
SplitterPanel GridSplitter HDividedBox、 -
VDividedBox
FlowLayoutPanel WrapPanel Tile -
Dockプロパティ DockPanel - -
- - RelativeLayout
※ Adobe FlexとAndroidに関してはドキュメントで確認した
程度の情報のため、かなりあやしいです。ご注意ください。
