天天看點

android 五種 布局檔案

    Android布局是應用界面開發的重要一環,在Android中,共有五種布局方式,分别是:LinearLayout (線性布局),FrameLayout(架構布

局),AbsoluteLayout(絕對布局),RelativeLayout(相對布局),TableLayout(表格布局)。

在windows下有預覽功能,可以在xml中檢視布局的樣式,在linux中無。

一、LinearLayout

      線性布局,這個東西,從外框上可以了解為一個div,他首先是一個一個從上往下羅列在螢幕上。每一個LinearLayout裡面又可分為垂直布局(android:orientation="vertical")和水準布局(android:orientation="horizontal" )。當垂直布局時,每一行就隻有一個元素,多個元素依次垂直往下;水準布局時,隻有一行,每一個元素依次向右排列。

  linearLayout中有一個重要的屬性 android:layout_weight="1",這個weight在垂直布局時,代表行距;水準的時候代表列寬;weight值越大就越大。

線形布局中預覽和真機中完全一樣。

TextView占一定的空間,沒有指派也有一定的寬高,要特别注意。

 二、FrameLayout

      FrameLayout是最簡單的一個布局對象。它被定制為你螢幕上的一個空白備用區域,之後你可以在其中填充一個單一對象 — 比如,一張你要釋出的圖檔。所有的子元素将會固定在螢幕的左上角;你不能為FrameLayout中的一個子元素指定一個位置。後一個子元素将會直接在前一個子元素之上進行覆寫填充,把它們部份或全部擋住(除非後一個子元素是透明的)。    

 三、AbsoluteLayout

   AbsoluteLayout 這個布局方式很簡單,主要屬性就兩個 layout_x 和 layout_y 分别定義 這個元件的絕對位置。 即,以螢幕左上角為(0,0)的坐标軸的x,y值,當向下或向右移動時,坐标值将變大。AbsoluteLayout 沒有頁邊框,允許元素之間互相重疊(盡管不推薦)。我們通常不推薦使用 AbsoluteLayout ,除非你有正當理由要使用它,因為它使界面代碼太過剛性,以至于在不同的裝置上可能不能很好地工作。

四、RelativeLayout

    相對布局可以了解為某一個元素為參照物,來定位的布局方式。

                android:layout_方向 = id  表示 在這個id對應的控件的方向上(上|下)

                android:layout_align方向  = id 表示和這個控件的(上下左右)對齊

                android: layout_to方向Of  = id 表示在這個控件的 左或者右

eg:

                  android:layout_below="@id/la1"/>

                将目前控件放置于id為la1 的控件下方。

                         android:layout_alignParentRight="true"

                使目前控件的右端和父控件的右端對齊。這裡屬性值隻能為true或false,預設false。

                 android:layout_marginLeft="10dip"

                使目前控件左邊空出相應的空間。

                         android:layout_toLeftOf="@id/true"

                使目前控件置于id為true的控件的左邊。

                         android:layout_alignTop="@id/ok"

                使目前控件與id為ok的控件上端對齊。

        五、TableLayout

       表格布局類似Html裡面的Table。每一個TableLayout裡面有表格行TableRow,TableRow裡面可以具體定義每一個元素。每個TableRow 都會定義一個 row (事實上,你可以定義其它的子對象,這在下面會解釋到)。TableLayout 容器不會顯示row 、cloumns 或cell 的邊框線。每個 row 擁有0個或多個的cell ;每個cell 擁有一個View 對象。表格由列和行組成許多的單元格。表格允許單元格為空。單元格不能跨列,這與HTML 中的不一樣。

  TabRow隻論行,不論列(列自定義)。

  每一個布局都有自己适合的方式,另外,這五個布局元素可以互相嵌套應用,做出美觀的界面。

例子:

android 五種 布局檔案

           1 線性布局(LinearLayout)

android 五種 布局檔案

描述:最簡單布局方式,依次向下進行排列。

android 五種 布局檔案

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

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

        android:orientation="vertical"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent">

    <Button android:text="Up" 

        android:id="@+id/Button03" 

        android:layout_width="fill_parent" 

        android:layout_height="wrap_content"></Button>

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

        android:orientation="horizontal" 

        android:layout_height="fill_parent">        

    <Button android:text="left" 

        android:id="@+id/Button01" 

        android:width="120px"

        android:layout_width="wrap_content" 

        android:layout_height="wrap_content"></Button>    

    <Button 

        android:text="right" 

        android:id="@+id/Button02" 

    </LinearLayout>

</LinearLayout>

android 五種 布局檔案

2、 表格布局(TableLayout)

android 五種 布局檔案

描述:類似于HTML table ,在其中間添加View 或是<TableRow></TableRow>控件。

android 五種 布局檔案

