Categories: unity：総合

【unity】スクロールビューの作り方を世界一丁寧に説明する

スクロールビューの作り方を画像多めに世界一丁寧に行います。

uGUIを使用してのScrollView。

わからない事や誤りあったら教えてください

使用バージョン Unity 2018.1.0f2

完成図

まずはリストに並んでいるノードを作ります。

ノードの作成

リストに表示するノード(リストに並ぶ物）を作ります

◆unityメニュー GameObject ＞ UI ＞ Imageを作成
名前を”Image”→”Node”とします。
座標 PosX PosYを0に、Width 150、Height 40に設定します。

真っ白だと後から並べた時にわかりにくいので、イメージを設定します。
上画像の花丸部分の丸ボタン押してsprite選択画面をだして「InputFieldBackgroud」を設定します

◆先程作ったHierarchyビューの”Node”の上で右クリックして、UI ＞ Textでテキストを作成します

真ん中中央揃えにして(Paragraph>Alignment部分)、FontSize 20、Textは「ノード」としましょう

◆NodeオブジェクトにAddComponentでLayoutElementコンポーネントを追加します。

◆LayoutElementのMinHeightにチェックを付けてノードの高さ（Height)を40に指定します。

・作った”ノード”をプレハブ化します。Projectビューへドラッグ＆ドロップ

この動作でプレハブ化完了なので、Hierarchyビューの”ノード”は削除します

（Nodeを選択して、deleteキー or 右クリックからdelete）

これでノードプレハブ作成はおしまい！

次に作ったこのノードを並べる為のスクロールビューの作成に進みます。

スクロールビューの作成

◆Canvasの上で右クリックして、CreateEmpty(空のオブジェクト)作成
名前は”ScrollView”とします

ScrollViewのWidthとHeightを200に設定します

◆“ScrollView”にコンポーネント３つ追加
・”ScrollView”にAdd Componentで“ScrollRect”を追加
・同じく”ScrollView”にAdd Componentで“Mask”を追加
・更に”ScrollView”にAdd Componentで“Image”を追加
→ Imageの色をわかり易くする為に黒くします

◆ScrollViewの子オブジェクトとして名前が「Content」のGameObjectを作ります
（ScrollView上で右クリック＞ CreateEmpty）

「Content」のRectTransformのPivotを(x:0.5, y:1)としましょう。

◆Contentに
VerticalLayoutGroupコンポーネント追加
ContentSizeFitterコンポーネントを追加
ContentSizeFitterのVerticalFitをPreferred sizeに設定します。

◆ScrollRectのContentにContentオブジェクトを指定します。

◆Contentの下にNodeを沢山配置します。とりあえず8個配置します。

下図を参考にNodeプレハブをContent下に置くのを8回繰り返してください。
※範囲外のノードはMaskでカリングされます

◆このままでは左右にもスクロールしてしまうので、ScrollViewのHorizontalのチェックをはずします

ここまでを一度実行しましょう。

これでスクロールビューができました！
次にスクロールバーを追加します