<Unity3D>Unity3D入门篇——第六讲 GUI控件（四）

最新推荐文章于 2024-11-09 13:52:37 发布

原创最新推荐文章于 2024-11-09 13:52:37 发布 · 7.4k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Unity3D #gui #控件 #Slider #ScrollView

Unity3D 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Unity GUI中的滑动控件，包括Slider控件和Scrollbar控件的功能及使用方法，并通过实例展示了如何创建水平和垂直滑动条，以及如何使用ScrollView控件实现内容滚动。

八、Slider控件

Slider控件（滑动条控件）由滑块和滑动条构成的。例如，我们调节音量大小的控件就是滑动条控件。根据方向，我们可以将滑动条控件分为水平滑动条（HorizontalSlider）和垂直滑动条（VerticalSlider）。我们通过GUI.HorizontalSlider()和GUI.VerticalSlider()来绘制。其返回值为float。

通过上面2个图片，我们可以看出水平滑动条与垂直滑动条在用法上是一样的。

Parameters（参数）：

position : Rect —— 用于显示滑动条在屏幕上的矩形位置

value : float —— 显示滑动条的值。该值决定了滑块的位置。

leftValue : float —— 水平滑动条最左边的值

rightValue : float ——水平滑动条最右边的值

topValue : float —— 垂直滑动条最顶部的值

bottomValue : float ——垂直滑动条最底部的值

slider : GUIStyle —— 用于显示可拖动区域的样式。如果不设置，水平（垂直）滑动条的样式就为当前GUISkin

thumb : GUIStyle ——用于显示拖动滑块的样式。如果不设置，水平（垂直）滑块的样式就为当前的GUISkin

Return（返回）：

float浮点型——用户设定的值

Description（描述）：

水平（垂直）滑动条，用户可以拖动在最小值和最大值之间来改变其值

【案例】——创建一个水平滑动条和一个垂直滑动条，在用一个标签控件来显示水平滑动条的值，而垂直滑动条来控制贴图的大小

Script_6_1_Slider.cs

using UnityEngine;
using System.Collections;

public class Script_6_1_Slider : MonoBehaviour {

	//定义水平滑动条的值
	private float horizontalValue;
	//定义垂直滑动条的值
	private float verticalValue;
	
	//公有变量——贴图
	public Texture img;
	
	void Start () 
	{
		//初始化
		horizontalValue = 1.0f;
		verticalValue = 1;

		//贴图为空时，打印错误信息
		if(img == null)
			Debug.LogError("贴图不能为空！");
		
	}
	
	void OnGUI()
	{
		//水平滑动条
		horizontalValue = GUI.HorizontalSlider(new Rect(10,10,100,20),horizontalValue,0.0f,10.0f);
		//标签
		GUI.Label(new Rect(120,10,500,20),"水平滑动条的值：" + horizontalValue);
		//垂直滑动条
		verticalValue = GUI.VerticalSlider(new Rect(10,30,20,100),verticalValue,0,100);
		//贴图
		GUI.DrawTexture(new Rect(50,30,verticalValue,verticalValue),img);
		
	}
}

将脚本绑定到Main Camera上，并且找一个贴图文件，拖放到项目中，然后在赋值给脚本。准备好了以后，点击Play按钮。

运行结果如下：

图6.1 运行时初始状态图6.2 拖动水平和垂直滑块

九、Scrollbar控件

Scrollbar控件（滚动条控件）被用于导航ScrollView控件。该控件也分为水平滚动条（HorizontalScrollbar）和垂直滚动条（VerticalScrollbar）。其用法也是一样的。但是，通常我们使用ScrollView代替。（后面我们会介绍ScrollView的用法）

Parameters（参数）：

position ： Rect ——滚动条在屏幕上的矩形位置

value : float —— 在最小值和最大值之间的位置

size : float —— 我们能看到的多大

leftValue : float —— 水平滚动条最左边的值

rightValue : float ——水平滚动条最右边的值

topValue : float —— 垂直滚动条最顶部的值

bottomValue ： float —— 垂直滚动条最底部的值

style : GUIStyle —— 滚动条背景样式。如果不设置，滚动条将使用当前的GUISkin

Return（返回）：

