android学习之布局（layout）

Android系统提供了5种布局，分别是：框架布局（FrameLayout）、线性布局（LinearLayout）、相对布局（RelativeLayout）、表格布局（TableLayout）、绝对布局（AbsoluteLayout）。合理的利用5种布局，可以随心所欲的控制试图的大小和位置。

一、框架布局

框架布局，所有添加到这个布局中的视图都以层叠的方式显示，最后一个添加进来的在最顶层，上层的试图会覆盖掉底层的试图。

下面的代码用5个TextView实现了一个霓虹灯效果（如下图所示）。

package wbhuang.example33;

import android.view.View;
import android.os.Handler;
import android.app.Activity;
import android.os.Bundle;

public class Example33Activity extends Activity implements Runnable 
{
	private int[] colors = new int[]{ 0xFFFF0000, 0xFF00FF00, 0xFF0000FF, 0xFFFF00FF, 0xFF00FFFF };
	private int[] nextColorPointers = new int[]{ 1, 2, 3, 4, 0};
	private View[] views;
	private int currentColorPointer = 0;
	private Handler handler;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        views = new View[]
        {
        	findViewById(R.id.textview5), findViewById(R.id.textview4),
        	findViewById(R.id.textview3), findViewById(R.id.textview2),
        	findViewById(R.id.textview1)
        };
        handler = new Handler();
        handler.postDelayed(this, 300);
    }
    
    public void run()
    {
    	int nextColorPointer = currentColorPointer;
    	for(int i=views.length-1; i>=0; i--)
    	{
    		views[i].setBackgroundColor(colors[nextColorPointers[nextColorPointer]]);
    		nextColorPointer = nextColorPointers[nextColorPointer];
    	}
    	currentColorPointer = (++currentColorPointer)%5;
    	handler.postDelayed(this, 300);
    }
}

main.xml

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

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    	<TextView android:id="@+id/textview1" android:layout_width="300dp"
    	    android:layout_height="300dp" android:layout_gravity="center"/>
    	<TextView android:id="@+id/textview2" android:layout_width="240dp"
    	    android:layout_height="240dp" android:layout_gravity="center"/>
    	<TextView android:id="@+id/textview3" android:layout_width="180dp"
    	    android:layout_height="180dp" android:layout_gravity="center"/>
    	<TextView android:id="@+id/textview4" android:layout_width="120dp"
    	    android:layout_height="120dp" android:layout_gravity="center"/>
    	<TextView android:id="@+id/textview5" android:layout_width="60dp"
    	    android:layout_height="60dp" android:layout_gravity="center"/>
	</FrameLayout>
    
    <!--TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" /-->	    

</LinearLayout>

二、线性布局

线性布局可分为水平线性布局和垂直线性布局。通过orientation属性可以设置线性布局的方向，gravity属性可以控制布局中视图的位置，其可取值有：top，bottom，left，right，center_vertical，center_horizontal，center。下面的示例代码实现如下效果，四角和中心各放一个button。

<?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:orientation="horizontal"
        android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1">  
    	<LinearLayout android:orientation="vertical"
        	android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1">
        	<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        	    android:text="左上按钮" android:layout_gravity="left"/>
        </LinearLayout>
        <LinearLayout android:orientation="vertical"
        	android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1">
    		<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        	    android:text="右上按钮" android:layout_gravity="right"/>
        </LinearLayout>
	</LinearLayout>
	<LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1">  
    	<LinearLayout android:orientation="vertical"
        	android:layout_width="fill_parent" android:layout_height="fill_parent" 
        	android:layout_weight="1" android:gravity="left|bottom">
    		<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        	    android:text="左下按钮" />
        </LinearLayout>
    	<LinearLayout android:orientation="vertical"
        	android:layout_width="fill_parent" android:layout_height="fill_parent" 
        	android:layout_weight="1" android:gravity="right|bottom">
        	<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        	    android:text="右下按钮"/>
        </LinearLayout>
	</LinearLayout>
</LinearLayout>

三、相对布局

相对布局可以设置某一个试图相对于其他试图的位置。这些位置包括上下左右。还可通过android:layout_alignBaseline设置试图的底端对齐。如下的布局代码实现一个梅花效果。

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

    <RelativeLayout 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:textSize="20dp"
            android:text="按钮1"/>
        <Button android:id="@+id/button2" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="20dp"
            android:text="按钮2" android:layout_toRightOf="@id/button1"
            android:layout_below="@id/button1"/>
        <Button android:id="@+id/button3" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="20dp"
            android:text="按钮3" android:layout_toLeftOf="@id/button2"
            android:layout_below="@id/button2"/>
        <Button android:id="@+id/button4" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="20dp"
            android:text="按钮4" android:layout_toRightOf="@id/button2"
            android:layout_above="@id/button2"/>
        <Button android:id="@+id/button5" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="20dp"
            android:text="按钮5" android:layout_toRightOf="@id/button2"
            android:layout_below="@id/button2"/>
   	</RelativeLayout>>     
    
</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">

    <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:stretchColumns="*">
    	<TableRow>
    		<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="按钮二"/>
    	</TableRow>    
    	<TableRow>
    		<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="按钮五"/>
    	</TableRow>  
    	<TableRow>
    		<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮六" android:layout_gravity="center_horizontal"/>
    	</TableRow> 
 	</TableLayout>   
    
</LinearLayout>

五、绝对布局

绝对布局，就是任意设置视图的位置。通过android:layout_x，android:layout_y设置横纵坐标。如下代码示例

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

    <AbsoluteLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
    	<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
    	    android:layout_x="40dp" android:layout_y="80dp" android:text="Button"/>    
   	</AbsoluteLayout>
    
</LinearLayout>

posted @ 2012-09-14 09:58 $逝水无痕$ 阅读(182) 评论(0) 编辑收藏举报

刷新页面返回顶部

$逝水无痕$

android学习之布局（layout）

公告