<TableLayout 

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

    android:id="@+id/TableLayout01"

    android:layout_width="fill_parent" android:layout_height="fill_parent">

    <TableRow android:gravity="center">

      <Button 

            android:text="@+id/Button01" 

            android:id="@+id/Button01" 

            android:layout_width="wrap_content" 

            android:layout_height="wrap_content">

       </Button>

    </TableRow>

        <TextView android:text="第一行第0列" 

                  android:layout_width="wrap_content" 

                  android:layout_height="wrap_content"></TextView>

        <TextView android:text="第一行第1列" 

     <TableRow android:gravity="center">

        <TextView android:text="第二行第0列" 

        <TextView android:text="第二行第1列" 

</TableLayout>

android 五種 布局檔案

3、 單幀布局(FrameLayout)

android 五種 布局檔案

描述:類似于HTML層疊

android 五種 布局檔案

<FrameLayout 

    android:layout_width="wrap_content" 

    android:layout_height="wrap_content">

    <ImageView 

        android:id="@+id/ImageView01"

        android:src="@drawable/circle_blue"

        android:layout_height="wrap_content">

    </ImageView>

        android:id="@+id/ImageView02"

        android:src="@drawable/circle_green"

        android:id="@+id/ImageView03"

        android:src="@drawable/circle_red"

</FrameLayout>

android 五種 布局檔案

4、 相對布局(RelativeLayout)

android 五種 布局檔案

描述:取決于對參照控件進行布局,父控件和子控件均可

常用屬性:android:layout_centerInParent=”true/false”        

          android:layout_above, android:layout_below

    android:layout_alignleft, android:layout_alignright.

android 五種 布局檔案

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

     <Button

          android:id="@+id/btnmiddle"

          android:text="MiddleButton"

          android:layout_width="200px"

          android:layout_height="wrap_content"

          android:layout_centerInParent="true">     

     </Button>

      <Button

          android:id="@+id/btnup"

          android:text="UpButton"

          android:layout_width="100px"

          android:layout_height="wrap_content"          

          android:layout_above="@id/btnmiddle"

          android:layout_alignLeft="@id/btnmiddle">     

          android:id="@+id/btndown"

          android:text="downButton"

          android:layout_below="@id/btnmiddle"

          android:layout_alignRight="@id/btnmiddle">     

</RelativeLayout>

android 五種 布局檔案

5、 坐标布局(AbsoluteLayout)

android 五種 布局檔案

描述:對其控件進行直接定位,增加靈活性。

常用屬性:android:layout_x,android:layout_y.

android 五種 布局檔案

<AbsoluteLayout

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

  android:layout_width="wrap_content"

  android:layout_height="wrap_content">

  <TextView 

       android:layout_width="wrap_content" 

       android:text="UserName:" 

       android:layout_height="wrap_content" 

       android:id="@+id/tvName" 

       android:layout_y="20dip" 

       android:layout_x="50dip">

       </TextView>

   <TextView 

       android:text="Password:" 

       android:id="@+id/tvPassword" 

       android:layout_y="100dip" 

       android:layout_x="55dip">

   <EditText

       android:layout_width="150px" 

       android:layout_y="10dip" 

       android:layout_x="120dip">

       </EditText>

       android:layout_y="90dip" 

</AbsoluteLayout>

android 五種 布局檔案

MyLayout.java

android 五種 布局檔案

package com.jay.Layout;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

public class MyLayout extends Activity {

    /** Called when the activity is first created. */

    private Button btnLinearlayout;

    private Button btnTablayout;

    private Button btnRelativelayout;

    private Button btnFramelayout;

    private Button btnAbsolutelayout;

    OnClickListener listener;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        CreateControl();

        listener = new OnClickListener() {

            @Override

            public void onClick(View v) {

                // TODO Auto-generated method stub

                switch (v.getId()) {

                    case R.id.btnlinearlayout:

                        setTitle("線性布局");

                        setContentView(R.layout.linearlayout);

                        break;

                    case R.id.btntableayout:

                        setTitle("表格布局");

                        setContentView(R.layout.tablelayout);

                    case R.id.btnrelativelayout:

                        setTitle("相對布局");

                        setContentView(R.layout.relativelayout);

                    case R.id.btnfreamelayout:

                        setTitle("單幀布局");

                        setContentView(R.layout.framelayout);

                    case R.id.btnabsolutelayout:

                        setTitle("坐标布局");

                        setContentView(R.layout.absolutelayout);

                }

            }

        };

        btnLinearlayout.setOnClickListener(listener);

        btnTablayout.setOnClickListener(listener);

        btnRelativelayout.setOnClickListener(listener);

        btnFramelayout.setOnClickListener(listener);

        btnAbsolutelayout.setOnClickListener(listener);

    }

    private void CreateControl() {

        // TODO Auto-generated method stub

        btnLinearlayout = (Button)findViewById(R.id.btnlinearlayout);

        btnTablayout = (Button)findViewById(R.id.btntableayout);

        btnRelativelayout = (Button)findViewById(R.id.btnrelativelayout);

        btnFramelayout = (Button)findViewById(R.id.btnfreamelayout);

        btnAbsolutelayout = (Button)findViewById(R.id.btnabsolutelayout);

}

android 五種 布局檔案

繼續閱讀