【Unity】LINEっぽいチャットでScroll View チュートリアル①UIパーツ配置 - Unity(C#)初心者・入門者向けチュートリアルひよこのたまご

Unity 2019.2.0f1 Personal(2019年8月)

Scroll ViewとLayout系コンポーネントについて調べてきました！
実際にモノを作成していく中で理解が進むことは多いので、
学んだことを応用してまずはLINEっぽいチャットシステムを作ってみたいと思います！

f:id:hiyotama:20190821190159p:plain — LINEっぽいチャット

UIパーツを配置

まずはUIパーツを配置していきます〜
最初にChatSystemという名前のPanelを作成します。
ChatSystem(Panel)にはVertical Layout Groupを付けます。
f:id:hiyotama:20190821190536p:plain
Control Child SizeをWidth, Height共に有効にします。

続いてChatSystem(Panel)の下に以下3つのUIを作成します。
・Image(名前：Title)
・Scroll View(名前：ChatArea)
・Image(名前：Input)
f:id:hiyotama:20190821204123p:plain
ひとつずつ設定していきます〜

Title

・Layout Elementをつける。
Flexible Width有効、値は1
Flexible Height有効、値は0.08
f:id:hiyotama:20190821204203p:plain
・Title（Image）の子としてTextを作成する。
Image, Textを適当にデザイン（Image紺色, Text白色にしました。）

ChatArea

・Scroll RectのHorizontal無効、Vertical有効、Scrollbarは2つとも削除。
f:id:hiyotama:20190821204319p:plain
・LayoutElementをつける。
Flexible Width有効、値は1
Flexible Height有効、値は1
f:id:hiyotama:20190821192351p:plain

Input

・LayoutElementをつける。
Flexible Width有効、値は1
Flexible Height有効、値は0.08
f:id:hiyotama:20190821204203p:plain
・Input（Image）の子にCreate Emptyで空のUIパーツを作る。（名前：InputArea）
InputAreaのAnchor Presetはstretch * stretch
InputAreaに以下の設定のHorizontal Layout Groupをつける。
f:id:hiyotama:20190821204709p:plain
※親オブジェクトであるInputにHorizontal Layout Groupを付けるとLayout ElementとHorizontal Layout Groupが競合してしまうのか？想定通りのUIサイズにならなかったため、Input Areaを子に設定しました。
・更にInput Areaの子に以下のUIオブジェクトを作成し、それぞれにLayout Elementをつけます。
InputField
f:id:hiyotama:20190821205441p:plain
Button（名前：MineButton）
f:id:hiyotama:20190821205500p:plain
Button（名前：OthersButton）