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

UXML 要素 ScrollView

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

Create a ScrollView

You can create a ScrollView with UI Builder, UXML, or C#. The following C# example creates a ScrollView with both horizontal and vertical scroll capabilities, that contains a title Label, and a number of Toggle elements:

var scrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
scrollView.style.width = 250;
scrollView.style.height = 400;

scrollView.Add(new Label("List of checkboxes:"));

for (int i = 0; i < 100; ++i)
{
    var toggle = new UnityEngine.UIElements.Toggle()
    { text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." };
    scrollView.Add(toggle);
}

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

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

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

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

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

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

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

To control the scroll speed, adjust the values of the following properties in UI Builder, UXML, or C# code. The higher the value, the faster the scrolling speed.

  • horizontal-page-size controls the speed of horizontal scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle). The speed is calculated by multiplying the page size by the specified value. For example, a value of 2 means that each scroll movement covers a distance equal to twice the width of the page.
  • vertical-page-size controls the speed of vertical scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle). The speed is calculated by multiplying the page size by the specified value. For example, a value of 2 means that each scroll movement covers a distance equal to twice the length of the page.
  • mouse-wheel-scroll-size controls the speed of scrolling when using the mouse wheel. The speed is calculated by dividing the specified value by 18, which corresponds to the default line height of 18px. For example, if you set the value to 36, each scroll movement covers a distance equivalent to two lines of content.

Note: You can also override the USS built-in variable –unity-metrics-single_line-height to control the speed of scrolling when using the mouse wheel. The mouse-wheel-scroll-size attribute takes precedence over the –unity-metrics-single_line-height USS variable.

ScrollView 内で要素を折り返す

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

To wrap visual elements inside a ScrollView, set the ScrollView’s content container flex-direction to row and flex-wrap to 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 This property controls the speed of the horizontal scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle), based on the size of the page.

When scrolling the page size will be applied to the offset for each scroll step, so the final offset will be the page size multiplied by the number of steps. SA: BaseSlider_1::ref::pageSize.
horizontal-scroller-visibility UIElements.ScrollerVisibility 横スクロールバーを表示するかどうかを指定します。
mode UIElements.ScrollViewMode Controls how the ScrollView allows the user to scroll the contents. ScrollViewMode The default is ScrollViewMode.Vertical. Writing to this property modifies the class list of the ScrollView according to the specified value of ScrollViewMode. When the value changes, the class list matching the old value is removed and the class list matching the new value is added.
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 This property controls the speed of the vertical scrolling when using a keyboard or the on-screen scrollbar buttons (arrows and handle), based on the size of the page.

The speed is calculated by multiplying the page size by the specified value. For example, a value of 2 means that each scroll movement covers a distance equal to twice the width of the page.
vertical-scroller-visibility UIElements.ScrollerVisibility 縦スクロールバーを表示するかどうか指定します。

継承された UXML 属性

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

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

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

名前 説明
content-container string 子要素はそれに追加されますが、通常は要素自体と同じです。
data-source Object Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children.
data-source-path string Path from the data source to the value.
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 Used for view data persistence, such as tree expanded states, scroll position, or zoom level.

This key is used to save and load the view data from the view data store. If you don’t set this key, the persistence is disabled for the associated VisualElement. For more information, refer to View data persistence.

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