android studio 布局嵌套,Android Studio实战 - 设计布局之嵌套布局

通过布局的嵌套可以创造出复杂的设计。如果想要美化之前的个人信息界面，可以采用 将 LinearLayout嵌入到RelativeLayout中的方法。这个布局包含一个在线状态标签和一 个描述字段。

单击调板中的竖直LinearLayout,然后在预览面板中Image View的下方单击并放置它。

确保工具提示显示alignParentLeft和 below=imageView。单击调板中的Plain TextView，接着在新添加的LinearLayout内部单击并放置此组件。这将是你的在线状态标识符。接着找 到 Large Text组件；在调板中单击它，这次在右侧组件树中找到另一个新添加的TextView, 在其下方单击并放置组件。当把鼠标移到LinearLayout中TextView的下方时，将出现一个 较粗的放置目标标识符，如图8-12所示。

使用属性面板，将第一个TextView的文本属性修改为online并为下方Text View的文 本属性添加描述。接下来在预览面板的任意位置单击并按下Ctrl + A|Cmd + A以选中所有 组件。找到layout:margin属性，展开它，将所有值设置为5dp，让每个组件有5像素的外 边距，如图8-13所示。

外边距控制组件的边与任意相邻组件之间的空白大小。为每个组件设置外边框是一种避免出现界面混乱的好方法。虽然我们为所有组件设置了相同的外边距.但也可以在某些边上实验并设置不同的外边距。

layoutmargin组包含用于4 条边界的设置：左边距、上边距、右边距和下边距。再次 选择所有组件，展开layout:margin设置并选择All选项。删除5dp这个值，转而将左侧外 边距设置为5dpo 这些组件将会紧密地聚合在一起，但是左侧外边距刚好留出了足够的空 间。选择文本内容为online的 TextView,将其顶部外边距设置为5 d p ,让它和上方图像之 间有更大的空间。图8-14展示了此时的界面。代码清单8-5呈现了此布局对应的代码。

代码清单 8-5 relative_example.xml 的代码 

〈TextView android: layout_width=,,wrap_content" android: layout_height=’’wrap_content" android:text=u Clifton Craig" android:id="@+id/textViewl" android:layout_alignParentTop=n truen android: layout_toRightOf='*@+id/imageViewn android:layout_marginLeft="5dp" />

android:layout_width="wrap_content" android:layout_height="wrap_content" android: text=’’http: //codeforfun . wordpress . com" android:id=n @+id/textView3" android: layout_below=n (a+icl/textView2n android:layout_toRightOf=n @+id/imageViewn android:layout_marginLeft=*'5dp" />

in Java” android:layout_marginLeft="5dpH />

另一种嵌套布局的方法是使用include间接引用它们。找到LinearLayout并修改其特性， 加入一个值为details的 id 特性，并确保将其高度设置为wrap_contento同时修改并设置layout_below特性，使其下移到textView3的底部。这体现在以下代码中：

接下来在最后一个TextView标签之后，在 LinearLayout结束标签之前添加以下内容：〈include layout=’’@layout/three_button" android:layout_width=nmatch_parentn android: layout_height="wrap_content*' android:layout_below="@id/details"/>

这个特定的include标签可将任意预先定义好的布局添加到当前布局中。在前一个例子 中，我们在当前布局中引入了之前创建的三个按钮示例。将宽度声明为match_parent(扩展 了布局的整体宽度)，将高度设置为wrap_content。再将按钮布局设置在details组件下方 (details是相对布局的名称)。

Ctrl+单 击 | Cmd+单击布局特性值@layout/three_button，导航到它的定义。在定义内部， 修改每个按钮的文本，使其对应于社交网络App中可用的典型操作。按照顺序将每个按钮 的文本特性修改为Add Friend、Follow和 Message。在文本或设计模式中都可以完成这件 事。图8-15展示了它在设计模式中的样子。

完成后，回 到 relative_example.xml并查看已经集成好的按钮。图 8-16展示了完成后 的样子。