整体布局情况
导入UI资源并统一将Texture Type设置为Sprite(2D and UI)
1.标题
- 将Text中的文本设置为’Unity 3D物体展示实例’。
- 添加Shadow与Outline分别按照下图进行设置属性。
2.操作步骤
- 设置背景图片content,将背景色改为白色
- 设置LeftPanel增加Vertical Layout Group与Content Size Fitter脚本,分别按照下图进行属性设置。
Content Size Fitter组件主要是用来设置UI的长宽,Horizontal Fit和Vertical Fit分别是控制UI的宽和高,有三个值可选:
Unconstrained:组件不根据布局元素调整 ,可手动修改长宽的值。
MinSize:根据布局元素的最小值来调整,不能手动修改长宽的值。
PreferredSize:根据布局元素的内容来调整,不能手动修改长宽的值。
这里选择MinSize。这个区域以后要动态改变内容的所以需要Vertical Layout Group与Content Size Fitter脚本进行控制动态的数据布局。 - LeftPanel子元素添加Image、Panel,分别命名为TitleImage、TaskPanel。
-
TitleImage 设置背景图片、设置Width,Height。
-
TaskPanel将背景图片去掉,添加Vertical Layout Group脚本,并进行如下属性设置,。
-
在TaskPanel中添加Image,在Image添加Text并设置为预制体。同时需要修改Content的Vertical Layout Group的Child Force Expand选为Use Child Scale。
修改前Child Force Expand
修改后Use Child Scale
-
3.左下角功能导航
设置LeftBottomPanel,并在其下添加以下UI元素。
- 为LeftBottomPanel取消背景色。添加Horizontal Layout Group脚本,设置如下属性。
工程目录:
- LeftBottomPanel增加Horizontal Layout Group脚本进行布局控制。进行如下属性控制。
- 添加Button、Image 标签。
-
Button 替换图片,并将Text替换为Image并设置Image的图片为colse的图片资源。将Button重命名为BtnClose
-
Image标签下增加Toggle(标注功能),增加一个重置按钮。
-
重命名
-
4.右下角主导航
5.配件区
在RightCenterPanel中添加Image、Panel并重命名。
-
将Image重命名为TitleImage,并设置背景图片为content,添加Text标签文字内容为配件区。
-
Panel重命名为Content,并设置一些属性。
-
在Content添加Image并设置背景图片。将其设置为预制体并命名为RightItem。
6.最终效果
下篇文章介绍操作步骤动态显示。