【Unity】8.3 布局模式(GUILayout)

分类:Unity、C#、VS2015

创建日期:2016-04-27

一、简介

在Unity 5.x中,GUI控件的布局方式有两种。

一种为固定布局,即在绘制控件的时候将位置参数传入,指定控件的精确位置。另一种是自动布局,适用于控件数量动态改变的情况。或者说,当你已经有了一个预先设计好的界面可以用来工作时,可以使用固定布局 (Fixed Layout)。

另一种为自动布局(Automatic Layout)。有时候开发者不太在乎控件的精确位置,而只是想让它们按一些简单方式显示出来就OK的情况,或者说,当你之前不知道需要多少元素,或者不想手动安置每个控件时,可以使用自动布局。比如,当您要根据保存游戏文件来创建若干不同按钮时,您可能不知道要绘制按钮的确切数目。在这种情况下使用自动布局会更方便。

如果希望使用自动布局,只需要使用CUlLayout类来替代前面例子中使用的GUI类,并去掉用Rect()指定的位置参数即可。

使用自动布局 (Automatic Layout) 时,存在两个关键的不同之处:

  • 使用 GUILayout,而非 GUI
  • 自动布局 (Automatic Layout Controls) 控件无需 Rect() 函数

例如:

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        // Fixed Layout
        GUI.Button (new Rect (25,25,100,30), "I am a Fixed Layout Button");

        // Automatic Layout
        GUILayout.Button ("I am an Automatic Layout Button");
    }
}

在固定布局 (Fixed Layout) 中,可以将不同的控件 (Controls) 放入 群组 (Groups) 。在自动布局 (Fixed Layout) 中,可以将不同的控件 (Controls) 放入 区域 (Areas)、水平群组 (Horizontal Groups) 和垂直群组 (Vertical Groups)。

在OnGUI()函数中,也可以混合使用固定布局和自动布局两种方式。

二、固定布局

群组 (Groups) 是固定布局模式 (Fixed Layout Mode) 下可用的惯例,使您能够定义包含多个控件 (Controls) 的屏幕区域。您通过使用GUI.BeginGroup() 函数和GUI.EndGroup() 函数来定义哪些控件 (Controls) 在一个群组 (Group) 内。一个群组 (Group) 内的所有控件 (Controls) 都将基于群组 (Group) 的左上角来放置而不是按屏幕的左上角。以此方式,当您在运行时重新调整该群组的位置时,群组内所有控件 (Controls) 的相对位置保持不变。

例如,可以很容易地把多个控件 (Controls) 放置在屏幕中心:

using UnityEngine;
using System.Collections;
public class GUITest : MonoBehaviour {
    void OnGUI () {
        // 在屏幕中心创建群组
        GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
        // 所有矩形经调整以适应于群组,其中(0,0)是群组的左上角
        // 创建框以便于知道群组在屏幕上的位置
        GUI.Box (new Rect (0,0,100,100), "Group is here");
        GUI.Button (new Rect (10,40,80,30), "Click me");

        // 结束前面开始的群组。这很重要,请记住!
        GUI.EndGroup ();
    }
}

效果如下:

也可以将多个群组 (Group) 嵌套进彼此内部。进行嵌套后,每个群组的内容都被剪切到其父级空间:

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    // 256 x 32 背景图像
    public Texture2D bgImage; 

    // 256 x 32 前景图像
    public Texture2D fgImage; 

    // 0.0 和 1.0 之间的一个浮点数
    public float playerEnergy = 1.0f; 

    void OnGUI () {
        // 创建群组 (Group) 来容纳两幅图像
        // 调整开始的 2 个坐标以便将其放置在屏幕上的其他某处
        GUI.BeginGroup (new Rect (0,0,256,32));

        // 绘制背景图像
        GUI.Box (new Rect (0,0,256,32), bgImage);

            // 创建将被剪切的第二群组 (Group)
            // 我们要剪切而不是缩放图像,所以需要第二群组 (Group)
            GUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));

            // 绘制前景图像
            GUI.Box (new Rect (0,0,256,32), fgImage);

            // 结束两个群组 (Groups)
            GUI.EndGroup ();

        GUI.EndGroup ();
    }
}

效果如下:

三、自动布局

1、Area

自动布局的确省了不少事,毕竟有时候在开发调试阶段不需要太关注GUI控件的精确摆放位置。但是当控件多了之后,全都自动布局就会显得太杂乱,这时候可以使用GUIlLayout.BeginArea和GUILayout.EndArea来指定自动布局要摆放的区域。换言之,通过这种方式,可对显示区域进行大致的划分。

区域 (Areas) 只在自动布局 (Automatic Layout) 模式中使用。区域在功能上与固定布局群组类似,因为它们定义了屏幕中有限的一部分来容纳 GUILayout 控件。由于自动布局 (Automatic Layout) 特性的原因,您几乎会总是用到区域 (Area)。

在自动布局 (Automatic Layout) 模式中,也可以不在控件层 (Control level) 定义要绘制控件的屏幕区域。控件 (Control) 将被自动放置到容纳区域的最左上角。这有可能是屏幕。您也可以创建手动放置区域 (Areas)。区域内的 GUILayout 控件 (GUILayout Control) 将被放置到该区域的最左上角。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        GUILayout.Button ("I am not inside an Area");
        GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));
        GUILayout.Button ("I am completely inside an Area");
        GUILayout.EndArea ();
    }
}

