Unity实现滑动列表(ScrollView)-UGUI

步骤:

第一步
创建一个Image,改名为“ScrollView”。
添加ScrollRect组件,设置组件:把horziontal(水平方向移动)关闭。
添加Mask组件。
Unity实现滑动列表(ScrollView)-UGUI_第1张图片
第二步
在ScrollView下添加Image,改名为”Viewport“

Unity实现滑动列表(ScrollView)-UGUI_第2张图片第三步
在Viewport下添加Image,改名为“Content”,content的大小最好和viewport一样。
设置锚点为与Pivot如下图:
设置这两个的作用是为了让每次添加子元素可以显示在Content的最上方,而不会出现在中间产生的情况
Unity实现滑动列表(ScrollView)-UGUI_第3张图片
添加VerticalLayoutGroup组件,设置如下图:
ContorlChildSize作用:这个用来决定是子物体的高和宽时候可以控制,要使用这个属性,需要子元素身上要有LayoutElement组件,否则会有错误的效果。
UseChildScal:子物体缩放是否会影响到父物体
ChildForceExpand:这个也要配合ContorlChildSize来使用,如果勾选ControlChildSize,可以通过这个属性来决定是否要把子物体的大小按照服务体的宽高来填充。
Unity实现滑动列表(ScrollView)-UGUI_第4张图片
添加ContentSizeFitter组件,设置如下图:
VerticalFit设置为PreferredSize是为了让该UI的大小可以根据该UI下子UI的排列尺寸进行自适应高度调整。
Unity实现滑动列表(ScrollView)-UGUI_第5张图片
第四步
在ScrollView下添加ScollBar,并放到合适的位置,把Dircetion属性改为TopToButtom。
Unity实现滑动列表(ScrollView)-UGUI_第6张图片
第五步
回到ScrollView的ScrollRect组件。进行如下设置
Unity实现滑动列表(ScrollView)-UGUI_第7张图片
最终我们就制作完成了。

你可能感兴趣的:(Unity实现滑动列表(ScrollView)-UGUI)