Unity3D——窗口内容上下左右滚动、区域滑动

在制作UI过程中，通常需要我们创建一个小窗口来显示很多内容，如游戏说明、捕鱼达人中鱼的种类、电影票的选择等等。

1.创建一个“Image”为窗口，命名“background”，添加“Scroll Rect”和“Mask”属性。如图

其中“Mask”，蒙版控件，遮罩“background”以外的区域。

        Show Mask Graphic：显示蒙版图像，预览蒙版图像的显示效果，通常要取消该复选框。

Scroll Rect：

        Content：需要滑动面板所有内容的父面板

        Horizontal：是否允许平行滑动

        Vertical：是否允许垂直滑动

        Movement：移动类型。Unrestricted，自由的，内容可以随意拖动；Elastic，弹性的，允许内容暂时移出区域范围，但弹性拉回，Elasticity，弹性系数，默认0.1，数字越大，回弹所需时间越长；Calmped，钳制，不会超出边界。

        Inertia：惯性，滑动结束时是否惯性移动；Deceleration Rate，减速度，为0时没有惯性，为1时一直匀速至边界，0-1时减速滚动，大于1时加速滚动直至边界。

        Scroll Sensitivity：滚动灵敏度，数值越大，滚动越灵敏。

        Viewport：视口区域的引用，可以定义要显示的范围

        Horizontal Scrollbar：横向的滑动控制条

        Vertical Scrollbar：纵向的滑动控制条.

2.以“background”为父体创建一个Image，命名为“Grid”，设置其尺寸及位置，添加“Grid Layout Group”属性。如图

Grid Layout Group（网格布局组）：

        Padding：布局组的内边距，布局组四周与布局元素之间的间距

        Cell Size：组中布局元素的尺寸，即“fish0”的大小

        Spacing：布局元素之间的间距

        Start Corner：第一个元素所在的位置

        Start Axis：放置元素沿哪个主坐标轴。在开始一个新行之前Horizontal选项将填补一整行，Vertical将在一个新列开始之前填充整个列。

        Child Alignment：布局元素的对齐方式，包括左上、左中、左下、中上、中中、中下、右上、右中、右下共9种对齐方式

        Constraint：限制网格的行列数为一个固定值，以辅助自动布局系统。

设置好Grid Layout Group后，直接复制粘贴“fish0”，子元素可规整的排列，这种布局针对元素单一，切元素位置和尺寸不能单独设置改变。

3.当“Grid”的子对象需要不规整的排列或尺寸不一样时。

方法1：只创建一个子元素GameObject，该对象是“fish0”等元素的父体

方法2：给所有的子元素添加一个“Layout Element”属性，如图

Layout Element：

        Ignore Layout : 忽视布局。如果想某个元素不参与布局，选中即可

        Min Width，Min Height：最小宽度，最小高度。子控件必须满足的最小宽度（高度）（优先满足，具有强制性）

        Preferred Width，Preferred Height：优先宽度，优先高度。如果父控件在满足子控件最小宽度（高度）后仍然有富余空间，优先选择的宽度（高度）

        Flexible Width，Flexible Height：弹性宽度，弹性高度。父控件在满足子控件优选宽度（高度）之后仍然有富余空间，剩余空间按比例分配的比例数值

两种方法的不足是不参与布局的元素要单独设置位置及尺寸。结果如图：

当元素多时，可用代码控制。