【Unity】入门学习笔记180606——UI设计(1)——回顾GUI控件(1)

一、原GUI中的控件

1、Label控件

Void OnGUI( ){

    GUI.Label(new Rect(25,15,100,30),"Label");

}


可通过guiTextGameObject属性(guiText.font)或GUIStyle调整字体设置

public Font myFont=new Font("arial");

guiText.font=myFont;


Label还支持Texture的使用,但不支持文本和纹理的同时使用

对此,可使用Label控件和其他控件之间的图层操作,进而实现相同的效果(控件可通过调用顺序隐式地加以绘制)

public Texture2D myTexture;

void Start(){

    myTexture=new Texture2D(125,15);

}

void OnGUI(){

    GUI.Label(new Rect(125,15,100,30),myTexture);

    GUI.Label(new Rect(125,15,100,30),“Text overlay”);

}


2、纹理绘制

DrawTexture函数仅绘制纹理而非文本

public Texture2D myTexture;

void Start(){

    myTexture=new Texture2D(125,15);

}

void OnGUI(){

    GUI.DrawTexture(new Rect(325,15,100,15),myTexture,ScaleMode.ScaleToFit,True,0.5f);

}

后续参数为通过Alpha混合机制绘制源纹理,且宽高比例设置为0.5

此外,存在一个变化版本

DrawTextureWithTexCoords,该函数可选取纹理在屏幕上的绘制区域,还可选择希望绘制的源纹理区域

 GUI.DrawTextureWithTexCoords ( new Rect(325,15,100,15),myTexture,new Rect(10,10,50,5));


3、Button控件

基本的Button控件仅支持单击操作,而RepeatButton控件则支持按下按钮这一行为

二者均采用if语句并以相同的方式完成实例化操作,进而捕捉按钮的单机操作

void OnGUI(){

if(GUI.Button(new Rect(25,40,120,30),“Button”))

    {

        //the button has clicked,holding does nothing

    }

if(GUI.RepeatButton(new Rect(170,40,170,30),“RepeatButton"))

    {

        //the button has been clicked or is held down 

    }

}


控件支持纹理值,即针对第二个参数提供Texture2D


4、Text控件

TextField:较为基本的文本框,仅支持单行文本且不可生成新行

TextArea:基本扩展,支持多行文本,用户按下Enter键时,将添加新行

PasswordField:不显示输入值,采用替换字符予以显示


string textString1 ="Some text here";

string textString2 ="Some more text here";

string textString3 ="Even more text here";

void OnGUI()

{

    textString = GUI.TextField(new Rect(25,100,100,30),textString1);

    textString = GUI.TextArea(new Rect(150,100,200,75),textString2);

    textString = GUI.PasswordField(new Rect(375,100,90,30),textString3,'*');

}


如果文本过大,则会在文本框内的显示区域内溢出,但TextField之外的内容不会被绘制。

当文本包含多行时,也存在类似的问题


5、Box控件

全部控件均为通用型控件,并可用于多种用途。在其他控件之后绘制背景/着色区域。

void OnGUI()

{

    GUI.Box(new Rect(350,350,100,130),“Settings”);

}

Box控件并不会对绘制于其上的其他控件产生影响,并作为完全独立的空间进行绘制

用于高亮显示某些控件组,抑或提供简单的背景效果(除了文本和色彩之外,还可以使用图像)


6、Toggle复选框控件

实现选项开/关的可视化效果

bool blnToggleState=false;

void OnGUI()

{

    blnToggleState=GUI.Toggle(new Rect(25,150,250,30),blnToggleState,“Toggle”);

}


7、Toolbar面板

实现自动布局的面板,例如处理按钮的排列问题,此类按钮实现分组排列,且一次仅可以选取单一按钮

涵盖了两个布局选项:


①Toolbar控件:采用水平模式排列按钮(不支持垂直模式)

private int toolbarInt;

private string[] toolbarStrings;

void Start()

{

    toolbarInt=0;

    toolbarStrings={"Toolbar1", "Toolbar2", "Toolbar3" };

}

void OnGUI()

{

    toolbarInt=GUI.Toolbar(new Rect(25,200,200,30),toolbarInt,toolbarStrings);

}       

用户还可以传递纹理数组,进而对其进行显示,而非仅是简单的文本内容


②Selection网格选项:

可在网格布局中排列按钮,经重新设置按钮的尺寸后,可与目标区域相适应

private int selectionGridInt;

private string[] selectionStrings;

Void Start()

{

    selectionGridInt=0;

    selectionStrings={"Grid 1","Grid 2","Grid 3","Grid 4"};

}

void OnGUI()

{

    selectionGridInt=GUI.SelectionGrid(new Rect(250, 200, 200, 60), selectionGridInt, selectionStrings, 2);

}


8、Slider/Scrollbar控件

当需要对游戏范围进行控制时,或控制两个值之间的变化属性时,这一类控件实现了两种类似的处理方案,并提供了滚动区域以及操控方式,进而可控制控件背后的对应值。


①Slider

private float fltSliderValue=0.5f;

void OnGUI()

{

    fltSliderValue=GUI.HorizontalSlider(new Rect(25, 250, 100, 30), fltSliderValue, 0.0f, 10.0f );

    fltSliderValue=GUI.VerticalSlider(new Rect(150, 250, 25, 50), fltSliderValue, 10.0f, 0.0f );

}

实现水平和垂直模式工作,并包含了最小和最大预置许可值


②Scrollbar

正常情况下,用户仅需要使用Slider控件即可,而Scrollbar则视为ScrollView控件的基本内容

private float fltScrollerValue=0.5f;

void OnGUI()

{

    fltScrollerValue=GUI.HorizontalScrollbar(new Rect(25, 285, 100, 30), fltScrollerValue, 1.0f, 0.0f, 10.0f);

    fltScrollerValue=GUI.VerticalScrollbar(new Rect(200, 250, 25, 50), fltScrollerValue, 1.0f, 10.0f, 0.0f);

}


猜你喜欢

转载自blog.csdn.net/dylan_day/article/details/80594204