Unity 3D模型展示之UI布局

整体布局情况

导入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.最终效果

下篇文章介绍操作步骤动态显示。