中文

English

中文

English

Appearance

简介 ​

可滚动界面（Scroll View）控件类型是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。

【UIEditor_ScrollView001.png】

默认 可滚动界面（Scroll View）控件类型实例化的 UI 对象效果。

如有需要在可滚动界面中显示的 UI 对象（UI Object），请将该 UI 对象添加为 可滚动界面（Scroll View）控件类型的 UI 对象的子级。在滚动界面中显示的 UI 对象也称之为可滚动界面的“内容”。

【UIEditor_ScrollView002.png】

可滚动界面（Scroll View）控件类型实例化的 UI 对象，在添加了 图片（Image）控件类型的子级 UI 对象后的显示效果。

构成 ​

可滚动界面（Scroll View）控件类型的 UI 对象（UI Object）由两个 图片（Image）控件类型的 UI 对象，两个 滚动条（Scroll Bar）控件类型的 UI 对象，以及一个 遮罩（Mask）控件类型的 UI 对象组成。可以通过 UI 对象展开子节点 功能进行编辑，具体展开方法请参阅 展开子节点 章节。

【UIEditor_ScrollView003.png】

默认 可滚动界面（Scroll View）控件类型实例化的 UI 对象展开子节点后的层级结构。

  1. __BG__ UI 对象，是 图片（Image）控件类型的 UI 对象，用于显示可滚动界面的背景图片，该背景图片不会随内容板块变换而变换。
  2. __Mask__ UI 对象，是 遮罩（Mask）控件类型的 UI 对象，用于裁剪界面显示的内容。
  3. __Content__ UI 对象，是 图片（Image）控件类型的 UI 对象，其尺寸决定了界面中显示内容的范围。默认情况下，__Content__ UI 对象的矩形变换框为包含其所有子级 UI 对象的矩形。
  4. __VScrollbar__ UI 对象，是 滚动条（Scroll Bar）控件类型的 UI 对象，用于显示和定位浏览内容的 纵向（Vertical）位置。
  5. __HScrollbar__ UI 对象，是 滚动条（Scroll Bar）控件类型的 UI 对象，用于显示和定位浏览内容的 横向（Horizontal）位置。

CAUTION

与其他控件类型不同，可滚动界面（Scroll View）控件类型的 UI 对象的所有子级 UI 对象，将在 可滚动界面（Scroll View）控件类型的 UI 对象展开子节点时，显示为 __Content__ UI 对象的子级 UI 对象，而非可滚动界面（Scroll View）控件类型的 UI 对象的子级对象。

--------------
比如命名为 Scroll_View_1 的 可滚动界面（Scroll View）控件类型的 UI 对象，有一个命名为 Image_1 的 图片（Image）控件类型的子级 UI 对象。其层级结构在 层级窗口（Hierachy）显示如下：
【UIEditor_ScrollView004.png】

当对 Scroll_View_1 UI 对象展开子节点后，层级窗口（Hierachy）显示 Image_1 父级对象是命名为 __Content__ 的 UI 对象，同时 __Content__ UI 对象是 Scroll_View_1 UI 对象的子级 UI 对象。
【UIEditor_ScrollView005.png】
--------------

因此在 可滚动界面（Scroll View）控件类型的 UI 对象展开子节点后，如果您想添加可滚动界面中显示的内容，您需要将新添加的 UI 对象添加为 可滚动界面（Scroll View）控件类型的 UI 对象下的  __Content__ UI 对象的子级。

也因为这个原因，使用代码动态获取 可滚动界面（Scroll View）控件类型的 UI 对象的子级 UI 对象，需要先读取隐藏的 ScrollView/__Mask__/__Content__/ 后获取。如 UI 的层级结果如图：

【UIEditor_Controls006.png】

需要获取可滚动界面（Scroll View）控件类型的 UI 对象 ScrollView 的子级 UI 对象 Image。代码示例如下：

typescript
class GetScrollViewChild extends Component {

    //定义私有变量保存 UI 组件类（UI Component）;
    private _uiComponent: UIComponent;
    //定义私有变量保存 UI 画布;
    private _uiCanvas: Canvas;
    //定义私有变量保存可滚动界面的子级 UI 对像 Image;
    private _image:Image;

    /*
    编辑运行时事件;
    */
    OnStart(): void {
        //获取 UI 组件类（UI Component）并将其保存为 _uiComponent 私有变量;
        this._uiComponent = this.gameObject.GetComponent(UIComponent);
        //获取 UI 画布并将其保存为 _uiCanvas 私有变量;
        this._uiCanvas = this._uiComponent.canvas;
        //获取可滚动界面控件类型的 UI 对象命名为 Image 的子级 UI 对象
        this._image = this._uiCanvas.FindChild(Image,"ScrollView/__Mask__/__Content__/Image");
    }

    OnUpdate(): void {
    }

}

属性 ​

该控件类型的 UI 对象可配置的属性分为以下四个类别：

【UIEditor_Controls007.png】

  1. 可滚动界面内容板块移动相关的属性。
  2. 可滚动界面背景图片设置属性。
  3. 可滚动界面水平和垂直滚动条相关设置属性。
  4. 可滚动界面内容板块相关设置属性。

