Unity

【Unity】uGUIスクロールビューの作り方

ugui-make-scrollview

標準機能。ただのスクロールビューの作り方です。コード書きません。

なにも見ずに一から自分で作ってみたので、その備忘録です。

スクロールビューの作成方法

f:id:min0124:20180327222422p:plain

リストの作成

f:id:min0124:20180327222520p:plain

  • GameObject>UI>Panelから下敷きを作成します。サイズは600×384。名前はScrollView

f:id:min0124:20180327222733p:plain

  • 子にGameObject>CreateEmptyでスクロールエリアを作成します。下敷きよりすこし内側に表示させたいので、Rect Transformの上下にストレッチをかけてから、値を16入れてます。名前はViewport

f:id:min0124:20180327224618p:plain

  • さらに子にGameObject>CreateEmpty。レイアウトエリアを作成します。Grid Layout GroupとContent Size Fitterを追加。Rect Transformは横にストレッチかけて、Pivotを上あわせにします(上にしないと余白が少しずれる)Content Size FitterはVertical FitだけPrefered Sizeに。名前はContent

※今回あえて、Vertical Layout Groupではなく、Grid Layout Groupにしています。

f:id:min0124:20180327223214p:plain

  • さらにさらに子にスクロールさせたいアイテムを作成(GameObject>UI>Image/Text)サイズは256×96。名前はItem_1にして、12個複製します。

  • ContentのGrid Layout GroupのCell SizeにItemのサイズ256×96を入力。さらにPadding LeftとSpacingに16を入力。ConstraintをFixed Column Countを2にして2行を維持したまま6列を作ります。

f:id:min0124:20180327223751p:plain

  • 最後にScrollViewにScroll Rectのコンポーネントをアタッチ。Horizontalのチェックをはずし、contentとviewportとそれぞれ登録。

f:id:min0124:20180327222810p:plain

スクロールバーの作成

f:id:min0124:20180327223832p:plain

  • ScrollViewの子にGameObject>UI>Imageから下敷きを作成。右Pivot,上下ストレッチ。余白は右-24、上下16。名前はScrollbar。

f:id:min0124:20180327223910p:plain

  • Scrollbarの子にGameObject>UI>Imageを作成。カラーは黒に。左右にストレッチ。遊びで上下左右にストレッチ3。名前をHandle。

f:id:min0124:20180327223938p:plain

  • ScrollbarにScrollbarのコンポーネントを追加。Handle RectにHandleを登録し、DirectionをBottom To Topに。

※切り替えると画像の縦横が入れ替わるので、調整する

  • 最後にScrollViewのScroll RectのVertical ScrollbarにScrollbarを登録。

f:id:min0124:20180327225505g:plain

以上です。

ABOUT ME
すいみん
名前:すいみん 東京在住のデザイナー DTP・映像・3D・プログラミングまで、 なんでも自分で試して作ることが好きです。 ブログはその備忘録です。