Unity UGUI 滚动列表

效果：

当前用的 Unity 版本为 5.6.7f1，场景分辨率为 1440 * 2560，下面的案例中，都是以这个分辨率为标准，如果你设置的屏幕大小和我的不一样，那么在后面的操作中，参数可能会不一样。

1.在场景中添加一个 Canvas 组件

2.在 Canvas 中添加一个 Panel 组件

添加完成后，场景界面如下

  

3.在 Panel 里添加一个空的游戏物体 Content

如下

将 Content 的大小调整一下

在场景中的显示如下

4.在 Content 里添加一个 UI 控件 Text

将 Text 大小和位置设置和 Content 一样，另外将字体设置为100，将颜色设置为红色

在 Text 中随便加入一些文字

场景中如下

5.在 Panel 上添加 Scroll Rect 控件

将 Content 游戏物体拖入到 Scroll Rect 控件中的 Content 属性里

6.测试效果

运行后，就可以拖动了，但是此时控件会左右晃动，效果：

 这里可以添加一个限制，只要取消 水平轴 的勾选，就可以让控件只能在水平方向移动

效果：

这里效果基本完成了，接下来给界面加个滚动条。

7.添加滚动条

在 Panel 中，添加一个 UI 控件 Scrollbar

将滚动条 Direction 属性 设置为 Buttom To Top ，也就是设置滚动条的方向

8.调整滚动条的颜色

找到子物体 Handle ，这个就是鼠标拖动的那个白方块

将颜色调整为鲜艳一点的颜色，更容易辨认

9.调整滚动条的位置

滚动条的位置和大小数据设置如下

此时场景中的显示如下

10.Scroll Rect 控件绑定 Scrollbar 

点击 Panel 控件，将 Scrollbar 控件拖入到 Scroll Rect 控件的 Vertical Scrollbar 属性中，如下图

这时，需求基本完成了，效果：

 当前只是文本控件拖动的形式，其实滚动列表原理差不多。
 

11.滚动列表

先删除上面步骤中的 Text 控件，这个暂时不需要了。

在 Content 里面添加一个空的游戏物体 Parent

Parent 的 Rect Transform 数据如下：

在 Parent 添加一个 UI 控件 Image

调整 Image 的大小

完成了上面的操作，在场景中显示如下 

给 Parent 添加一个 Vertical Layout Group 控件，将 Child Alignment 设置为 Upper Conter （向上对齐，并居中）

完成了上一步的操作后，Image 控件会自动移动到最顶部

我们将 Image 控件再复制十个

场景中显示如下：

运行后效果：

此时，虽然实现了滚动列表的效果，但是，此时滚动时一片空白，不知道那个是那个，接下来就做了一点改动，先删掉刚复制的 Image，再在 Image 里面添加了一个 Text 控件。

场景中显示如下：

接下来，就给 Image 挂上一个脚本 Test.cs

Test.cs 代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Test : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
        transform.Find("Text").GetComponent<Text>().text = transform.gameObject.name;
    }

    // Update is called once per frame
    void Update()
    {

    }
}

接下来，将 Image 控件复制十份

场景中界面如下：

运行后效果如下：

这样就OK了。

下载连接：点击下载

 end