Version: 2022.3
言語: 日本語
UXML 要素 RepeatButton
UXML 要素 Scroller

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 属性

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

名前 説明
elasticity float ユーザーがスクロールビューの境界を越えてスクロールしようとした時に使用される弾性の量。

弾性は touchScrollBehavior が Elastic に設定されている場合にのみ使用されます。
horizontal-page-size float このプロパティは、キーボードまたは画面上のスクロールバーボタン (矢印とハンドル) 使用時に、ページのサイズに基づいて縦スクロールの速度を制御します。
horizontal-scroller-visibility UIElements.ScrollerVisibility 横スクロールバーを表示するかどうかを指定します。
mode UIElements.ScrollViewMode ScrollView がユーザーに対して提供するコンテンツスクロール方法を制御します。ScrollViewMode

デフォルトは ScrollViewMode.Vertical です。このプロパティに書き込むと、ScrollViewMode の指定値に従って ScrollView のクラスリストが変更されます。値が変更されると、古い値に一致するクラスリストが削除され、新しい値に一致するクラスリストが追加されます。
mouse-wheel-scroll-size float このプロパティは、マウスのスクロールホイール使用時にのみ、ページのサイズに基づいてスクロール速度を制御します。これは –unity-metrics-single_line-height USS 変数よりも優先されます。
nested-interaction-kind UIElements.ScrollView+NestedInteractionKind スクロールが、ネストされた ScrollView の限界に達したときに使用する動作です。
scroll-deceleration-rate float ユーザーがタッチ操作でスクロールした後の、スクロールの動きの減速の度合いを制御します。

deceleration rate は 1 秒あたりの速度減少です。値が 0.5 の場合、1 秒ごとに速度が半分になります。値が 0 の場合、スクロールが直ちに停止します。
vertical-page-size float このプロパティは、キーボードまたは画面上のスクロールバーボタン (矢印とハンドル) の使用時に、ページのサイズに基づいて縦スクロールの速度を制御します。
vertical-scroller-visibility UIElements.ScrollerVisibility 縦スクロールバーを表示するかどうか指定します。

継承された UXML 属性

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

名前 説明
focusable boolean 要素がフォーカス可能である場合は true。
tabindex int フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。

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

名前 説明
content-container string 子要素はそれに追加されますが、通常は要素自体と同じです。
name string この VisualElement の名前。

このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。
picking-mode UIElements.PickingMode mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。
style string この要素のスタイルオブジェクトへの参照。

C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。
toolbar string ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。
usage-hints UIElements.UsageHints VisualElement の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切なUsageHints を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの UsageHints が内部的に無視される可能性があることに留意してください。
view-data-key string ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。

これは、ビューデータストアからビューデータを保存/ロードするために使用されるキーです。このキーを設定しないと、この VisualElement の永続性が無効になります。

USS クラス

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

C# プロパティ USS セレクター 説明
ussClassName .unity-scroll-view この型の要素の USS クラス名。
viewportUssClassName .unity-scroll-view__content-viewport この型の要素のビューポート要素の USS クラス名。
horizontalVariantViewportUssClassName .unity-scroll-view__content-viewport--horizontal Viewport が Horizontal モードの場合に追加される USS クラス名。ScrollViewMode.Horizontal
verticalVariantViewportUssClassName .unity-scroll-view__content-viewport--vertical Viewport が Vertical モードの場合に追加される USS クラス名。ScrollViewMode.Vertical
verticalHorizontalVariantViewportUssClassName .unity-scroll-view__content-viewport--vertical-horizontal Viewport が Horizontal と Vertical 両方のモードの場合に追加される USS クラス名。ScrollViewMode.VerticalAndHorizontal
contentAndVerticalScrollUssClassName .unity-scroll-view__content-and-vertical-scroll-container この型の要素内のコンテンツ要素の USS クラス名。
contentUssClassName .unity-scroll-view__content-container この型の要素内のコンテンツ要素の USS クラス名。
horizontalVariantContentUssClassName .unity-scroll-view__content-container--horizontal ContentContainer が Horizontal モードの時に追加される USS クラス名。ScrollViewMode.Horizontal
verticalVariantContentUssClassName .unity-scroll-view__content-container--vertical ContentContainer が Vertical モードの時に追加される USS クラス名。ScrollViewMode.Vertical
verticalHorizontalVariantContentUssClassName .unity-scroll-view__content-container--vertical-horizontal ContentContainer が Horizontal と Vertical 両方のモードの時に追加される USS クラス名。ScrollViewMode.VerticalAndHorizontal
hScrollerUssClassName .unity-scroll-view__horizontal-scroller この型の要素の横スクロールバーの USS クラス名。
vScrollerUssClassName .unity-scroll-view__vertical-scroller このタイプの要素の縦スクロールバーの USS クラス名。
horizontalVariantUssClassName .unity-scroll-view--horizontal ScrollView が Horizontal モードの時に追加される USS クラス名。ScrollViewMode.Horizontal
verticalVariantUssClassName .unity-scroll-view--vertical ScrollView が Vertical モードの時に追加される USS クラス名。ScrollViewMode.Vertical
verticalHorizontalVariantUssClassName .unity-scroll-view--vertical-horizontal ScrollView が Horizontal と Vertical 両方のモードの時に追加される USS クラス名。ScrollViewMode.VerticalAndHorizontal
scrollVariantUssClassName .unity-scroll-view--scroll
disabledUssClassName .unity-disabled ローカルで無効にされた要素の USS クラス名。

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

その他の参考資料

UXML 要素 RepeatButton
UXML 要素 Scroller