© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
第 3回‟ ユーザーインターフェイス パーツの配置„
シーズン1:わずかなプログラミングで完成! 最初の一歩から始めてゲームを作ろう!
2© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
Delphi / C++Builder Starter チュートリアルシリーズ
シーズン 1 : 2016 年 10 月 24 日 ~ 12 月 26 日 全 10 回
時間 :毎週 月曜 17 時 00 分 ~17 時 30 分
ねらい :一から学んでゲーム制作までシーズン 1
第 1 回2016 年 10 月
24 日 無料で始めよう アプリ作成第 2 回 10 月 31 日 ユーザーインターフェイス パーツ基礎第 3 回 11 月 7 日 ユーザーインターフェイス パーツの配置第 4 回 11 月 14 日 UI アニメーションの設定第 5 回 11 月 21 日 イベントに合わせて動かしてみよう第 6 回 11 月 28 日 ミニゲームを作ってみよう
第 7 回 12 月 5 日 シューティングゲーム キャラクターを貼り付けよう そして動かそ
う第 8 回 12 月 12 日 シューティングゲーム 敵を動かしてみよう第 9 回 12 月 19 日 シューティングゲーム 敵を攻撃しよう そして完成第 10
回 12 月 26 日 あなたの近くのコミュニティ - 勉強会に参加してみようセミナー情報 : http://forms.embarcadero.com/starter-tutorial-webinar
3© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
第 3 回 「ユーザーインターフェイス パーツの配置」 今日のねらい
• コンポーネント配置の要素を知る• コンポーネントの親子関係• 配置するためのプロパティ設定
実施内容• コンポーネントの配置とプロパティ設定の変更• コンポーネントの親子設定を実施
4© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
無料版 Delphi 10.1 Berlin Starter Edition 入手方法
• シリアルキーを知らせるメール内にも再ダウンロードリンク有• EDN* = Embarcadero Developers Network ( エンバカデロ デベロッパーズ ネット
ワーク )
エンバWeb 製品 Delphi Starter
バナー 登録 Get
無料で使える開発環境をダウンロード
EDN* に登録済の方は EDN アカウントでダウンロード可
登録完了後、自動でインストーラーのダウンロード開始
インストール時にシリアルキーを入力
登録時のメールアドレスにシリアルキーが配信される
5© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
コンポーネントの配置 ・レイアウト 基礎 コンポーネントを狙った位置に表示する 4 つのプロパティ要素
1. Anchors ( アンカー ) 2. Alignments ( アライメント )3. Padding ( パディング )4. Margin ( マージン )
コンポーネントの位置を示す座標プロパティ
1. Position (ポジション)
参考URL: http://embt.co/firemonkey-layout
6© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
1. Anchors (アンカー) 親項目のそれぞれの辺と結び付けて配置を設定するもの
デフォルト設定で Top と Left が ON に設定されている
親項目の枠サイズ変更に追従して位置が変化(結び付けされた一辺の移動に追従)
いずれのコントロールも 0 ~ 4 個のアンカーを設定可能
参考URL: http://embt.co/firemonkey-anchors
プロパティ 項目 意味・動作
Top 親フォーム・コントロールの上部と結び付け
Bottom 親フォーム・コントロールの下部と結び付け
Left 親フォーム・コントロールの左側と結び付け
Right 親フォーム・コントロールの右側と結び付け
7© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
2. Align (アラインメント) コントロールを親項目内の特定の位置に整列・配置
(デフォルトは None )
参考URL: http://embt.co/firemonkey-alignlayout
意味・動作 プロパティ設定 名称
親項目一辺に寄せて、空きサイズいっぱいに表示 Top, Bottom, Left, Right
親項目内で最大化(ただし縦横比を維持) Fit, FitLeft, FitRight
親項目の一辺に寄せて最大化 MostBottom, MostTop, MostLeft, MostRight
一方向のみをリサイズ(幅または高さ) Vertical, VertCenter, Horizontal, HorzCenter
その他 Client, Center, Contents, Scale
8© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
3. Margins / 4. Padding (余白)
Margins▪ 項目間(および親項目)の余白
http://embt.co/firemonkey-margins
Padding ▪ 親から見た子項目に対する余白
http://embt.co/foremonkey-padding
パディング設定ありの親コンポーネント
マージン設定あり子コンポーネント
Align 設定がalClient の場合
マージン設定無子コンポーネント
Align 設定がalRight の場合
Margins.Top
Margins.Right
Margins.Bottom
Margins.Left
Padding.Top
Padding.Bottom
Padding.LeftPadding.Right
9© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
レイアウトの実践 コンポーネントのレイアウトを制御してみよう!
マルチデバイスアプリケーションの新規作成
複数のコンポーネントをドラッグ&ドロップ
オブジェクトのプロパティで位置指定
コンポーネントの「親 - 子」関係を設定
10© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
コンポーネントの配置 コンポーネントを狙った位置に表示する 4 つの要素
参考URL: http://embt.co/firemonkey-layout
プロパティ 設定効果
Anchors ( アンカー ) 親の辺とコンポーネント自身の辺を結び付けを設定
Alignments ( アライメント ) コンポーネントの位置と、フィット方法を設定
Padding ( パディング ) コンポーネントの内側に配置される子への余白設定
Margin ( マージン ) コンポーネント自身の外側へ持つ余白の設定
11© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
参考資料
FireMonkey のレイアウト戦略• http://docwiki.embarcadero.com/RADStudio/Berlin/ja/FireMonkey_
のレイアウト戦略
FireMonkey コントロールの配置• http://docwiki.embarcadero.com/RADStudio/Berlin/ja/FireMonkey_
コントロールの配置
12© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
本日のセミナー内容は弊社ブログに掲載予定
[ コミュニティ ] ↓
[ 日本人ブログ ]
実施内容の再視聴 エンバカデロ Web サイト : http://forms.embarcadero.com/starter-tutorial-webinar [ リソース ] – [ イベント ] のページに再視聴 ( オンデマンド)の情報記載予定
実施内容サマリー
• Community embarcadero ( コミュニティ エンバカデロ ) に Web リンク、サンプルコード情報等
http://community.embarcadero.com/
「エンバカデロ」で検索
13© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
第 3 回 「ユーザーインターフェイス パーツの配置」まとめ 今日のねらい
• コンポーネント配置の要素を知る• 配置するためのプロパティ設定• コンポーネントの親子関係
実施内容• コンポーネントの配置とプロパティ設定の変更• コンポーネントの親子設定を実施
14© 2016 Embarcadero Technologies, Inc. All rights reserved. Proprietary and confidential.
次回は11 月 14 日(月) 17:00
より
“UI アニメーションの設定„