テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】各要素の高さが変動するスクロールビューを使ってチャットっぽい何かを作る

f:id:tsubaki_t1:20151019013536p:plain

「高さの要素が異なる&テキストにある程度のマージンがあるリストビュー」を作る方法について紹介します。

リストビューを作る方法については、下の記事参照。

tsubakit1.hateblo.jp

作り方

こんな感じのスクロールビューを作ります。

各要素の高さに合わせて要素がサイズを調整してくれる奴です。各要素が自動でリサイズしているので、高さや幅が変形し行数が上下した場合もちゃんとレイアウトを整えてくれます。

f:id:tsubaki_t1:20151019014050g:plain

とりあえずスクロールビューを作ります。

 

今回は縦のスクロールビューを作るので、Canvas/Scroll View/Scrollbar Horizontalは削除します。

f:id:tsubaki_t1:20151019013940p:plain

Scrollbar Horizontal削除のついでにCanvas/Scroll ViewからHorizontalのチェックを外しHorizontal ScrollBarをNoneに設定します。

これで横方向にスクロール出来なくなりました

f:id:tsubaki_t1:20151019014505j:plain

Canvas/Scroll View/ViewPort/ContentVertical Layout GroupContent Size Fitterを追加します。

Vertical Layout GroupはChild Force ExpandのHightのチェックを外し、Content Size FitterはVertical FitをPerferred Sizeに設定します。

f:id:tsubaki_t1:20151019015121j:plain

Canvas/Scroll View/ViewPort/Contentの子オブジェクトとしてImageオブジェクトを作成し名前をElementに変更します(名前は任意)。

Elementの子オブジェクトとしてTextを追加します。

f:id:tsubaki_t1:20151019020045p:plain

このままだとテキストの大きさでElementのサイズが変更されないので、HorizontalLayoutGroupをElementに設定します。

その際、Child Force ExpandのHieghtのチェックを外します。テキストにマージンが欲しい場合は、Paddingで設定します。

f:id:tsubaki_t1:20151019015811p:plain

これでテキストの行数によってElementの高さが変動します。

f:id:tsubaki_t1:20151019020316p:plain

f:id:tsubaki_t1:20151019020325p:plain

 

あとはボタンを押したらテキストボックスに入力した項目を追加するようにします。

 

適当なButtonとInputFieldを追加します。

InputFieldは複数行入力できるように、Multi Line NewLineと設定します。

f:id:tsubaki_t1:20151019022027j:plain

下のコードを追加し、これを適当なGameControllerオブジェクトに追加します。

やっている事は単純で、「ElementをContent以下に複製する」だけです。

gist.github.com

あとはAddContent の内容を設定します。

InputはInput FieldContentはContentOriginalElementはElementElementOriginal TextはTextを設定します。

f:id:tsubaki_t1:20151019021910j:plain

最後にボタンを押した際に動作するようにします。

ボタンにイベントを追加し、AddContentコンポーネントOnSubmitを設定します。

f:id:tsubaki_t1:20151019022232p:plain

もう少し詳しい説明や調整については、要望があれば。

…実際問題、ほとんどの人はこの手法使わずスクリプトで位置やContentのサイズを何とかして実装してる気がするのですが、どうなんでしょう。

 

あとでコレとドッキングさせる予定