Android学习笔记---布局方式(二)(RelativeLayout,TableLayout布局)
Android学习笔记 RelativeLayout,TableLayout布局
一.RelativeLayout相对布局方式.
RelativeLayout顾名思义，相对布局，在这个容器内部的子元素们可以使用彼此之间的相对位置或者和容器间的相对位置来进行定位。
注意：不能在RelativeLayout容器本身和他的子元素之间产生循环依赖，比如说，不能将RelativeLayout的高设置成为WRAP_CONTENT的时候将子元素的高设置成为 ALIGN_PARENT_BOTTOM。
RelativeLayout相关的布局属性:
android:layout_above 将该控件置于给定ID的控件之上
android:layout_below 将该控件的置于给定ID控件之下
android:layout_toLeftOf 将该控件置于给定ID的控件之左
android:layout_toRightOf 将该控件置于给定ID的控件之右
RelativeLayout布局中相对于父控件来说位置属性：
android:layout_alignParentLeft 如果为True，该控件位于父控件的左部
android:layout_alignParentRight 如果为True，该控件位于父控件的右部
android:layout_alignParentTop 如果为True，该控件位于父控件的顶部
android:layout_alignParentBottom 如果为True，该控件位于父控件的底部
RelativeLayout布局时对齐相关的属性：
android:layout_alignBaseline 该控件基线对齐给定ID的基线
android:layout_alignBottom 该控件于给定ID的控件底部对齐
android:layout_alignLeft 该控件于给定ID的控件左对齐
android:layout_alignRight 该控件于给定ID的控件右对齐
android:layout_alignTop 该控件于给定ID的控件顶对齐
android:layout_centerHorizontal 如果为True，该控件将被置于水平方向的中央
android:layout_centerInParent 如为Ture，该控件将被置于父控件水平方向和垂直方向
android:layout_centerVertical 如果为True，该控件将被置于垂直方向的中央
Relative布局一：效果图：RelativeLayoutOne布局
布局源码：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10px" android:background="#00aa00" tools:context=".RelativeLayoutActivity" > <TextView android:id="@+id/tv_heard" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:textSize="12pt" android:text="XXX系统登录界面" /> <TextView android:id="@+id/tv_account" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_below="@id/tv_heard" android:layout_marginTop="30px" android:text="用户名:"/> <EditText android:id="@+id/txt_account" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/tv_heard" android:layout_toRightOf="@id/tv_account" android:layout_alignBaseline="@id/tv_account"/> <TextView android:id="@+id/tv_pwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tv_account" android:layout_marginTop="30px" android:text="密 码:"/> <EditText android:id="@+id/txt_pwd" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/txt_account" android:layout_toRightOf="@id/tv_pwd" android:layout_alignBaseline="@id/tv_pwd"/> <Button android:id="@+id/btn_exit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/txt_pwd" android:layout_alignParentRight="true" android:layout_marginTop="30px" android:text="退出"/> <Button android:id="@+id/btn_login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/txt_pwd" android:layout_toLeftOf="@id/btn_exit" android:layout_marginTop="30px" android:layout_marginRight="50px" android:text="登录"/> </RelativeLayout>
RelativeLayoutSecond布局效果图：使用 LinearLayout和 RelativeLayout结合布局更加快捷方便。
布局源码：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00aaff" android:padding="10px" tools:context=".RelativeLayoutSecondActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:textSize="12pt" android:text="XXX系统登录界面" /> <LinearLayout android:id="@+id/linear_one" android:layout_below="@id/tv_heard" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="用户名:"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:id="@+id/linear_second" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:layout_below="@id/linear_one"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密 码:"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:id="@+id/linear_third" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:layout_below="@id/linear_second" android:gravity="right"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="30px" android:text="退出"/> </LinearLayout> </RelativeLayout>
二.TableLayout表格布局:
1.TableLayout和Html网页上见到的Table有所不同，TableLayout没有边框的
2.它是由多个TableRow对象组成，每个TableRow可以有0个或多个单元格，每个单元格就是一个View。这些TableRow，单元格不能设置layout_width,宽度默认是fill_parent的，只有高度layout_height可以自定义，默认是wrap_content。
3.在TableRow中的单元格可以为empty，并且通过android:layout_column可以设置index值（索引从0开始）实现跳开某些单元格，直接报控件放置指定索引的单元格中。
4.添加View,设置layout_height以及背景色，就可以实现一条间隔线。android:layout_span可以设置合并几个单元格。
TableLayout主要属性介绍:
android:collapseColumns：隐藏指定的列
android:shrinkColumns：收缩指定的列以适合屏幕，不会挤出屏幕
android:stretchColumns：尽量把指定的列填充空白部分
android:layout_column:控件放在指定的列
android:layout_span:该控件所跨越的列数
先布局一个效果图：
布局源码：
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".TableLayoutOneActivity" > <TableRow> <Button android:text="第一行第一列"/> <Button android:text="第一行第二列"/> <Button android:text="第一行第三列"/> </TableRow> <TableRow> <Button android:text="第二行第一列"/> <Button android:text="第二行第二列"/> <Button android:text="第二行第三列"/> </TableRow> <TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列"/> </TableRow> </TableLayout>
现在隐藏第二列：android:collapseColumns="1" 如果同时隐藏 第二列和第三列 可以这样：android:collapseColumns="1,2";用,逗号分割。
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:collapseColumns="1" <!--影藏第二列 列的索引从0开始 --> tools:context=".TableLayoutOneActivity" >
效果图：
android:stretchColumns="2" 使第三列填充整个屏幕 如果想使 第一列 和 第三列 填充剩余空白区域 （第一列 和 第二列 相同宽度填充空白区域）
设置为：android:stretchColumns="0,2";
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:collapseColumns="1" android:stretchColumns="2" <!--使第三列填充剩余空白部分 -->
tools:context=".TableLayoutOneActivity">
效果图： android:stretchColumns="0,2"; 效果图：
android:shrinkColumns：收缩指定的列以适合屏幕，不会挤出屏幕
<TableRow> <Button android:text="第一行第一列"/> <Button android:text="第一行第二列"/> <Button android:text="第一行第三列第一行第三列第一行第三列第一行第三列"/> </TableRow>
将第一行第三列 设置的文本过长。导致多与的文本超出屏幕无法显示：如图：
设置 android:shrinkColumns="2";第三列收缩 以适应屏幕的宽度。此时第三列出现换行。
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:shrinkColumns="2"<!---第三列收缩以适应屏幕的宽度--> tools:context=".TableLayoutOneActivity" >
效果图：
注意：android:shrinkColumns和android:stretchColumns的值都是以0开始的index，
但必须是string值，即用"1,2,5"来表示。可以用"*"来表示all columns。而且同一column可以同时设置为shrinkable和stretchable。
android:layout_column="2":控件放在指定的列,将Button放到第三行第三列的位置。
布局源码：
<TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列" android:layout_column="2"/> <!---将此Button放置到第三列--> </TableRow>
效果图：
android:layout_span="2":该控件所跨越的列数 。此空间跨越2列
<TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列" android:layout_span="2"/><!---此Button跨越2列。占据第二列和第三列--> </TableRow>
效果图：
三：TableLayout实现边框效果：
为了醒目，需要给TableLayout设定边框来区分不同的表格中的信息：
主要是通过设定TableLayout、TableRow 、View颜色反衬出边框的颜色。
例如TableLayout的android:layout_margin="2dip"设置为这个数字 ，
在指定一个背景色android:background="#00ff00"，它里面的颜色也是这样子的设置，就可以呈现出带边框的效果了。
四：滚动：
关于TableLayout和HorizontalScrollView一起使用时的宽度问题
我有一个TableLayout，它的内容是动态生成的。我遇到了下面的问题：
当动态生成的一行的内容太长时，靠右边的内容会被遮住了。于是我想要这个TableLayout在横向上可以滚动。
解决的办法是，用HorizontalScrollView包装TableLayout，这样，当内容很长时，就会出现横向滚动条。
修改图：
布局源码：
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true" android:background="#0000ff"> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="2px" android:background="#00ff00" tools:context=".TableLayoutOneActivity" > <TableRow> <Button android:text="第一行第一列"/> <Button android:text="第一行第二列"/> <Button android:text="第一行第三列第一行第三列第一行第三列第一行第三列第一行第三列"/> </TableRow> <!-- 设置分割线 --> <View android:layout_height="2dip" android:background="#ff0000"/> <TableRow> <Button android:text="第二行第一列"/> <Button android:text="第二行第二列"/> <Button android:text="第二行第三列"/> </TableRow> <!-- 设置分割线 --> <View android:layout_height="2dip" android:background="#ff0000"/> <TableRow> <Button android:text="第三行第一列"/> <Button android:text="第三行第二列"/> </TableRow> </TableLayout> </HorizontalScrollView>
如果：隐藏第三行，此时行的内容比较少，将不能填充所以空白区域就会 出现 行不能占满这个屏幕:
将布局代码修改为：
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true" <!--删除此处代码--> android:background="#0000ff"> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="2px" android:background="#00ff00" android:collapseColumns="2"<---添加此代码隐藏数据最多的行--> tools:context=".TableLayoutOneActivity" >
效果图就会出现：
在源码中添加：
设置HorizontalScrollView的android:fillViewport="true" TableLayout填充剩余部分。
效果为：
注意：
但此时又出现了另一个问题，加上HorizontalScrollView后，虽然我已经设了TableLayout的宽度是fill_parent。但当内容较少时，TableLayout还是根据内容自适应宽度，不能满屏。
此时，需要设置一个属性就能解决问题了。设置HorizontalScrollView的android:fillViewport="true"。也就是设置是否将HorizontalScrollView的内容宽度拉伸以适应视口(viewport)
