Unity3D教程:GUI的布局模式
固定Layout是用在你預先設計好界面的時候,活動Layout工作在你不知道會有多少組件或者如何定位他們的時候,這里有個例子:
- function OnGUI () {
- // 固定Layout
- GUI.Button (Rect (25,25,100,30), “I am a Fixed Layout Btton”);
- // 活動Layout
- GUILayout.Button (“I am an Automatic Layout Button”);
- }
排列控制
在活動Layout模式里,你可以控制組件的位置,并組織他們。在固定模式下你可以把多個控件放進Groups中,在活動模式下可以把他們放在Areas, Horizontal Groups和Vertical Groups里。
固定Layout中的Groups
Groups 在固定Layout模式中起到組織可用項的,他讓你在屏幕的一個區(qū)域中包含多個控件。你要把定義的控件放在GUI.BeginGroup()和 GUI.EndGroup()這對函數(shù)中間,所有控件的位置坐標都以Groups的0坐標為起點,假如你更改了group坐標,那么內(nèi)部的控件也會跟隨改變。
舉個例子:
- // 在Group中有一個box和一個button.這里,兩個控件是屬于Group的.
- function OnGUI(){
- GUI.BeginGroup (Rect (Screen.width / 2 , Screen.height / 2 − 50, 100, 100));
- GUI.Box (Rect (0,0,100,100), “Group is here”);
- GUI.Button (Rect (10,40,80,30), “Click me”);
- GUI.EndGroup ();
- }
Group也可以嵌套,例如:
- var bgImage : Texture2D; // background image that is 256 x 32
- var fgImage : Texture2D; // foreground image that is 256 x 32
- var playerEnergy = 1.0; // a float between 0.0 and 1.0
- function OnGUI () {
- // Create one Group to contain both images
- // Adjust the first 2 coordinates to place it somewhere else on−screen
- GUI.BeginGroup (Rect (0,0,256,32));
- // Draw the background image
- GUI.Box (Rect (0,0,256,32), bgImage);
- // Create a second Group which will be clipped
- // We want to clip the image and not scale it, which is why we need the second Group
- GUI.BeginGroup (Rect (0,0,playerEnergy * 256, 32));
- // Draw the foreground image
- GUI.Box (Rect (0,0,256,32), fgImage);
- // End both Groups
- GUI.EndGroup ();
- GUI.EndGroup ();
- }
和我們熟知的if-else語句一樣,相互最接近的begin和end為一組。
活動Layout-Areas
Areas只用于活動Layout模式.作用和固定模式下的Group一樣。
在活動模式下,你可以定義Area的范圍,也可以不定義。不定義的時候整個屏幕就是它的范圍,如果手工定義了它的范圍,那么它內(nèi)部的控件將以Area的坐標為起始坐標。Unity3D教程手冊
一個例子:
- function OnGUI () {
- GUILayout.Button (“I am not inside an Area”);
- GUILayout.BeginArea (Rect (Screen.width/2, Screen.height/2, 300, 300));
- GUILayout.Button (“I am completely inside an Area”);
- GUILayout.EndArea ();
- }
自動Layout - Horizontal and Vertical Groups
自動模式中還有還有兩對組函數(shù):GUILayout.BeginHoriztontal(),GUILayout.EndHorizontal(),GUILayout.BeginVertical(),和GUILayout.EndVertical().他們用在Area中,同樣也是成對使用的。
其特點是Horiztontal中的控件呈水平排列,Vertical中的控件呈垂直排列。
例子一個:
- var sliderValue = 1.0;
- var maxSliderValue = 10.0;
- function OnGUI()
- {
- // Wrap everything in the designated GUI Area
- GUILayout.BeginArea (Rect (20,0,200,60));
- // Begin the singular Horizontal Group
- GUILayout.BeginHorizontal();
- // Place a Button normally
- if (GUILayout.RepeatButton (“Increase max\nSlider Value”))
- {
- maxSliderValue += 3.0 * Time.deltaTime;
- }
- // Arrange two more Controls vertically beside the Button
- // 這里面有兩個控件 是按照垂直的形式排列的
- GUILayout.BeginVertical();
- GUILayout.Box(“Slider Value: ” + Mathf.Round(sliderValue));
- sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0, maxSliderValue);
- // End the Groups and Area
- GUILayout.EndVertical();
- GUILayout.EndHorizontal();
- GUILayout.EndArea();
- }
用GUILayoutOptions去定義一些控件 比如可以控制按鈕的長度,如:
- function OnGUI () {
- GUILayout.BeginArea (Rect (100, 50, Screen.width−200, Screen.height−100));
- GUILayout.Button (“I am a regular Automatic Layout Button”);
- GUILayout.Button (“My width has been overridden”, GUILayout.Width (95));
- GUILayout.EndArea ();
- }
這里GUILayout.Width (95)就定義了按鈕的長度為95。