【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);

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章