草庐IT

Unity UGUI 滚动列表

熊思宇 2023-05-22 原文

效果:

当前用的 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

有关Unity UGUI 滚动列表的更多相关文章

  1. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候,我们都会看到一个可能包含5个或更多ruby的列表,我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  2. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言,一个比另一个好吗?还有更好的方法吗? 最佳答案 总结:Array#include?包含String元素,在接受和拒绝输入时均胜出,对于您的示例只有三个可接受的值。对于要检查的更大的集合,看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  3. Ruby:如何将数组拼接成 Lisp 风格的列表? - 2

    这是我发现自己偶尔想做的事情。假设我有一个参数列表。在Lisp中,我可以像这样`(imaginary-function,@args)为了调用将数组从一个元素转换为正确数量的参数的函数。Ruby中是否有类似的功能?或者我只是在这里使用了一个完全错误的成语? 最佳答案 是的!它被称为splat运算符。a=[1,44]p(*a) 关于Ruby:如何将数组拼接成Lisp风格的列表?,我们在StackOverflow上找到一个类似的问题: https://stackov

  4. ruby-on-rails - Ruby on Rails 将列表拆分或切片为列 - 2

    @locations=Location.all#currentlistingall@locations=Location.slice(5)orLocation.split(5)使用Ruby,我试图将我的列表分成4列,每列限制为5个;然而,切片或拆分似乎都不起作用。知道我可能做错了什么吗?任何帮助是极大的赞赏。 最佳答案 您可能想使用in_groups_of:http://railscasts.com/episodes/28-in-groups-of这是RyanBates在railscast中的示例用法:

  5. Ruby 删除可枚举列表中的重复项 - 2

    ruby中有没有一个很好的方法来删除可枚举列表中的重复项(即拒绝等) 最佳答案 对于数组你可以使用uniq()方法a=["a","a","b","b","c"]a.uniq#=>["a","b","c"]所以如果你只是(1..10).to_a.uniq或%w{antbatcatant}.to_a.uniq因为无论如何,几乎所有您实现的方法都将作为Array类返回。 关于Ruby删除可枚举列表中的重复项,我们在StackOverflow上找到一个类似的问题: h

  6. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业,每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用,但是当我查看创建新作业的View时,我看到的只是一个文本框,我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验? 最佳答案 想象一下,您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

  7. ruby - 如何在 Ruby 中创建数字列表并将其反向附加到它 - 2

    给定一个最小整数和最大整数,我想创建一个数组,它从最小值到最大值以二为单位计数,然后倒退(再次以二为单位,重复最大数)。例如,如果最小数是1,最大数是9,我想要[1,3,5,7,9,9,7,5,3,1].我试图尽可能简洁,这就是我使用单行代码的原因。在Python中,我会这样做:range(1,10,2)+range(9,0,-2)在我刚刚开始学习的Ruby中,到目前为止我所想到的是:(1..9).inject([]){|r,num|num%2==1?r这行得通,但我知道必须有更好的方法。这是什么? 最佳答案 (1..9).step

  8. ruby - Ruby 参数列表中的单个拼音/星号是什么意思? - 2

    这个问题在这里已经有了答案:nakedasteriskasparameterinmethoddefinition:deff(*)(1个回答)关闭9年前。我今天浏览了Rails3ActiveRecord源代码,发现amethodwheretheentireparameterlistwasasingleasterisk.defsave(*)我找不到很好的描述来说明它的作用(尽管我有一些基于我对splat参数的了解的想法)。它有什么作用,为什么要使用它?

  9. ruby - 在 ruby​​ 中合并两个排序列表的内置方法 - 2

    我有两个Foo对象列表。每个Foo对象都有一个时间戳,Foo.timestamp。两个列表最初都按时间戳降序排列。我想以最终列表也按时间戳降序排序的方式合并Foo对象的两个列表。实现这个并不难,但我想知道是否有任何内置的Ruby方法可以做到这一点,因为我认为内置方法会产生最佳性能。谢谢。 最佳答案 这会起作用,但不会提供很好的性能,因为它不会利用事先已经排序的列表:list=(list1+list2).sort_by(&:timestamp)我不知道有任何内置函数可以满足您的需求。 关于

  10. ruby - 从列表中生成从 n 到 m 的数字 - 2

    我将从一个例子开始;给定n=1和m=100以及一个列表[1,2,3]生成所有包含一位数和两位数的数字等等,但在这种情况下它们需要小于100。输出:-1,2,3,11,12,13,21,22,23,31,32,33然后我们停止,因为下一个数字将超过100,例如:-111,112,113,121,122,123,131,132,133,21..,.22...,23...,31,32,33正如您所注意到的,我将1,2,3,4附加到之前创建的数字,为此我使用了一个递归函数,该函数在for循环中为我的列表,它们会一直运行,直到生成的数字大于我的限制。defx(str,finish,d,c)ret

随机推荐