Android布局

Android布局

• 线性布局（LinearLayout）
• 相对布局（RelativeLayout）
• 帧布局（FrameLayout）
• 表格布局(TableLayout)

---

1. LinearLayout (线性布局)

下一个控件的坐标原点由上一个控件来决定，可以沿水平方向或者垂直方向上来排列控件。 如果控件是垂直排列的，那么可以给控件指定水平的居中方式。

• 效果
  

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.lizelu.userinterfacedemo.Main2Activity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--垂直线性布局方式-->
        <LinearLayout
            android:layout_width="60pt"
            android:layout_height="match_parent"
            android:background="#ff0000"
            android:orientation="vertical">
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50pt"
                android:background="#0000ff"
                android:orientation="horizontal">
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00ff00"
                android:orientation="horizontal">
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

2. 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"
    tools:context="com.example.lizelu.userinterfacedemo.Main3Activity">

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

    <Button
        android:id="@+id/button_above"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_center"
        android:layout_centerInParent="true"
        android:text="above"/>

    <Button
        android:id="@+id/button_below"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button_center"
        android:layout_centerInParent="true"
        android:text="below"/>

    <Button
        android:id="@+id/button_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button_center"
        android:layout_centerVertical="true"
        android:text="left"/>

    <Button
        android:id="@+id/button_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button_center"
        android:layout_centerVertical="true"
        android:text="right"/>

</RelativeLayout>

3. FrameLayout（帧布局）

坐标原点是屏幕的左上角，位置固定，你只需为控件指定大小即可。

• 效果
  

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.lizelu.userinterfacedemo.Main4Activity">

   <FrameLayout
       android:layout_width="120pt"
       android:layout_height="120pt"
       android:background="#00ff00">
       <FrameLayout
           android:layout_width="100pt"
           android:layout_height="100pt"
           android:background="#00f0f0">
       </FrameLayout>

       <FrameLayout
           android:layout_width="80pt"
           android:layout_height="80pt"
           android:background="#0000ff">
       </FrameLayout>

       <FrameLayout
           android:layout_width="60pt"
           android:layout_height="60pt"
           android:background="#00ffff">
       </FrameLayout>

       <FrameLayout
           android:layout_width="40pt"
           android:layout_height="40pt"
           android:background="#000000">
       </FrameLayout>

   </FrameLayout>

</RelativeLayout>

4. TableLayout（表格布局）

通过画表格的方式来实现布局。 在表格布局中，整个页面就相当于一张大的表格，控件就放在每个Cell中。

• 效果
  

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="1">
        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="用户名:"/>
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入用户名"/>
        </TableRow>

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

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

    </TableLayout>