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

Posted 2020-09-19 杭者

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

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);
    }
  }
}