Android——四种基本布局

1.线性布局LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <span style="color:#ff0000;">android:orientation="horizontal"</span> >

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        <span style="color:#cc33cc;">android:layout_weight="1"</span>
        android:hint="Type something" />
    
    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send" />

</LinearLayout>

属性解释：

android:orientation="horizontal"//控件水平排列
android:orientation="vertical"//控件垂直排列

 android:layout_weight="1"//若多个控件用layout_weight，则按此所占总和宽度的比例排布。此例只一个控件用此属性，则horizontal水平方向占满Button剩下的全部比例。

2.相对布局RelativeLayout

<<span style="color:#009900;">RelativeLayout</span> 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"
<span style="color:#ff6600;">        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"</span>
        android:text="Button 1" />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
<span style="color:#ff6600;">        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"</span>
        android:text="Button 2" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
<span style="color:#ff6600;">        android:layout_centerInParent="true"</span>
        android:text="Button 3" />
    
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
<span style="color:#ff6600;">        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"</span>
        android:text="Button 4" />
    
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     <span style="color:#ff6600;">   android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"</span>
        android:text="Button 5" />

<span style="color:#33cc00;"></RelativeLayout></span>

这些按钮通过父布局Parent进行定位，效果图如下：

另外，如果要指定控件垂直或水平方向在整体布局中的对齐方式（要先指定了水平对齐horizontal或垂直对齐vertical），可用android:layout_gravity属性。

android:layout_gravity="top"

android:layout_gravity="center_vertical"

android:layout_gravity="bottom"

也可以相对于控件进行定位：

<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"
        <span style="color:#ff6600;">android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"</span>
        android:text="Button 1" />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <span style="color:#ff6600;">android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"</span>
        android:text="Button 2" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button 3" />
    
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <span style="color:#ff6600;">android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"</span>
        android:text="Button 4" />
    
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <span style="color:#ff6600;">android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"</span>
        android:text="Button 5" />

</RelativeLayout>

另外四个按钮都相对于Button3定位，效果图如下：

3.框架布局FrameLayout

<FrameLayout 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:text="Button 1" />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />
    
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 4" />
    
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 5" />

</FrameLayout>

所有控件都会摆放在布局的左上角，即使使用了定位的属性（例如android:layout_below="@id/button3"     android:layout_toLeftOf="@id/button3"也会失效）

效果如下：

五个按钮都堆叠在了左上角（后堆的覆盖在先堆的上面）。

4.表格布局TableLayout

<<span style="color:#ff6600;">TableLayout</span> xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <span style="color:#ff6600;"><TableRow></span>
        <TextView
            android:layout_height="wrap_content"
            android:text="Account:" />
    <EditText
        android:id="@+id/account"
        android:layout_height="wrap_content"
        android:hint="Input your account" />
    <span style="color:#ff6600;"></TableRow></span>
    
   <span style="color:#ff6600;"> <TableRow></span>
        <TextView
            android:layout_height="wrap_content"
            android:text="PassWord:" />
    <EditText
        android:id="@+id/password"
        android:layout_height="wrap_content"
        android:hint="textpassword" />
    <span style="color:#ff6600;"></TableRow>
    
    <TableRow></span>
        <Button
            android:id="@+id/login"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="Login" />
   <span style="color:#ff6600;"> </TableRow></span>
<span style="color:#ff6600;">
</TableLayout></span>

注意：TableRow内的控件不能指定宽度。

每加入一对<TableRow> </TableRow>就增加一行。

此例为三行两列的表格，其中第三行只有一个Button按钮，因此使用layout_span="2"对单元格合并，效果如下：

然而此时表格右边空出一片没填满，而TableRow内控件又不能指定宽度，可加一句android:stretchColumns="x"意思为当行宽度未填满时可自动拉伸第x+1列。

例如刚刚的例子要拉伸第二列，即编辑框EditText，则加android:stretchColumns="1"

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <span style="color:#cc33cc;">android:stretchColumns="1"</span> >
    
    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:text="Account:" />
    <EditText
        android:id="@+id/account"
        android:layout_height="wrap_content"
        android:hint="Input your account" />
    </TableRow>
    
    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:text="PassWord:" />
    <EditText
        android:id="@+id/password"
        android:layout_height="wrap_content"
        android:hint="textpassword" />
    </TableRow>
    
    <TableRow>
        <Button
            android:id="@+id/login"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="Login" />
    </TableRow>

</TableLayout>

效果如下：

总结一下，四种基本布局有：

1.线性布局LinearLayout
2.相对布局RelativeLayout

3.框架布局FrameLayout

4.表格布局TableLayout