android开发基础知识（3） ---五大布局

android基础知识总结（3）

-------五大布局

Android程序可分为五中布局，其中线性布局（LinearLayout）和相对布局（RelativeLayout）比较常用，其他在一些特定条件下应用。

（一）线性布局（LinearLayout）:

可分为横向和纵向两种，顾名思义，线性布局是把控件一个一个往界面上线性摆列。

设置线性布局为水平方向
android:orientation="horizontal"
设置线性布局为垂直方向
android:orientation="vertical"
设置正比例分配控件范围

android:layout_weight="1"
设置控件显示位置，这里为水平居中
android:gravity="center_horizontal"

每个控件在自己范围内可以设置自定义大小，代码如下：

<?xml version="1.0"encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="horizontal"

android:gravity="center_horizontal"

android:layout_weight="2"

>

<ImageView

android:layout_width="156dp"

android:layout_height="76dp"

android:src="@drawable/my" />

<TextView

android:layout_width="62dp"

android:layout_height="wrap_content"

android:background="#FF0000"

android:text="@string/hello"

android:textColor="#000000"/>

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="水平方向"

/>

</LinearLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1"

android:orientation="vertical" >

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/my" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/hi" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Canking"/>

</LinearLayout>

</LinearLayout>

(二）相对布局

相对布局就是按照控件的相对位置的方向来摆放控件。android手机屏幕的分辨率大不相同，所以为了考虑屏幕自适应的情况，可以使用相对布局，它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。

设置距父元素右对齐
android:layout_alignParentRight="true"
设置该控件在id为re_edit_0控件的下方
android:layout_below="@id/re_edit_0"
设置该控件在id为re_image_0控件的左边
android:layout_toLeftOf="@id/re_iamge_0"
设置当前控件与id为name控件的上方对齐
android:layout_alignTop="@id/name"
设置偏移的像素值
android:layout_marginRight="30dip"

代码为：

<?xml version="1.0"encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<EditText

android:id="@+id/re_edit_0"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="相对布局"

android:layout_alignParentRight="true"

/>

<ImageView

android:id="@+id/re_iamge_0"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_below="@id/re_edit_0"

android:src="@drawable/my" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="学习安卓ing"

android:textColor="@drawable/none"

android:layout_toRightOf="@id/re_iamge_0"

/>

<EditText

android:id="@+id/re_edit_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/study"

android:layout_alignParentBottom="true"

/>

<ImageView

android:id="@+id/re_iamge_1"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_above="@id/re_edit_1"

android:layout_alignParentRight="true"

android:src="@drawable/my" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#FF0000"

android:text="努力工作"

android:textColor="#000000"

android:textSize="18dip"

android:layout_toLeftOf="@id/re_iamge_1"

android:layout_above="@id/re_edit_1"

/>

</RelativeLayout>

相对布局经常和线性布局嵌套使用，灵活配合布局的技巧。使得用户体验简单自然。

三 帧布局
原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖，最后绘制的控件会盖住之前的控件。可以实现图片的重叠效果。

代码为：

<?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">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/my"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/love"

android:background="#0011111f"

android:textSize="18dip"

/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/my"

android:layout_gravity="bottom"

/>

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#00000000"

android:text="程序猿要珍惜身边的人"

android:layout_gravity="bottom"

/>

</FrameLayout>

此处文字背景为透明色，可以设置透明色来达到不同的界面体验感觉。

四绝对布局

绝对布局可以把控件摆放在屏幕范围内任何一个像素点上，可以设置任意控件的 在屏幕中 X Y 坐标点，和帧布局一样后绘制的控件会覆盖住之前绘制的控件。但手机显示屏分辨率的不同使得绝对布局会在不同机上显示效果有差距，所以少用此布局为好。

代码为：

<?xml version="1.0"encoding="utf-8"?>

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<ImageView

android:layout_width="120"

android:layout_height="120"

android:src="@drawable/my"

android:layout_x="80dip"

android:layout_y="50dip"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="当前坐标点 x = 80dip y = 50dip"

android:background="#1f000aaa"

android:textColor="#FF0000"

android:textSize="18dip"

android:layout_x="80dip"

android:layout_y="50dip"

/>

<ImageView

android:layout_width="120dp"

android:layout_height="120dp"

android:src="@drawable/my"

android:layout_x="50dip"

android:layout_y="300dip"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="当前坐标点 x = 50dip y =300 dip"

android:background="#FFFFFF"

android:textColor="#FF0000"

android:textSize="18dip"

android:layout_x="30dip"

android:layout_y="280dip"

/>

</AbsoluteLayout>

五表格布局

在表格布局中可以设置TableRow 可以设置 表格中每一行显示的内容 以及位置.

代码实现：

<?xml version="1.0"encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/my"

android:layout_gravity="center"

/>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip">

<TextView

android:text="姓名"

android:gravity="left"

/>

<TextView

android:text="电话"

android:gravity="right"/>

</TableRow>

<View

android:layout_height="2dip"

android:background="#FFFFFF"/>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip">

<TextView

android:text="张三"

android:gravity="left"

/>

<TextView

android:text="123456789"

android:gravity="right"/>

</TableRow>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip">

<TextView

android:text="李四"

android:gravity="left"

/>

<TextView

android:text="15810463139"

android:gravity="right"/>

</TableRow>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip">

<TextView

android:text="王五"

android:gravity="left"

/>

<TextView

android:text="15810463139"

android:gravity="right"/>

</TableRow>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip"

>

<TextView

android:text="姓名"

android:gravity="left"

/>

<TextView

android:text="性别"

android:gravity="right"/>

</TableRow>

<View

android:layout_height="2dip"

android:background="#FFFFFF"/>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip"

>

<TextView

android:text="张三"

android:gravity="left"

/>

<TextView

android:text="男"

android:gravity="right"/>

</TableRow>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip">

<TextView

android:text="李四"

android:gravity="left"

/>

<TextView

android:text="女"

android:gravity="right"/>

</TableRow>

<TableRow

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:padding="10dip">

<TextView

android:text="王五"

android:gravity="left"

/>

<TextView

android:text="男"

android:gravity="right"/>

</TableRow>

</TableLayout>

设计良好的用户界面体验，是对这五种布局巧妙的嵌套配合使用，此处只是列出了布局的基本功能。