読者です 読者をやめる 読者になる 読者になる

とあるプログラマの備忘録

都内某所に住むプログラマが自分用に備忘録を残すという趣旨のブログです。はてなダイアリーから移動しました!

Unity4.6 uGUIでサイズ可変な共通ダイアログを作成する

こんなダイアログを作成するのですが、 中の文言がどの位になるのか分からないのでサイズを可変にならないといけません。 今回はuGUIをつかってこれを作成します。

f:id:raharu0425:20141213115227p:plain

素材を作成します

f:id:raharu0425:20141213115344p:plain

これを切り抜いて5つのパーツを作成します。

f:id:raharu0425:20141213115744p:plain

これに名前を付けてUnityに取り込みます。
※ここまでは別段NGUIとなんら変わりません。

Unityで組み立て

Canvasの下に親になるパネルを作成します

f:id:raharu0425:20141213120334p:plain

以後Anchor Presetsが肝心です。

f:id:raharu0425:20141213120546p:plain

赤い線のアンカーは親のUIに対して座標固定で表示するという事です。

以下はこの親のパネルの子として作成します

f:id:raharu0425:20141213121645p:plain

headerの作成

f:id:raharu0425:20141213121041p:plain

f:id:raharu0425:20141213121716p:plain

アンカーは親のパネルに対して中心上に固定ストレッチなしです。

footerの作成

f:id:raharu0425:20141213121302p:plain

f:id:raharu0425:20141213121823p:plain

こちらは中心下に固定ストレッチなし

bodyの作成

f:id:raharu0425:20141213121524p:plain

f:id:raharu0425:20141213121905p:plain

bodyは親サイズが変わったら可変してほしいので
中心の上下ストレッチをつけます。

これに他の部品も付ける

メッセージエリアは中心上下のストレッチ

タイトルラベルは中心上に固定

OKボタンは中心下に固定

完成するとこうなります。

この状態になれば上下ストレッチが可能なダイアログが完成します。


uGUIDialog - YouTube

これでbodyに例えばスクロール範囲を指定して中身をスクロールすることもできるので 多様的に使えるダイアログが完成しました。

この後OKボタンやCloseボタンに通知処理を書いて ボタン押下後の呼び出し処理などを追加するのですが、それはまた別の機会に。。