読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

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

UnityのuGUIでスクロールビューを作る

Unity4.6で追加したuGUIでスクロールバーを作る方法について紹介します。

大体こんな感じのスクロールバーを作ります。

f:id:tsubaki_t1:20141218024718g:plain

作り方

まず、リストに表示するノードのプレハブを用意していきます。

  1. 適当な横長のImageを用意します。名前はNodeとします。

    f:id:tsubaki_t1:20141218030126p:plain

  2. 左の方にアイコン(Image)、真ん中にテキスト(Text))、右にチェックボックス(Toggle)を配置します。これらは全てNodeの子オブジェクトとして配置します.

    f:id:tsubaki_t1:20141218030136p:plain

  3. NodeオブジェクトにLayoutElementコンポーネントを追加します。
  4. LayoutElementのMinHeightにノードの高さ(Height)を指定します。

    f:id:tsubaki_t1:20141218030711p:plain

  5. 作ったノードはプレハブにします(ProjectビューへD&D)

 

次にスクロールビューを作ります。

  1. Canvas以下のパスにGameObjectを作ります(Create Empty Child等で)
    名前はScrollView
  2. ScrollViewの範囲を、スクロールビューを表示したい範囲に設定します。
  3. ScrollViewにScrollRectとMaskとImageコンポーネントを追加します

    f:id:tsubaki_t1:20141218032007p:plain

  4. ScrollViewの子オブジェクトとして名前がContentのGameObjectを作ります
  5. ContentのRectTransformはのPivotを(x:0.5, y:1)とします。
    (リストビューの開始位置を一番上にしています。スタート時を下にしたい場合は(x:0.5, y:0))

    f:id:tsubaki_t1:20141218032029p:plain

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

    f:id:tsubaki_t1:20141218032121p:plain

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

    f:id:tsubaki_t1:20141218032043p:plain

 

後はContentの下にNodeを沢山配置します。(範囲外のノードはマスクでカリングされます)

これでスクロールするビューが出来上がりました。

f:id:tsubaki_t1:20141218032603p:plain

スクリプトからノードを生成する

次にノードをスクリプトから生成します。

  1. ContentオブジェクトにScrollControllerコンポーネントを追加します。コードは下
  2. prefabに先ほど作ったNodeプレハブを指定します。


uGUIのノードをダイナミックに作りたい場合のアレ。

今回の作り方はノードをスクリプトで作る前提で書いてるので、これで行けます。

動的なノードのサイズ変更とか、ノードサイズをテキストにフィットさせる方法とか、無限スクロールとかは要望があれば書きます。

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

参考


unity4.6 beta / uGUI スクロール編 - petlust


【Unity】Unity 4.6 新機能「SetParent」 - コガネブログ


【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(前編) | お仕事募集中


【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(後編) | お仕事募集中