Unity UI自动排列并可滑动查看

发表于2019-01-02
评论0 575浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913
在使用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自动排列的方法并且还能满足大家可以滑动查看的需要。

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台