内容板块移动相关属性 ​

可滚动界面移动相关的属性包含以下内容。

【UIEditor_Controls008.png】

名称描述
水平位置（Horizontal）布尔值类型属性值，设置可滚动界面是否允许横向滚动。
True.png 勾选，界面内容可横向（X 轴方向）滚动。
False.png 不勾选，界面内容在横向（X 轴方向）不可滚动。
垂直位置（Vertical）布尔值类型属性值，设置可滚动界面是否允许纵向滚动。
勾选，界面内容可纵向（Y 轴方向）滚动。
不勾选，界面内容在纵向（Y 轴方向）不可滚动。
移动类型（Movement Type）设置界面滚动的方式。
· 不约束（Unrestricted），可滚动界面的内容可无边界滚动。
· 回弹（Elastic），可滚动界面的内容滚动到内容界面的边界有回弹动画。
· 约束（Clamped），强制内容保持在可滚动界面的矩形变换框边界内。
弹性（Elasticity）设置回弹所需要的时间。属性值为浮点数，单位是回弹的秒数。如果属性值为负数，表示瞬间回弹。仅在 移动类型（Movement Type）属性值为 回弹（Elastic）时此属性才会显示且可以编辑。
减速率（Deceleration Rate）设置内容停止滚动的速率。属性值为浮点数，取值范围是 0 至 1，速率为 0 将立即停止移动。速率为 1 表示移动永不减速。
滚动灵敏度（Scroll Sensitivity）属性值越高，表示灵敏度越高。

背景图片设置属性 ​

可滚动界面的背景图片本质是一个 图片（Image）控件类型，因此其设置属性与图片控件类型的属性一致，具体可以参与 图片 章节。

滚动条相关属性 ​

可滚动界面水平和垂直滚动条相关可设置的属性是相同的，其包含以下属性。

【UIEditor_Controls009.png】

名称描述
可视性（Visibility）设置滚动条是否应在不需要时自动隐藏以及是否还展开对应滚动条。
· 自动隐藏和展开（Auto Hide And Expand），如果对应的滚动条 数值（Value）属性为 1 时（即可滚动界面的内容在该滚动条方向完全显示在可滚动界面内），则对应的滚动条将自动隐藏，否则对应的滚动条将展开显示。
· 隐藏（Hide），对应的滚动条将会一直处于隐藏状态，不再展开显示。
· 持续展开（Permanent），始终显示对应的滚动条，即使对应的滚动条 数值（Value）属性为 1 （即可滚动界面的内容在该滚动条方向完全显示在可滚动界面内）。
间距（Space）滚动条与视口之间的空间。属性值为整数类型，默认值为 -3。
背景图片（Texture 2D）可用于分配给对应滚动条背景的 2D 贴图资产，可从 项目窗口（Project）将 2D 贴图资产拖入，或点击打开列表选择 2D 贴图资产。2D 纹理属性支持 PNG，JPG，TGA，TIF 格式图片导入而生成的 2D 贴图资产，具体导入方法和限制请参阅 2D 贴图导入 章节。
尺寸（Offset）设置对应的滚动条背景图片的尺寸，属性值为 二维向量（Vector 2）。可分别设置 X 和 Y 方向的尺寸，单位为像素。
控制柄图片（Texture 2D）可用于分配给对应滚动条控制柄的 2D 贴图资产，可从 项目窗口（Project）将 2D 贴图资产拖入，或点击打开列表选择 2D 贴图资产。2D 纹理属性支持 PNG，JPG，TGA，TIF 格式图片导入而生成的 2D 贴图资产，具体导入方法和限制请参阅 2D 贴图导入 章节。
尺寸（Offset）设置对应的滚动条控制柄图片的尺寸，属性值为 二维向量（Vector 2）。可分别设置 X 和 Y 方向的尺寸，单位为像素。

内容板块相关设置属性 ​

可滚动界面内容板块的尺寸和本地坐标，会随着添加在可滚动界面控件类型的 UI 对象子级的 UI 对象整体尺寸（刚好包含所有子级的 UI 对象的矩形尺寸）和几何中心进行变换。

可滚动界面包含以下内容板块相关属性。

【UIEditor_Controls010.png】

名称描述
尺寸（Size）手动设置内容板块的尺寸，属性值为 二维向量（Vector 2）。可分别设置 X 和 Y 方向的尺寸，单位为像素。当可滚动界面的内容发生了变化，如新增、减少了内容（即可滚动界面控件类型的 UI 对象所有子级的 UI 对象），或内容发生变换（更改了位置、锚点或尺寸）。此属性将会自动更改为刚好包含所有内容的矩形尺寸。

可滚动界面控件类型的 UI 对象在 检视窗口（Inspector）可设置属性是最基础的相关属性，如果需要对该 UI 对象进行更细致的编辑，建议对该 UI 对象进行层级展开，这样可以更细致地编辑可滚动界面的滑动条、显示界面和背景等。可以通过 UI 对象 展开子节点 功能进行编辑，具体展开方法请参阅 UI 对象展开层级 章节。