Unity UI自动排列并可滑动查看
发表于2019-01-02
在使用unity的过程中，经常需要制作可滑动的界面，之前由于应用需要有一个阅读说明书的功能，所以编辑了一个可以滑动查看文字的界面，并且在手机上滑动相关区域也可以实现滑动查看的功能。当时因为比较忙所以没有写下教程。这次也是需要制作一个可滑动查看的界面，还增加了自动排列的功能，制作的过程中发现这一教程很少，少有的也不太清楚，最终还是自己给弄出来了，避免以后又需要制作，所以写下了这篇教程，给自己提供一个方法，也给大家看看。
效果图如下图，忽视美观性，每一行的item都是自动排列的，滑动滑动条可以看到下面被挡住的item。制作出这样的效果基本不用写代码，所以一点都不难，接下来就是教程，一步一步的说效率太慢，我主要会把我的组织结构列出来，只要你的结构和我一样就可以做出来。
1、hierarchy中的UI结构，如下图所示
我的命名没有抹掉它的类别，所以很好理解，例如BGpanel就是创建了一个panel。接下来直接看每一个UI控件的inspector面板，我就不解释为什么要这么做了，实际操作就会理解的。
2、BGPanel，就是最大的一个容器，包括滑动item的区域和下面的按钮操作区域。
3、ScrollPanel，存放滑动区域，它和ItemPanel是一样大小，只不过因为需要将ItemPanel设置为滑动区域，所以需要在ItemPanel之上在添加一层，当ItemPanel的大小超过ScrollPanel后，就可以往下滑动。为此需要添加mask组件和Scroll Rect组件。
注意在Scroll Rect中设置Content和vertical Scrollbar，分别将ItemPanel和ScrollBar拖过来就可以了。
3、ItemPanel，用来存放一条条的Item的地方。需要添加Content Size Fillter组件和Grid Layout Group组件，两个组件结合可以实现自动排列并且不会溢出。
注意对这两个组件进行设置，不理解可以看看对他们参数的解释，这里不说了。
到这里就可以实现自动排列item，并且可以滑动查看，注意对各个UI控件的锚点的设置，否则跟我的布局就会不太一样。下面按钮控制区域就不说了，很简单，也和主题无关，可以在ItemPanel下放置很多子物体，就可以测试滑动效果了，到这里设置可滑动的界面就完成了。
我的item的制作是制作了预制体，他的结构和设置如下：
制作好一条item之后，将其拖到project面板就成了预制体，layout Element可以不加。
生成item的脚本代码如下：
GameObject preItem = (GameObject)Instantiate (ItemPrefab);
preItem.transform.SetParent (GameObject.Find ("Canvas/BGPanel/ScrollPanel/ItemPanel").transform);
preItem.GetComponent<Transform> ().localScale = new Vector3 (1, 1, 1);
第一行是实例化出Item，第二行将其设置成Itempanel的子物体，第三行是因为实例化之后scale变大非常奇怪，所以强行用代码让它的scale为（1，1，1）。我将其写成方法，每次点击ADD 按钮就会调用这个方法，生成一行item。
这个教程同时说了如何使用组件进行自动布局，和如何对内容设置滑动查看，具体的原理没有说，大家可以参考API文档，希望对大家有用。
最后记录一下之前写的在相应位置滑动手机屏幕浏览说明书的代码，上面的教程是在PC端完成的，通过滚动滑轮就可以滑动屏幕，在手机直接滑动屏幕来实现滑动，还需要另外写代码，如下：
public void dragInPanel(GameObject panel)
｛
if (Input.GetMouseButton (0) && panel.activeSelf && RectTransformUtility.RectangleContainsScreenPoint (
panel.GetComponent<RectTransform> (),
Input.mousePosition,
null)) ｛
if(Input.touchCount>0)｛
Touch touch = Input.GetTouch (0);
if (touch.phase == TouchPhase.Moved) ｛
panel.transform.Find ("Scrollbar").GetComponent<Scrollbar> ().value -= Input.touches[0].deltaPosition.y/1000f;
Debug.Log ("移动屏幕");
｝
｝
｝
｝
首先要判断手指滑动的区域是不是在Panel内部，然后通过控制ScrollBar的Value值来控制滑动。
以上就是UI自动排列的方法并且还能满足大家可以滑动查看的需要。