第一行代码3.3-详解四种基本布局

1、LinearLayout
下面介绍LinearLayout的几个基本属性：
1.1 layout_gravity
　　前面介绍了gravity的属性是控制控件内文字的对齐方式，layout_gravity则指定了该控件相对于父控件的对齐方式。和orientation一样，它也分垂直和水平方向。但是，垂直方向的对齐只有在orientation为horizontal的时候才生效，因为在水平方向的位置是会随着控件的变化而变化，不确定的。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button 1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Button 2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button 3" />

</LinearLayout>

1.2 android:layout_weight
　　这个可以说是控制控件大小的非常重要的属性。它控制控件宽度的计算公式为：原来的宽度+剩余宽度*所占比例。下面通过例子来说明：
　　一个信息发送界面一般包括一个文本编辑框和一个发送按钮：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <EditText android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="请输入信息"/>

    <Button android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="发送"/>

</LinearLayout>

　　因为两者的宽度一开始都为0，所以它们的原有宽度都为0，假设屏幕的宽度为L，剩余宽度就是L，然后各自占有的比例都是1/2，所以最后的效果就是两个控件各占一般的屏幕宽度。
　　现在把weight调整，EditText为2，Button为3，效果如下：
　　　　　　　
　　这是因为EditText的权重变成了2/5，Button变成了3/5，权重大的所占宽度就大。
　　但是如果我把两个的layout_width都设置成match_parent，又会怎样？
　　　　　　　
　　两者最后占的宽度刚好反过来了！我们根据公式算一遍就知道为什么了：首先两者所占宽度都为L（因为是match_parent），所以剩余宽度为L-L-L=-L，然后EditText的权重是2/5，所以最终的宽度为L+(-L)*3/5=2L/5，Button的最终宽度为L+(-L)*2/5=3L/5。发现权重大的，最后的宽度反而更小！
　　所以当使用layout_weight来控制控件的宽度时，最好将layout_width设置为0dp，这样宽度才是和权重成正比。
　　更好的效果的实现：button可以不用很大，所以设置它的宽度为wrap_content，然后EditText的权重为1，效果如下：
　　　　　　　　　
　　这样看起来是不是更舒服一些呢？

2、RelativeLayout
　　这个布局和线性布局相比更加随意，因为每一个控件的位置都和其他某些控件有相对的位置关系。所以相对布局可用的属性非常多。
　　下面这个例子定义了5个button，然后它们和整个RelativeLayout都有相对位置关系：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent" 
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"/>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"/>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_centerInParent="true" />

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮4"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"/>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮5"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

　　效果如下：

　　前面的例子是相对父控件来定位的，那么相对其他子控件之间怎么定位呢？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent" 
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:text="按钮3"
        android:layout_centerInParent="true" />

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1" 
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"/>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"/>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮4"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"/>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮5"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"/>
</RelativeLayout>

　　layout_below表示这个控件位于另一个控件的下方；layout_toLeftOf表示位于另一个控件的左边。还有其他的属性比如layout_alignLeft表示该控件的左边界和另一个控件的左边界对齐，注意是同一个边界对齐，所以一般用在文字的显示上。

3、FrameLayout
　　这种布局是四种布局中最简单的：所有控件默认都会被放到左上角，因此应用场景少了很多。当然也不是不能调节它的位置，比如可以通过layout_gravity设置控件的位置，可以靠左靠右(left/right)，也可以位于水平或者竖直方向的中间(center_horizontal/center_vertical)。
　　当然每个控件都要这么调节位置太麻烦了，这也是FrameLayout不被广泛使用的原因：每一个控件之间默认位置都一样，而且之间也没有任何位置关系。

4、TableLayout
　　使用表格的方式来控制布局，可以合并列或行。
　　下面这个例子为登录界面：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow >
        <TextView
            android:layout_height="wrap_content"
            android:text="账户名："/>
        <EditText android:layout_height="wrap_content"
            android:hint="请输入帐户名"/>
    </TableRow>

    <TableRow >
        <TextView android:layout_height="wrap_content"
            android:text="密码："/>
        <EditText android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="请输入密码"/>
    </TableRow>

    <TableRow >
        <Button android:layout_height="wrap_content"
            android:text="登录"
            android:layout_span="2"/>
    </TableRow>
</TableLayout>

　　可以看到TableLayout的特点：不用定义控件的宽度，每一列的宽度都是一样的，以该列中需要宽度最长的为准。如果需要延伸一列，定义layout_span就可以。（然而我的eclipse不会自动补全这个属性）
　　但是这两行都没有占满整一行，我们可以设置TableLayout的stretchColumns来让TableRow中的某一列进行拉伸，达到自动适应屏幕宽度的作用。

　　其实，如果要实现类似表格的效果，用GridLayout是更方便的，而且延伸行和列都可以。下面简单展示一下GridLayout的用法：

<!-- GridLayout -->
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:columnCount="4" 
    android:id="@+id/grid_layout">

    <Button android:id="@+id/one"
        android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="/"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="*"/>
    <Button android:text="0" android:layout_columnSpan="2" android:layout_gravity="fill"/>
    <Button android:text="." />
    <Button android:text="+" android:layout_rowSpan="2" android:layout_gravity="fill"/>
    <Button android:text="=" android:layout_columnSpan="3" android:layout_gravity="fill" />

</GridLayout>