android开发之布局

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

目前用得比较多的布局有线性布局、相对布局以及帧布局。

线性布局

特点：组件一个挨着一个排列，通过设置，可以是横向排列或者是纵向排列。

帧布局

特点：一个组件一帧，叠加在一起，起始位置都在布局的左上角，可以通过设置控制组件位置。

如下面的xml文件，定义了6个TextView,每一个TextView都设置在布局的正中间，每一个颜色都不一样，并且越在外层，面积越小，就形成了如下效果。注意，在帧布局中，越后声明的控件在越上层，如果a控件在b控件之前声明，那么a控件会被b控件覆盖。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<!-- 依次定义6个TextView,先定义的TextView位于底层
    后定义的TextView位于上层 -->
<TextView android:id="@+id/view01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="320px"
    android:height="320px"
    android:background="#f00"
    />
<TextView android:id="@+id/view02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="280px"
    android:height="280px"
    android:background="#0f0"
    />
<TextView android:id="@+id/view03"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="240px"
    android:height="240px"
    android:background="#00f"
    />
<TextView android:id="@+id/view04"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="200px"
    android:height="200px"
    android:background="#ff0"
    />
<TextView android:id="@+id/view05"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="160px"
    android:height="160px"
    android:background="#f0f"
    />
<TextView android:id="@+id/view06"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:width="120px"
    android:height="120px"
    android:background="#0ff"
    />
</FrameLayout>

效果：

图1

相对布局

特点：组件位置可以通过相对兄弟组件、父容器来决定。

如下面的代码，其效果如图2如示，第一个TextView通过android:layout_centerInParent="true" 使其位于布局正中间，而接下来4个TextView则通过描述其相对于第一个TextView位置来设置其位置，从而形成图2的效果。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<!-- 定义该组件位于父容器中间 -->    
<TextView 
    android:id="@+id/view01"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/leaf"
    android:layout_centerInParent="true"
    />
<!-- 定义该组件位于view01组件的上方 -->
<TextView 
    android:id="@+id/view02"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/leaf"
    android:layout_above="@id/view01"
    android:layout_alignLeft="@id/view01"
    />
<!-- 定义该组件位于view01组件的下方 -->
<TextView 
    android:id="@+id/view03"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/leaf"
    android:layout_below="@id/view01"
    android:layout_alignLeft="@id/view01"
    />
<!-- 定义该组件位于view01组件的左边 -->
<TextView 
    android:id="@+id/view04"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/leaf"
    android:layout_toLeftOf="@id/view01"
    android:layout_alignTop="@id/view01"
    />
<!-- 定义该组件位于view01组件的右边 -->
<TextView 
    android:id="@+id/view05"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/leaf"
    android:layout_toRightOf="@id/view01"
    android:layout_alignTop="@id/view01"
    />        
</RelativeLayout>