关于Unity中stretch的分开使用、预制体、Scroll View的UI节点

偏执的太偏执、 2022-03-30 12:20 450阅读 0赞

一、上次讲的菊花的四个花瓣，只讲了四个花瓣和在一起的时候的作用，现在是分开的菊花的四个花瓣的作用

1.创建一个Canvas  
2.对Canvas进行初始化  
3.创建一个Image的UI节点作为Canvas的子节点，名字叫bg。  
4.再创建一个GameObject的空节点作为Canvas的子节点。  
5.在GameObject下面创建一个叫icon的Image类型的UI子节点  
6.把icon的颜色改为红色便于观察，大小改为300X300  
点击左上角的stretch，图案选择最右下角的四个花瓣对应四个角的状态，  
7.菊花花瓣的作用是父亲节点GameObject伸缩多少，子节点icon就伸缩多少，四个角的偏移量不会变化，相对距离不变。就是子节点在四个花瓣的作用下跟着父节点伸缩。  
8.如果上面中间两块花瓣，下面中间两块花瓣，那么父节点伸缩的时候，上下缩的话，子节点也上下缩，左右缩的时候，子节点不会缩。

二、预制体  
模板，有的时候，一个小兵要生成10个，需要一个模板  
1.创建一个Canvas  
2.对Canvas进行初始化  
3.创建一个image的UI节点作为Canvas的子节点，名字叫item.  
4.在Resources文件夹下面创建一个文件夹叫做prefabs  
5.直接把item拖进prefabs文件夹中  
6.发现会自动生成一个预制体，原来的item节点也会变成蓝色  
7.这时候修改Hierachy下的item节点，预制体也会发生变化，修改之后记得点右上角的Apply  
8.Revert表示预制体覆盖回节点，但是修改Rect Transform中的属性是无法Revert的。Apply是从节点再保存回预制体  
9.如果想断开这种连接关系，选中节点-->菜单-->GameObject-->Break Prefab Instance  
修改预制体，所有与它相关的节点都被修改，除非断开连接，这时候修改预制体，节点不会跟着变，但是一旦点击Revert或者Apply都会重新建立连接

预制体也是节点的一个复制  
使用代码实例化预制体  
1.写一个叫game\_scane的脚本，挂载到Canvas节点上  
2.定义脚本中的public属性，public GameObject item\_prefab  
3.把预制体拖进Hierachy面板的game\_scane脚本的item\_prefab属性上

public class game_scene : MonoBehaviour {
    public GameObject item_prefab;
    
    // Use this for initialization
    void Start () {
        GameObject item = GameObject.Instantiate(this.item_prefab);//以预设体为模板实例化一个物体
        item.transform.SetParent(this.transform);//放在正确的父节点下，不写这个会放根节点下
        item.transform.localPosition = new Vector3(0, 0, 0); //设置坐标
        }
    }

三、Scroll View节点

1.创建一个Canvas  
2.对Canvas进行初始化  
3.创建一个Image的UI节点作为Canvas的子节点，名字叫bg。  
4.创建一个Scroll View的UI节点在Canvas下作为子节点  
5.Scroll View节点下面的Viewport子节点，Viewport子节点有一个Mask组件用来裁剪其子节点的显示范围，Viewport就相当于一个蒙版  
6.Viewport节点下面有一个Content节点用来存放内容  
7.Scrollbar Horizontal和Scrollbar Vertical是Scroll View的子节点，表示拉条。  
8.在Content下面创建多个Imgae的UI子节点，把同一张图片依次拖进去  
9.给Content一个排版的脚本，这里用Grid  
10.发现运行后可以上下或者左右拖动Content中间的内容，这是因为在Scroll View节点的scroll rect属性面板勾选了Horizontal和Vertical，表示允许横拉和纵拉。  
11.有的时候上下拖动不了，是因为Content的高度太小，图片的高度加起来比Content的高度大，修改一下Content的高度就好了，用计算器算出Content的高度。  
12.Scrollbar关联的时候不能隐藏，可以直接删除。关联的方式是直接把Scrollbar节点拖进Scroll View的scroll rect的Scrollbar属性里

制作一个排行榜  
1.创建一个Canvas  
2.对Canvas进行初始化  
3.创建一个Image的UI节点作为Canvas的子节点，名字叫bg。  
4.创建一个叫rank的Scroll View的UI节点在Canvas下作为子节点  
5.给rank一个排行榜的背景图片  
6.在rank下面创建一个子Image节点叫tital，用来显示分数排行的标题图片  
7.背景图片要在rank节点外面放好了就行了，最好是比rank大一点，可以给rank的Image一个颜色，再隐藏这个Image组件  
8.在rank再创建一个rank\_option的子节点，类型是Image  
9.在rank\_option的子节点下面再创建一个mask的子节点用来放头像的裁剪蒙版节点，记得要加上Mask裁剪组件和拖进裁剪贴纸。  
10.在Mask节点下面再创建一个叫avator的Image节点用来表示放头像图片。这时候发现没有裁剪成功，是因为没有运行的原因，运行起来，头像就裁剪了。  
11.在mask上面再创建一个空的父节点，在这个空的父节点下面创建一个Image类型的节点用来显示相框图片。  
12.在rank\_option子节点下面创建一个Image类型的UI节点用来放分割线，叫slice\_line  
13.在rank\_option子节点下面创建一个Text类型的UI节点叫unick  
14.把整个rank\_option节点拖到预制体文件夹prefabs中,可以把空节点的Iamge组件隐藏起来，就可以去掉白色区域了。  
15.给rank节点的Content加一个排版的组件grid，一般都是用grid，等一下要弄很多rank\_option节点进来  
16.用代码实现rank\_option节点的实例化和批量添加和摆放

public class game_scene : MonoBehaviour {
    public GameObject item_prefab;
    public GameObject rank_prefab;
    public ScrollRect rank;
    // Use this for initialization
    void Start () {
    // rect transorm
    this.rank.content.sizeDelta = new Vector2(0, 20 * 160);
    
        for (int i = 0; i < 20; i++) {
        GameObject opt = GameObject.Instantiate(this.rank_prefab);
        opt.transform.SetParent(this.rank.content);
        opt.transform.Find("unick").GetComponent<Text>().text = "" + (i + 1);
        }
      }
    }