使用Unity的UGUI制作带时间头的相册

Unity  UGUI相册制作并且加上时间头的效果

在介绍排版之前需要先了解一下Unity中的排版布局方式的三个组件

1、Horizontal Layout Group（水平布局）

1、Padding：偏移

Left、Right、Top、Bottom 分别是UI的左边、右边、顶部边、底部距离显示区域的间隔

2、Spacing：两个UI之间的间隔

3、Child Alignment：表示对齐方式从那边开始

4、Child Controls Size：当前的物体布局是否控制其子物体的宽度和高度

5、Child Force Expand：是否强制子物体扩展以填充额外的可用空间

2、Vertical Layout Group （垂直布局）垂直的参数和水平的相同

3、Grid Layout Group （网格布局）

1. Padding：偏移
2. Cell Size：子物体的大小
3. Spacing：子物体之间的间隔
4. Start Corner：第一个UI元素的位置
5. Start Axis：枚举类型，如果选择Horizontal方式，则UI布局会优先把水平方向填满，Vertical同理优先填满垂直方向
6. Child Alignment：UI元素的布局方式
7. Constraint：固定网格的行或列

 

如果还不明白，这里推荐一篇文章介绍的非常清楚：https://blog.csdn.net/qq_26999509/article/details/53406107

 

然后还有一个组件也很重要：Content Size Fitter  这个组件主要是控制UI的长宽，Horizontal Fit和Vertical Fit分别是控制UI的宽和高

Unconstrained：组件不根据布局元素调整 ，可手动修改长宽的值。

Min Size：根据布局元素的最小值来调整，不能手动修改长宽的值。

Preferred Size：根据布局元素的内容来调整，不能手动修改长宽的值。

 

这几个组件了解了之后，就可以基本搞定这种UI的制作：

这里在推荐一篇文章：https://blog.csdn.net/qq_33413868/article/details/82783057

制作方法：我这里使用的Unity自带的Scroll View

1、创建UGUI的Scroll View，然后给Content添加组件Vertical Layout Group和Content Size Fitter 组件

2、创建一个空物体，用于最外部的UI排版，大小等于时间头的高度和所有照片集合的高度并且如果Padding如果有间隔也一起算上去，把时间的头UI和照片集合都放到这个空物体下方。并且添加和Content物体相同的组件

3、给照片的父物体添加Grid Layout Grop和Content Size Fitter 组件，使照片按照网格布局排版并且自动调整大小。

其实制作这种相册本身不难，unity的UGUI已经很强大了，使用组件组合可以实现很多的功能，主要是制作方法，如果不理解各个组件的用处和一个好的方法，也是很头疼的一件事。