Unity UGUI制作自适应UI列表(道具详情)

最近项目遇到一个需求:显示物品详情,并且边框随内容大小伸缩。

详细构成:武器属性+特效+镶嵌+套装属性+简介+按钮。(可以预想得做几个月的平衡性。。。)

经考虑UGUI的Scroll View能实现自适应而不需要额外代码

开工

一、按设计稿摆好元素

二、所用组件

这里需要用到Content Size Fitter组件 + Vertical Layout Group组件

Content Size Fitter组件:元素根据内容大小来调整

Unconstrained:不受约束

Min Size:按照内容的最小大小

Preferred Size:首选大小,根据内容自动调整

 

Vertical Layout Group组件:垂直列表,根据子类内容来调整自己高。(Horizontal  Layout Group,横行列表也是同理)

Padding:内边距

Spacing:元素间隔

Chid Alignment:当子控件们不能全部填充父控件的时候,子控件们的对其方式

Control Child Size:父物体是否强制控制子物体的size,若不勾选Child Force Expand,则修改子物体为最小宽度(高度)。若勾选Child Force Expand,则修改子物体为最大宽度。

Child Force Expand:是否强制子控件去填充父控件的多余空间,此项配合Control Child Size使用。

三、调整

添加边框:给Scrool View> viewport> Content添加image组件,并选择边框图片。

边框自适应:Content添加Content Size Fitter组件,设置Horizontal Fit为Unconstrained(不控制),Vertical Fit为Preferred Size(垂直自动调整)。

内容排版:Content添加Vertical Layout Group组件,设置内边距,对齐方式。

四、完成

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注