Android 五种Layout的研究

Android共有五种Layout:

1. FrameLayout(帧布局)
2. LinearLayout(线性布局)
3. TableLayout(表单布局)
4. RelativeLayout(相对布局)
5. AbsoluteLayout(绝对布局)

---

对于FrameLayout的一些理解:

     FrameLayout的特点是,所有的控件在屏幕的左上角排布.你不能够为FrameLayout中的一个子元素指定位置,后一个子元素直接在前一个子元素之上进行覆盖填充.

---

对于LinearLayout的一些理解:

     

     LinearLayout的特点是,以垂直或者水平的方式排放子元素.LinearLayout保持子元素之间的间隔以及相互对其.

---

对于AbsoluteLayout的一些理解:

     AbsoluteLayout的特点是,所有元素以(x,y)坐标的形式摆放.(0,0)坐标点的位置就是屏幕的左上角.AbsoluteLayout没有边框,允许子元素相互重叠,虽然不是很建议这样做.一般来说,不推荐使用AbsoluteLayout,其代码过于刚性,在不同设备上的表现不一致,不利于兼容性.

---

对于TableLayout的一些理解:

     TableLayout的特点是,将子元素分配到行或列中.一个TableLayout由许多的TableRow组成，而每个TableRow 都会定义一个 row.

---

对于RelativeLayout的一些理解:

     RelativeLayout的特点是,允许子元素定义他们相对于父元素或者其他子元素的相对位置,这个是基于元素的ID来实现的.

---

 

少废话,代码为王.

主界面的代码:

package com.yongchun.layout;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		/*
		 * 加载引用并设置监听
		 */
		findViewById(R.id.linearlayout).setOnClickListener(this);
		findViewById(R.id.framelayout).setOnClickListener(this);
		findViewById(R.id.relativelayout).setOnClickListener(this);
		findViewById(R.id.tablelayout).setOnClickListener(this);
		findViewById(R.id.absolutelayout).setOnClickListener(this);

	}

	/*
	 * 监听的方法
	 */
	public void onClick(View v) {
		// TODO Auto-generated method stub
		Class<? extends Activity> action = null;
		Intent intent;
		switch (v.getId()) {
		case R.id.linearlayout:
			action = LinearLayout.class;
			break;
		case R.id.framelayout:
			action = FrameLayout.class;
			break;
		case R.id.relativelayout:
			action = RelativeLayout.class;
			break;
		case R.id.tablelayout:
			action = TableLayout.class;
			break;
		case R.id.absolutelayout:
			action = AbsoluteLayout.class;
			break;

		default:
			break;
		}

		intent = new Intent(MainActivity.this, action);
		startActivity(intent);
	}
}

五个布局的XML文件:

LinearLayout

   

<?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:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="这个是垂直排布的LinearLayout示例"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.51"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="水平排布"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>

</LinearLayout>

FrameLayout的XML文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frameLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="291dp"
        android:layout_height="430dp"
        android:background="#00FFFF"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="197dp"
        android:layout_height="345dp"
        android:background="#00FF00"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="141dp"
        android:layout_height="241dp"
        android:background="#000000"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="112dp"
        android:layout_height="135dp"
        android:background="#FFFFFF"
        android:text="TextView" />

</FrameLayout>

AbsoluteLayout的XML布局:

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/absolutelayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="32dp"
        android:layout_y="72dp"
        android:text="(32,72)" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="3dp"
        android:layout_y="432dp"
        android:text="(3,432)" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="64dp"
        android:layout_y="302dp"
        android:text="(64,302)" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="228dp"
        android:layout_y="349dp"
        android:text="(228,349)" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="247dp"
        android:layout_y="8dp"
        android:text="(247,8)" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="184dp"
        android:layout_y="103dp"
        android:text="(184,103)" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="132dp"
        android:layout_y="201dp"
        android:text="(132,201)" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="2dp"
        android:layout_y="3dp"
        android:text="(x,y)为控件的坐标值"
        android:textSize="20dp" />

</AbsoluteLayout>

RelativeLayout的XML布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/basebutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="对照控件" />

    <Button
        android:id="@+id/above_base"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/basebutton"
        android:layout_alignLeft="@+id/basebutton"
        android:layout_marginBottom="43dp"
        android:text="对照上方" />

    <Button
        android:id="@+id/below_base"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/basebutton"
        android:layout_below="@+id/basebutton"
        android:layout_marginTop="43dp"
        android:text="对照下方" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/above_base"
        android:text="对照右边" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/above_base"
        android:text="对照左边" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="布局左上" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="布局右上" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="布局左下" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="布局右下" />

</RelativeLayout>

TableLayout的XML布局:

<?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"
    android:stretchColumns="1" >

    <TableRow>

        <TextView
            android:layout_column="1"
            android:text="第一个tablerow第一个textview" />

        <TextView
            android:gravity="right"
            android:text="第一个tablerow第二个textview" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_column="1"
            android:text="第二个tablerow第一个textview" />

        <TextView
            android:gravity="right"
            android:text="第二个tablerow第二个textview" />
    </TableRow>

    <TableRow>

        <TextView android:text="第三个tablerow第一个textview" />

        <TextView android:text="第三个tablerow第二个textview" />

        <TextView
            android:gravity="right"
            android:text="第三个tablerow第三个textview" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_column="1"
            android:padding="3dip"
            android:text="第四个tablerow第一个textview" />
    </TableRow>

</TableLayout>

点击下载该Demo 点击下载该Demo 点击下载该Demo