float浮点型——用户通过拖动滚动条或者点击滚动条上的箭头改变的值

Description（描述）：

创建水平（垂直）滚动条。滚动条是通过滚动来浏览文档。大多数情况下，我们使用scrollView来代替。

十、ScrollView控件

如果游戏界面中控件过多，导致超出了屏幕的显示范围。就需要用ScrollView来滚动显示。该控件的用法和前面的控件有点区别。GUI.BeginScrollView()为开始滚动视图，GUI.EndScrollView()为结束滚动视图。在这两之间就为滚动视图显示的区域。注意：GUI.BeginScrollView()与GUI.EndScrollView()必须成对出现。否则会出错。

Parameters（参数）：

position ： Rect —— 滚动视图在屏幕上的矩形位置

scrollPosition : Vector2 —— 用来显示滚动位置

viewRect : Rect —— 滚动视图内使用的矩形

alwayShowHorizontal : boolean —— 可选参数！总是显示水平滚动条，如果设置为false或者不设置时，只用当内矩形区域宽于外矩形区域时才显示

alwayShowVertical : boolean —— 可选参数！总是显示垂直滚动条，如果设置为false或者不设置时，只用当内矩形区域高于外矩形区域时才显示

horizontalScrollbar : GUIStyle —— 用于水平滚动条的可选设置，如果不设置，水平滚动条将使用当前的GUISkin

verticalScrollbar : GUIStyle —— 用于垂直滚动条的可选设置，如果不设置，垂直滚动条将使用当前的GUISkin

Returns（返回）：

Vector2 二维向量—— 被修改的滚动位置scrollPosition。返回值应该赋予你的变量。

Description（描述）：

在GUI中开始一个滚动视图。

滚动视图让你在屏幕上产生一个小的区域，使用滚动条可以查看一个大的区域。

Description（描述）：

结束最近的一个滚动视图。

【案例】——使用滚动视图来查看完成内容

Script_6_2_ScrollView.cs

using UnityEngine;
using System.Collections;

public class Script_6_2_ScrollView : MonoBehaviour {

	//滚动条的位置
	private Vector2 scrollPosition;
	//信息
	private string[] infos = new string [5];
	
	void Start () 
	{
		//初始化
		infos[0] = "高端大气上档次,低调奢华有内涵,奔放洋气有深度,简约时尚国际范,低端粗俗甩节操,土憋矫情无下限,装模作样绿茶婊,外猛内柔女汉子,卖萌嘟嘴剪刀手,忧郁深沉无所谓,狂拽帅气吊炸天,冷艳高贵接地气,时尚亮丽小清新,可爱乡村非主流,贵族王朝杀马特，提莫团战必须死";
		infos[1] = "1.桌子上原来有12支点燃的蜡烛，先被风吹灭了3根，不久又一阵风吹灭了2根，最后桌子上还剩几根蜡烛呢?\n答：5根";
		infos[2] = "2.一栋住宅楼，爷爷从一楼走到三楼要6分钟，现在要到6楼，要走多少分钟？\n答：15分钟";
		infos[3] = "3.有一本书，兄弟两个都想买。哥哥缺5元，弟弟只缺一分。但是两人合买一本，钱仍然不够。你知道这本书的价格吗？他们又各有多少钱呢？\n答：这本书的价格是5元。哥哥一分也没有，弟弟有4.99元";
		infos[4] = "4.1根绳子对折，再对折，再第三次对折，然后从中间剪断，共剪成多少段？\n答：9段";
	}
	
	void OnGUI()
	{
		//开始滚动视图
		scrollPosition = GUI.BeginScrollView(new Rect(10,10,400,400),scrollPosition,new Rect(10,10,770,600));
		//标签内容
		GUI.Label(new Rect(10,10,770,40),infos[0]);
		GUI.Label(new Rect(10,50,770,40),infos[1]);
		GUI.Label(new Rect(10,90,770,40),infos[2]);
		GUI.Label(new Rect(10,130,770,60),infos[3]);
		GUI.Label(new Rect(10,190,770,40),infos[4]);		
		
		//结束滚动视图
		GUI.EndScrollView();
	}
}

将Script_6_2_ScrollView.cs绑定到Main Camera上。点击Play按钮。