Android学习笔记（九）

浏览数：40 / 时间：2015年06月11日

Android中的四种基本布局

1.LinearLayout

LinearLayout称为线性布局，是一种常用的布局。修改activity_main.xml中的代码，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/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="@string/button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button3" />

</LinearLayout>

上述的代码中，指定了一个垂直的线性布局，而且在布局中添加了三个Button，每个Button的长度和宽度都是wrap_content，

其中android:orientation属性为LinearLayout中的控件排列方向，

android:orientation="horizontal" 表示水平方向

android:orientation="vertical" 表示垂直方向

如果不指定android:orientation属性的值，默认的排列方向就是horizontal。

运行程序得到下图的效果：

技术分享

注意：如果LinearLayout的排列方向是horizontal，内部的控件就绝对不能将宽度指定为match_parent。

如果LinearLayout的排列方向是vertical，内部的控件就绝对不能将高度指定为match_parent。

android:layout_gravity用于指定控件在布局中的对齐方式。在Button中指定android:layout_gravity属性值，代码如下：

<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="@string/button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="@string/button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="@string/button3" />

</LinearLayout>

上述的代码就是指定控件在布局中的对齐方式，需要注意的是：

当LinearLayout的排列方向是horizontal时，只有垂直方向上的对齐方式才会生效，因为此时水平方向上的长度是不固定的。

当LinearLayout的排列方向是vertical时，只有水平方向上的对齐方式才会生效。

重新运行程序，效果如下图所示：

技术分享

LinearLayout中有一个重要的属性，android:layout_weight。这个属性允许使用比例的方式来指定控件的大小。

下面的代码是编写一个消息发送的界面，需要一个文本编辑框和一个发送按钮，修改activity_main.xml中的代码，如下所示：

<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:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="@string/input_message"/>
    
    <Button
        android:id="@+id/send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/send" />

</LinearLayout>

上述的代码中，在EditText和Button里都将android:layout_weight属性的值指定为1，这表示EditText和Button将在水平方向

平分宽度，重新运行程序，得到下图所示的效果：

技术分享

为什么将android:layout_weight属性的值同时指定为1就会平分屏幕的？

原因是：系统会先把LinearLayout下所有控件指定的layout_weight相加，得到一个总值，

然后每个控件所占大小的比例就是用该控件的layout_weight值除以刚才算出的总值。

2.RelativeLayout

RelativeLayout又称为相对布局，也是一种常用的布局，修改activity_main.xml中的代码，如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="@string/button2" />

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

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="@string/button4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="@string/button5" />

  
</RelativeLayout>

运行程序，得到如下图的效果：

技术分享

上面的控件都是相对于父布局进行定位的，那控件相同于控件进行定位呢？修改代码，如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="@string/button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="@string/button2" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="@string/button4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="@string/button5" />

</RelativeLayout>

注意：当一个控件去引用另一个控件的id时，该控件一定要定义在引用控件的后面，不然会找不到id。重新运行程序，得到下图的效果：

技术分享

3.FrameLayout

FrameLayout布局相对来说比较简单，该布局没有任何的定位方式，所有的控件都会摆放在布局的左上角。

4.TableLayout

TableLayout允许使用表格的方式来排列控件，在设计表格时尽量让每一行都拥有相同的列数。

设计一个界面，允许用户输入帐号和密码后登录，修改activity_main.xml中的代码，如下所示：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1" >
    

    <TableRow>

        <TextView
            android:id="@+id/text_view1"
            android:layout_height="wrap_content"
            android:text="@string/text_view1" />

        <EditText
            android:id="@+id/account"
            android:layout_height="wrap_content"
            android:hint="@string/account" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/text_view2"
            android:layout_height="wrap_content"
            android:text="@string/text_view2" />

        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:inputType="textPassword" />
    </TableRow>

    <TableRow>

        <Button 
            android:id="@+id/login"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="@string/login" />
    </TableRow>

</TableLayout>