3.丰富的表格布局
功能:使用TableLayout来管理组件的布局
效果图:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <!--定义死一个表格布局,指定第二列允许收缩,第三列允许拉伸--> <TableLayout android:id="@+id/TableLayout01" android:layout_width="match_parent" android:layout_height="wrap_content" android:shrinkColumns="1" android:stretchColumns="2"> <!--表格内容接下来详细讲解--> <!--直接添加按钮,它自己会占一行--> <Button android:id="@+id/ok1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮"/> <!--添加一个表格行--> <TableRow> <Button android:id="@+id/ok2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="收缩的按钮"/> <Button android:id="@+id/ok4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> </TableRow> </TableLayout> <!--定义第二个表格布局,指定第二列隐藏--> <TableLayout android:id="@+id/TableLayout02" android:layout_width="match_parent" android:layout_height="wrap_content" android:collapseColumns="1"> <!--表格内容接下来详解--> <Button android:id="@+id/ok5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮"/> <!--添加一个表格行--> <TableRow> <Button android:id="@+id/ok6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="隐藏按钮"/> <Button android:id="@+id/ok8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> </TableRow> </TableLayout> <!--定义第三个表格布局,指定第二列和第三列可以被拉伸--> <TableLayout android:id="@+id/TableLayout03" android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="1,2"> <!--表格内容接下来详细讲解--> <Button android:id="@+id/ok9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮"/> <!--添加一个表格行--> <TableRow> <Button android:id="@+id/ok10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> <Button android:id="@+id/ok12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> </TableRow> <!--定义一个表格行--> <TableRow> <Button android:id="@+id/ok13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/> <Button android:id="@+id/ok14" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="拉伸的按钮"/> </TableRow> </TableLayout> </LinearLayout>
上面页面中定义了3个TableLayout,3个TableLayout中粗体字代码指定了它们对各列的控制行为。
- 第1个TableLayout,指定第2列允许收缩,第3列允许拉伸。
- 第2个TableLayout,指定第二列被隐藏。
- 第3个TableLayout,指定第2列和第3列允许拉伸
注意:在上面的界面布局文件中我们直接把按钮上的文本写在布局文件中,这不是一种好的做法,因为Android推荐将这些字符串集中放到XML文件中管理。但此处为了编程简单,所以直接在XML布局文件中给出了按钮文本的字符串。
帧布局
效果图:
帧布局由FrameLayout所代表,FrameLayout直接继承了ViewGroup组件。
帧布局容器为每个加入其中的组件创建一个空白的区域(称为一帧),每个子组件占据一帧,这些帧都会根据gravity属性执行自动对齐。
FrameLayout常用的XML属性及相关方法说明:
XML属性&相关方法
android:foreground——setForeground(Drawable)
设置该帧布局的前景图像
android:foregroundGravity——setForegroundGravity(int)
定义绘制前景图像的gravity属性
FrameLayout包含的子元素也受FrameLayout.LayoutParams控制。因此它所包含的子元素也可指定android:layout_gravity属性,该属性控制该子元素在FrameLayout中的对齐方式。
下面示范了帧布局的用法,可以看到6个TextView叠加在一起,上面的TextView遮住下面的TextView。下面是帧布局页面定义代码:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--依次定义6个TextView,先定义的TextView位于底层,后定义的TextView位于上层--> <TextView android:id="@+id/view01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="160pt" android:height="160pt" android:background="#f00"/> <TextView android:id="@+id/view02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="130pt" android:height="130pt" android:background="#0f0"/> <TextView android:id="@+id/view03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="100pt" android:height="100pt" android:background="#00f"/> <TextView android:id="@+id/view04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="70pt" android:height="70pt" android:background="#ff0"/> <TextView android:id="@+id/view05" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="40pt" android:height="40pt" android:background="#f0f"/> <TextView android:id="@+id/view06" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:width="10pt" android:height="10pt" android:background="#0ff"/> </FrameLayout>
这6个TextView的高度、宽度逐渐减少——这样可以保证最先添加的TextView的背景色渐变。