UXML 要素 ScrollView

ScrollView は、そのコンテンツをスクロール可能な領域内に表示します。ScrollView にコンテンツを追加すると、そのコンテンツが ScrollView のコンテンツコンテナ (#unity-content-container) に追加されます。

スクロールバーの可視性を管理する

スクロールバーの移動方向の指定や、水平あるいは垂直のスクロールバーを表示するかどうかの指定、およびスクロールバーの速度の制御が行えます。

UI Builder でスクロールバーの移動方向を設定するには、ScrollView の Inspector ウィンドウで、以下のいずれかの Mode オプションを選択します。

• Vertical (縦) (デフォルト)
• Horizontal (横)
• Vertical and Horizontal (縦と横)

UI Builder でスクロールバーの可視性を設定するには、ScrollView の Inspector ウィンドウで、 Horizontal Scroller Visibility または Vertical Scroller Visibility の以下のオプションのいずれかを選択します。

• Auto (自動) (デフォルト)
• Always Visible (常に表示)
• Hidden (非表示)

スクロール速度を制御する

ScrollView のスクロール速度を制御するには、USS ビルトイン変数 --unity-metrics-single_line-height をオーバーライドします。デフォルト値は 18px です。以下の例を参照してください。

:root {
--unity-metrics-single_line-height: 500px;
}

重要: CloneTree() をパラメータなしで使用した場合、あるいは Instantiate() を使用した場合、行の高さの伝搬を停止する TemplateContainer が追加されます。代わりに CloneTree(root) を使用してください。

ScrollView 内で要素を折り返す

ScrollView 内でビジュアル要素を折り返して、連続して表示することができます。行が一杯になると、次の行に続けて要素が表示されます。

ScrollView 内のビジュアル要素を折り返すには、ScrollView のコンテンツコンテナの flex direction を Row に設定し、flex wrap を Wrap に設定します。

USS:

.unity-scroll-view__content-container {
    flex-direction: row;
    flex-wrap: wrap;
}

C#:

scrollview.contentContainer.style.flexDirection = FlexDirection.Row;
scrollview.contentContainer.style.flexWrap = Wrap.Wrap;

ScrollView 内の要素のテキストを折り返す

ScrollView 内の要素のテキスト (例: Label 要素のテキスト) を折り返すには、次のようにします。

1. 以下のいずれかの方法で、Label 要素のスタイルを設定します。
   • UI Builder の Label の Inspector ウィンドウで、Text > Wrap > normal と選択します。
   • USS、UXML、または C# で、Label 要素にスタイル white-space: normal; を適用します。
2. ScrollView 内にコンテナとして VisualElement を作成します。ScrollView 内の元々のコンテナ要素には境界が設定されていない (つまりサイズが無限大である) ため、テキストが適切に折り返されません。このコンテナ VisualElement は、中でテキストを折り返すための有限のサイズを提供します。
3. Label を VisualElement コンテナに追加します。

例

• スクロールビュー内でコンテンツを折り返す: この例は、スタイルを使用してスクロールビュー内のコンテンツを折り返す方法を説明するものです。

C# のクラスと名前空間

C# クラス: ScrollView
名前空間: UnityEngine.UIElements
基本クラス: VisualElement

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

この要素は、VisualElement から以下の属性も継承します。

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

また、Inspector や UI Toolkit Debugger の Matching Selectors セクション を使用して、どの USS セレクターが VisualElementのコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。

その他の参考資料

• ListView