移动互联网开发技术实验指导书CH03-Android应用的UI设计.docx

PAGE  PAGE 6 上机实验 一、实验目的 1、理解Android系统“布局”的概念； 2、掌握常用的线性布局、相对布局、表格布局、网格布局的使用方法； 二、实验内容 1、相对布局。 设计相对布局的两个按钮utton1为Button2的参考。 <RelativeLayout xmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="260dp" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/button1" android:layout_marginBottom="100dp" android:layout_toRightOf="@+id/button1" android:text="Button2" /> </RelativeLayout> 相对布局是Android中默认的布局方式。本例中，layout_toRightOf设置Button2位于Button1的右边，marginBottom和alignBottom控制Botton2位于Botton1基线上方100dp。请更换marginBottom为-100dp查看效果。 将布局编辑界面的焦点停留在Button2上，可以但到布局的相对关系。 2、线性布局 设计如下竖向排列的三个按钮。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3" /> </LinearLayout> 线性布局使用<LinearLayout>标签表示，线性布局有水平布局和垂直布局两种，通过设置orientation属性实现。 3、表格布局 表格布局实现让空间以表格的形式整齐排列。 Table的行数由TableRow标签的数量决定，列数