UI——关于ScollView部件的一些简单看法

2018-05-29 阅读量

这次作业主要是学习UI技术的使用，而我选择的是制作一个可展开的广告牌。虽然有师兄的博客作为参考，但是在具体实现的过程中，对ScollView部件的使用还是出现了很多的问题，所以这篇博客主要是想借这次作业，谈谈对于ScollView部件使用的一些简单看法。

首先，在屏幕中添加ScollView，添加后我们可以看到，在左边的部件框中会出现下图中的部件：

ScollView

在屏幕中显示为

Appear

其中

ViewPort->Content 用来放置内容的区域

ScrollBar Horizontal 水平方向上的滚轮

Scrollbar Vertical 垂直方向上的滚轮

接着我们首先来看Canvas，在Canvas上我主要想说的是其中Render Mode的属性，点击该属性我们可以看到

Render Mode

对于两种Screen Space的选项，它会使得Canvas在布满整个相机的屏幕，因为这个功能，所以我们可以发现如果选择了这两种选项，我们是没有办法改变其Rect Transform的值的

如果我们希望修改Canvas的大小，我们就应该选择其World Space的选项。选择World Space后，我们就会发现Canvas的值变成了可修改的，这是我们就需要手动修改其的位置，使它可以出现在照相机中我们希望的位置

在Canvas之后我们来看真正的Scroll View部分，对于这一部分，我想说的是Visibility这一属性，对于一个Scroll View，我们可以通过Visibility这一属性来控制其上的两个滚轮。其中默认的选项是Auto Hide And Expand，这也是我们最常用的。它可以在我们的Content的大小超过Viewport的自动进行滚轮的扩展，当大小比较小时自动隐藏滚轮。

Scroll View

接下来我们来看ViewPort中的Content，也就是第二张图中那一块灰色的区域，在这片区域就是我们用来显示广告牌内容的位置。就像之前说的，其大小如果大于父节点Viewport时，我们才会出现滚动的效果。在使用时我们会发现，如果Content不够大时会有部分的容不能显示，会被Scroll View部分挡住，所以我们在设置Content大小时，可以稍微比内容大小大一些。而且在制作广告牌时，要记得在Content下添加一个Vertical Layout Group组件。并在其中添加相应的按钮和文本框。

Content

剩下的两块Scrollbar部分就是两个方向上的滚动条了。在这两个部分我们也可以去选择滚动条的颜色和样式等等。

Scrollbar

最后一部分也就是EventSystem部分，这一部分为整个ScollView部件提供事件的响应机制，如果没有这个，你会发现我们在点击时不会有任何反应（亲身体验，找了好久的问题）

如果在制作时我们发现滚轮不能滑动，或者点击没有反应时：

可能是因为没有添加EventSystem，导致ScollView不能对我们的点击进行响应
如果有EventSystem，那可以检查ScollView所在的Layer是不是比较低，导致我们被其他的部件所不盖，而不能响应我们的点击时间
除此之外，如果是指出现滚轮不能滚动的问题，你可以检查一下是否将scorllbar与scorll Rect进行了绑定。
如果以上三种解决方法不能解决你的问题，那就得找大佬帮忙了

接下来我们回到广告牌的制作：

首先添加一个ScollView

接着为Content添加Vertical Layout Group组件，并在其中添加我们需要显示的按钮和文本

参考师兄的博客，编写实现收缩扩展的脚本

将脚本挂载在button上，并在其中添加对应的Text

按照自己的喜好，修改背景，颜色，字体大小等细节，就可以完成一个可扩展的广告牌制作了。

代码实现如下：

public class show : MonoBehaviour {  

	private Button myButton;  
	public Text text;  
	private int frame = 20;  

	// Use this for initialization  
	void Start()  
	{  
		Button butoon = this.gameObject.GetComponent<Button>();  
		butoon.onClick.AddListener(Click);  
	}  

	IEnumerator rotateIn()  
	{  
		float rx = 0;  
		float xy = 120;  
		for (int i = 0; i < frame; i++)  
		{  
			rx -= 90f / frame;  
			xy -= 120f / frame;  
			text.transform.rotation = Quaternion.Euler(rx, 0, 0);  
			text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);  
			if (i == frame - 1)  
			{  
				text.gameObject.SetActive(false);  
			}  
			yield return null;  
		}  
	}  

	IEnumerator rotateOut()  
	{  
		float rx = -90;  
		float xy = 0;  
		for (int i = 0; i < frame; i++)  
		{  
			rx += 90f / frame;  
			xy += 120f / frame;  
			text.transform.rotation = Quaternion.Euler(rx, 0, 0);  
			text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);  
			if (i == 0)  
			{  
				text.gameObject.SetActive(true);  
			}  
			yield return null;  
		}  
	}  


	void Click()  
	{  
		if (text.gameObject.activeSelf)  
		{  
			StartCoroutine(rotateIn());  
		}  
		else  
		{  
			StartCoroutine(rotateOut());  
		}  

	}  
}

最终实现的效果如下

Result

源码地址：
https://github.com/626zdysdq/Unity3D/tree/master/UI

视频链接：
http://v.youku.com/v_show/id_XMzY0NzY4OTI2OA.html?spm=a2h0j.11185381.listitem_page1.5~A