android如何观察布局,Android Studio实战 - 设计布局之View 和 ViewGroup介绍

尽管Activity是根元素，但它通常包含多个View和 ViewGroup对象。View是屏幕上所有的可见组件(包括视图组合)的超类，这些组件的例子有按钮、文本框、文本输入控件和复选框等元素。视图中通常包含一个或多个视图组合。视图组合表示一个或更多视图对象的集合。视图组合可以通过多级嵌套来创建复杂的布局。视图组合的主要职责是控制一个或多个内嵌View或 ViewGroup对象的布局。多种不同类型的视图组合会控制其子组件 的位置。

有多种布局容器对象。每个布局对象有着不同的行为并使用特有的位置属性。

LinearLayout、Relative Layout、Frame Layouts TableLayout 和 GridLayout 是核心的布局容器。

为更好地理解每个布局的工作原理，让我们看几个例子。使用New Project Wizard启动一个名为SimpleLayouts的新项目。选 择 Phone and Tablet外形参数，设置最低A PI为14(IceCreamSandwich), 并使用 Blank Activity 模板。保留默认名称为 MainActivity，Layout Name框中的内容为activity_main.xml, 接着继续创建项目。你应该会进入主Activity布局

的编辑模式，如图8-1所示。

一、 预览面板

在新项目中，可以从文本编辑模式开始设计主Activity的布局XML。如果项目未处于这个模式，按 Ctrl+Shift+N | Cmd+Shift+O 打开 File Search 对话框，输入名称 activity_main来查找主布局。设计布局时，Android Studio同时支持文本模式和设计模式，你应该熟练掌 握它们。使用Editor窗口左下方的选项卡可在这些模式之间切换。默认的文本模式允许你 像处理所有其他源文件那样直接编辑XML文件。

预览面板位于Editor的右侧，让你能够在进行修改的过程中实时地看到布局的样子。

也可以通过在Configuration Render菜单中选择Preview All Screen Sizes选项，来预览布局在多种设备上的外观。Vnlual Device下拉菜单中有着相同的可用选项。这两个菜单都位于 预览面板的左上角。可以切换预览选项的开和关并观察其工作方式。

预览面板的顶部有一些控件，允许你修改预览的渲染方式。可以在定义了 AVD的任意设备上渲染预览效果。可以同时预览多个设备。也可以修改用于渲染预览界面的API级别和主题。表 8-2描述了预览面板中的标记区域，它们突出显示在图8-2中。

在文本模式中，选择RelativeLayout标签并将其起始和结束标签设置为FrameLayouto 注意，预览面板中没有发生任何改变，因为只是改变了根布局标签，但尚未触及里面的任何内容。稍后你将会学到关于这些布局之间差异的更多知识。

在内嵌的TextView中选择“Hello World” 文本，它将会自动扩展为“@string/hello_ world”，这是一个指向外部strings.xml文件中文本的引用。Android Studio的代码折叠特性会默认隐藏外部字符串引用。按 Ctrl + - 1 Cmd + -可以折叠(或者说收起)属性的呈现形式； 按 Ctrl + = | Cmd + =展开它，即可看到实际属性值。在 Android布局中硬编码字符串值被 认为是坏的实践，使用字符串引用是更好的处理方法。在诸如这里创建的简单示例中，硬编码字符串并不会有什么问题，但商业App可能需要支持多种语言，而外部字符串可以简化这个过程。因此，养成使用外部字符串的习惯是一个好主意。

引用是资源文件中编码的特殊属性值，它指向在其他地方定义的实际值。在本例中，特殊字符串“ @string/hello_world” 引 用 在 strings.xml资源文件中定义的一个值。按住Ctrl(或Cmd)键并单击文本，导航到“Hello World” 字符串定义，它看上去应该类似于以下 这样：

将值修改为“ Hello Android Studio!”。按 下 Ctrl + A lt+ 向左箭头|Cmd + A lt+ 向左箭

头导航回到布局，观察预览面板中己更新的值。现在将文本修改为随机的硬编码值，例如

“Goodbye，Las Vegas!”，预览将会再次更新；但这种情况下，你直接重写了字符串。随着 你修改TextView，预览面板也将会更新。

Hello world!

二、 宽度和高度

文本视图是可以添加到布局的多种视图之一。每个视图均有用于控制其大小的宽度和高度属性。可以设置绝对像素值(例如250px)或者使用一种相对值(例如250dp)o最好使用 带有dp后缀的相对值，因为这使得组件能够基于设备的像素密度调整尺寸。相对尺寸会在后面的8.3.1小节中介绍。将 TextView标签改为Button标签，并将android:layout_width属 性改为match_parento文本视图将会变成一个按钮并延伸至整个屏幕的长度。将 android:Iayout_ height属性改为match_parent。这个按钮将会占据整个屏幕。将 android: layout_width属性

改为wrap_content，按钮宽度将变窄，但仍占据整个屏幕高度。match_parent是一个特殊的 相对值，它基于视图的父容器来确定其尺寸。图8-3展示了将matdvparent用于组件宽度和 /或高度的可能变化。wrap_content是另一个广泛使用的相对值，它会调整视图的大小，使其 紧紧地包裹住内容。将 Button标签改为TextView标签，将其宽度和髙度设置为matchjjarent 并向布局中添加一些其他组件，如 Button和 CheckBox,参见代码清单8-1中的定义。

代码清单8 -1 向布局中添加更多组件

注意这些组件全部重叠在了一起。图 8-4展示了这个问题。FrameLayout的行为是按照 组件定义的顺序来堆叠它们。现在删除额外的堆叠组件，以便可以探索设计器模式并理解如何可视化地摆放组件。

让我们研究一下FrameLayout容器标签。这个标签定义了两个属性—— android: layout_width和 android:layout_height，均指定为match_parent。这意味着巾贞的宽度和高度将与包含它的父组件的宽度和高度一致。由 于 FrameLayout在最外层(或者说是根元素)，因 此它是所有其他组件的父组件。因此，它的宽度和高度将覆盖设备屏幕的整个可视化区域。

三、设计器模式

单击Editor左下方的Design选项卡(如图8-5所示)开启设计模式。在这一节中，你将要探索如何使用Visual Designer来放置控件。

与文本模式相同，设计模式有着相同的实时预览面板，但增加了一个组件调板。当以可视化方式设计布局时，可将组件从调板拖放到预览面板中。可视化设计器会自动生成XM L,同时让你专注于布局的界面外观。设计模式还配有右上角的组件树面板以及下方的属性面板。组件树给出了当前布局中所有视图和视图组合组件的层次视图。顶部为根组件， 在本例中为FrameLayout。