メニュー

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

eyecatch_unity

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

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

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

目次

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

リストの作成

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

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

  • さらに子に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にしています。

  • さらにさらに子にスクロールさせたいアイテムを作成(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列を作ります。

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

スクロールバーの作成

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

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

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

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

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

以上です。

全記事一覧

  • URLをコピーしました!

Unityに関する参考記事・ツール・書籍のまとめ

Unityの参考書籍

著:北村 愛実
¥2,673 (2024/11/14 08:30時点 | Amazon調べ)
\PayPayポイント最大23.5%!/
Yahooショッピング
著:吉谷幹人, 著:布留川英一, 著:一條貴彰, 著:西森丈俊, 著:藤岡裕吾, 著:室星亮太, 著:車谷勇人, 著:湊新平, 著:土屋つかさ, 著:黒河優介, 著:中村優一, 著:牙竜, 著:コポコポ, 著:かせ, 著:hataken, 著:monmoko
¥4,400 (2024/11/16 04:20時点 | Amazon調べ)
\PayPayポイント最大23.5%!/
Yahooショッピング
著:森哲哉, 著:布留川英一, 著:西森丈俊, 著:車谷勇人, 著:一條貴彰, 著:打田恭平, 著:轟昂, 著:室星亮太, 著:井本大登, 著:細田翔, 著:西岡陽, 著:平井佑樹, 著:コポコポ, 著:すいみん, 著:Maruton, 著:karukaru, 著:ハダシA, 著:notargs, 著:EIKI`, 著:おれんじりりぃ, 著:黒河優介, 著:中村優一, 著:藤岡裕吾
¥8,408 (2024/11/14 08:30時点 | Amazon調べ)
\PayPayポイント最大23.5%!/
Yahooショッピング
ボーンデジタル
¥5,060 (2024/11/17 23:21時点 | Amazon調べ)
\PayPayポイント最大23.5%!/
Yahooショッピング
技術評論社
¥4,620 (2024/11/14 08:30時点 | Amazon調べ)
\PayPayポイント最大23.5%!/
Yahooショッピング

Unityの人気アセット

目次