安卓初级之六种布局方式

类似于java中的swing中的布局，android中也定义了几种布局方式，这里所有的布局管理器都是ViewGroup的子类。

android中布局方式有六种：

LinearLayout（线性布局）

FrameLayout（帧布局）

AbsoluteLayout（绝对布局）

RelativeLayout（相对布局）

TableLayout（表格布局）

GridLayout（网格布局）android4.0新出的布局

下面来一一介绍一下这六种布局：

一、LinearLayout（线性布局）：

        线性布局是按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前一个元素之后。

        代码：

       

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<!-- 水平布局 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮一"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮二"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮三"
/>
</LinearLayout>

<!-- 垂直布局 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮三"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮四"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮五"
/>
</LinearLayout>

</LinearLayout>

效果图：



二、FrameLayout（帧布局）：

        帧布局就是画面堆叠，帧布局是五大布局（五大布局里面没有GridLayout）中最简单的一个，在这个布局中，整个界面被当成一个空白区域，所有元素都在左上角，并且后面的元素覆盖在前面的元素之上。

       代码：

      

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
>
<TextView
android:layout_width="300dp"
android:layout_height="500dp"
android:layout_gravity="center"
android:background="@android:color/holo_blue_bright"
/>
<TextView
android:layout_width="200dp"
android:layout_height="400dp"
android:layout_gravity="center"
android:background="@android:color/holo_green_dark"
/>
<TextView
android:layout_width="100dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="@android:color/holo_purple"
/>
</FrameLayout>

</LinearLayout>
 

      效果图：

  


三、AbsoluteLayout（绝对布局）

         绝对布局是绝对位置的布局，在此布局中的子元素的 android:layout_x 和 android:layout_x 属性将生效，用于描述该子元素的坐标位置。屏幕左上角为坐标原点（0,0），本布局不建议使用，因为代码过于刚性，不能很好的适配各种终端。

        代码：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_x="20dp"
android:layout_y="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名："
/>
<EditText
android:layout_x="80dp"
android:layout_y="15dp"
android:layout_width="wrap_content"
android:width="200dp"
android:layout_height="wrap_content"
/>
<TextView
android:layout_x="20dp"
android:layout_y="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密码："
/>
<EditText
android:layout_x="80dp"
android:layout_y="75dp"
android:layout_width="wrap_content"
android:width="200dp"
android:layout_height="wrap_content"
/>
<Button
android:layout_x="130dp"
android:layout_y="135dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登录"
/>
</AbsoluteLayout>

</LinearLayout>

效果图：



四、RelativeLayout（相对布局）

        相对布局是按照各个子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效，在指定位置关系时，必须设置id属性，各个元素之间的关系都是通过id来判定的。

            android:layout_toLeftOf=""——该组件位于引用组件的左方

            android:layout_toRightOf=""——该组件位于引用组件的右方

            android:layout_above=""——该组件位于引用组件的上方

            android:layout_below=""——该组件位于引用组件的下方

            android:layout_alignParentLeft=""——该组件是否对其父组件的左端

            android:layout_alignParentRight=""——该组件是否对其父组件的右端

            android:layout_alignParentTop=""——该组件是否对其父组件的顶部

            android:layout_alignParentBottom=""——该组件是否对其父组件的底部

            android:layout_centerInParent=""——该组件是否相对于父组件居中

            android:layout_centerHorizontal=""——该组件是否横向居中

            android:layout_centerVertical=""——该组件是否垂直居中

       代码：

     

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"

>
<Button
android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="1"
android:layout_alignParentBottom="true"
android:gravity="center"
/>
<Button
android:id="@+id/button2"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
android:text="2"
android:layout_above="@+id/button1"
android:layout_toRightOf="@+id/button1"
/>
<Button
android:id="@+id/button3"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
android:text="3"
android:layout_above="@+id/button1"
android:layout_toRightOf="@+id/button2"
/>
</RelativeLayout>

</LinearLayout>

效果图：



五、TableLayout（表格布局）：

        表
deac
格布局适用于N行N列的布局格式，一个TableLayout由很多TableRow组成，一个TableRow就是TableLayout中的一行。表格布局只有行没有列。

        代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TableRow >
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="1"
android:gravity="center"
/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="2"
android:gravity="center"
/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="3"
android:gravity="center"
/>
</TableRow>
<TableRow >
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="4"
android:gravity="center"
/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="5"
android:gravity="center"
/>
</TableRow>
<TableRow >
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="6"
android:gravity="center"
/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="7"
android:gravity="center"
/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="8"
android:gravity="center"
/>
</TableRow>
</TableLayout>

</LinearLayout>

效果图：



六、GridLayout（网格布局）android4.0新出的布局：

        只能在android4.0之后的版本才能使用这个布局管理器，GridLayout相当于HTML里面的table标签，整个容器划分为rows*columns个网格， 网格放一个组件，也可以跨行或者跨列。

       代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black"
android:columnCount="4"
android:rowCount="6" >

<!-- 练习使用网格布局 -->

<TextView
android:id="@+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:background="@android:color/white"
android:text="0"
android:textSize="50dp" />

<Button
android:id="@+id/clear"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:text="清除"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/seven"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="7"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/eight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="8"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/nine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="9"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/multiply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="*"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="4"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="5"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="6"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="-"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="1"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="2"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="3"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="+"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/spot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="."
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="0"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/divide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="/"
android:textColor="@android:color/white"
android:textSize="50dp" />

<Button
android:id="@+id/eq"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center"
android:text="="
android:textColor="@android:color/white"
android:textSize="50dp" />
</GridLayout>

</LinearLayout>

效果图：



总结：布局方式一般会混合使用，所以使用布局时一定要灵活。

源码下载：http://download.csdn.net/detail/fancheng614/9889363