注意,在一个区域 (Area) 内,带按钮 (Buttons)、框 (Boxes) 等可见元素的控件都会将其宽度拉伸至区域 (Area) 的全长。

2、水平组和垂直组

在使用控件自动布局时,默认的摆放方式是从上到下依次排列绘制,如果想将控件在某些情况下水平排列,某些情况下垂直排列,可以通过水平组和垂直组进行控制,使用方式是调用GUILayout.BeginHorizontal和GUILayout.EndHorizontal设置水平组,调用GUILayout.BeginVertial和GUILayout.EndVertial设置垂直组。

水平组和垂直组可以嵌套使用。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    private float sliderValue = 1.0f;
    private float maxSliderValue = 10.0f;

    void OnGUI()
    {
        // 将所有内容纳入指定 GUI 区域
        GUILayout.BeginArea (new Rect (0,0,200,60));

        // 开始单个水平群组 (Horizontal Group)
        GUILayout.BeginHorizontal();

        // 按常规放置按钮 (Button)
        if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
        {
            maxSliderValue += 3.0f * Time.deltaTime;
        }

        // 将另外两个控件垂直地放在按钮 (Controls) 旁边
        GUILayout.BeginVertical();
        GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
        sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);

        // 结束群组 (Groups) 和 区域 (Area)
        GUILayout.EndVertical();
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
    }
}

效果如下:

3、GUILayout参数

如果想对自动布局的控件参数施加一些控制,可以使用GUlLayout参数。例如,当按钮上的文字很长的时候,使用GUILayout.Button绘制的按钮宽度会特别长,这时候可以传入GUlLayout参数来限制它的长度。

using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {

    void OnGUI () {
        GUILayout.BeginArea (new 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 ();
    }
}
时间: 2024-11-10 13:31:59

【Unity】8.3 布局模式(GUILayout)的相关文章

css布局模式

css布局模型在网页中,元素有三种布局模型: 流动模型(Flow) 浮动模型 (Float) 层模型(Layer) 流动Flow模型(一): 流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1

Android学习(四)——Android布局模式

除了上面我们谈过的控件外,其实还有非常多其他的.我们谈的基本都是非常基础的,因此其他的控件还需要学习者在后面制作中进行学习.除了这些组件外,我们还需要有一些东西把这些组件包含在内,这东西就是我们所说的布局. Android中有四种基本的布局模式(Layout):LinearLayout, RelativeLayout, TableLayout, FrameLayout  ———————————————————华丽丽的分割线—————————————————————— 1. LinearLayou

CSS的三种网页布局模式

流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100% 流动模型(二) 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平

布局模式

一:常见的布局模式 目前常见的网页布局有:固定布局,流式布局,弹性布局,响应式布局. 二:各种布局模式的布局方法,特点 1)固定布局: 网页中所有元素的尺寸一路使用px作为单位. 这种方式是最简单基础的,相信所有人在学习前端布局时都是这样搭出自己的网页的.无论对于设计还是开发人员,或者两者之间的交接,这种方式最简单直接没有异议,也没有兼容问题.但是缺点也显而易见,所有元素的大小都是写死的,这在不同尺寸的屏幕下表现出来的效果会有不同. 普通PC网站都采用这种布局. 在移动端也可以采用这种布局模式,

Flexbox布局模式的理解

Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的.在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现. <style> .container{ width: 600px; height: 400px; border: 1px solid #000; position: relative; } .box{ width: 200px; height: 100

互动教程,让你5分钟掌握 Flexbox 布局模式

Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的.这里分享一个基于 Knockout.js 构建的互动教程,让你5分钟就掌握 Flexbox 布局模式. 您可能感兴趣的相关文章 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 超赞!基于 Bootstrap 的响应式的后台管理模板 Magic CSS3 –

【Unity】基于MVC模式的背包系统 UGUI实现

本文基于MVC模式,用UGUI初步实现了背包系统. 包含点击和拖拽两种逻辑,先献上源代码,工程和分析稍后补充. Model 层 using UnityEngine; using UnityEngine.UI; using System.Collections; using System.Collections.Generic; /// <summary> /// 脚本功能:MVC模式--Model层,定义物品结构,保存物品数据 /// 添加对象:Bag 背包(Canvas下的空对象) ///

Unity编辑器 设置 Pivot模式和Center模式

想用Unity来做一些动画,用到Pivot来调整中点作为旋转点.但是回到家发现,Pivot那个蓝色小圈圈怎么都拖不动. 也不知道是怎么回事,就放着放了两天,今天到Google搜索到相关问题 http://forum.unity3d.com/threads/pivot-blue-circle-does-not-move.272698/ 原因是Unity Editor中可以设置是 Pivot模式 或者 Center 模式 版权声明:本文为博主原创文章,未经博主允许不得转载.

如何理解Unity组件化开发模式

Unity的开发模式核心:节点和组件,组件可以加载到任何节点上,每个组件都有 gameobject 属性,可以通过这个属性获取到该节点,即游戏物体. 也就是说游戏物体由节点和组件构成,每个组件表示物体的一种特性(能力). 可以按照三条线路去理解Unity的组件化开发模式: 1.场景树. 场景树由节点构成,使用了整体与局部的思想,如父亲节点移动,孩子节点会跟随移动,不用每个都去移动. Transform组件是每个节点必备的节点,并且记录了父亲节点与孩子节点之间的关系. 2.渲染关系 Mesh组件: