Android開發之路四——-布局

                       Android開發之路四-------布局

   Android的布局在主視窗上主要是分為四類，LinerLayout（線性布局），RelativeLayout（相對布局），TableLayout（表格版面配置），FreamLayout（幀布局）。下面就我來詳細的介紹這四種布局的特點。

 

一、LinerLayout布局

所謂的線性布局就是在該標籤下的所有子項目會根據其orientation屬性的值來確定是按行還是按列來顯示的。結合代碼來看一下

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

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/name_text"

        />

    <TableLayout 

          android:layout_width="match_parent"

          android:layout_height="match_parent"

          android:stretchColumns="2,1" 

        >

    <TableRow >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/yh_text" 

        />

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" />

    </TableRow>

    

         <TableRow >

     <TextView

         android:layout_width="fill_parent"

         android:layout_height="wrap_content"

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

     <EditText

         android:layout_width="fill_parent"

         android:layout_height="wrap_content" >

     </EditText>

   </TableRow>

   

              <RelativeLayout

         android:layout_width="fill_parent"

         android:layout_height="wrap_content" >

         <Button

             android:id="@+id/button1"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_alignParentLeft="true"

             android:layout_alignParentTop="true"

             android:layout_marginLeft="96dp"

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

         <Button

             android:id="@+id/cancel_button"

             android:layout_width="wrap_content"

             android:layout_height="wrap_content"

             android:layout_alignParentTop="true"

             android:layout_marginLeft="20dp"

             android:layout_toRightOf="@+id/button1"

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

     </RelativeLayout>  

</TableLayout> 

</LinearLayout>

這是一個登陸介面利用的是線性布局，只不過為了達到美觀所以這其中嵌套了相對布局和表格版面配置。

android:orientation="vertical" 這就是線性布局的關鍵，在orientation中來定義顯示的，vertical就是按列來顯示。運行一下來看看

這就是一個登陸介面，利用線性布局來實現的。

二、RelativeLayout布局

   相對布局中的視圖組件是按照相互之間的相對位置來確定的，並不像線性布局那樣按著行或者列來顯示的，執行個體的代碼

   

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:layout_marginLeft="42dp"

        android:layout_marginTop="50dp"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBaseline="@+id/button1"

        android:layout_alignBottom="@+id/button1"

        android:layout_alignParentRight="true"

        android:layout_marginRight="56dp"

        android:text="Button" />

    <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/button1"

        android:layout_centerVertical="true"

        android:text="Button" />

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignBaseline="@+id/button4"

        android:layout_alignBottom="@+id/button4"

        android:layout_alignLeft="@+id/button2"

        android:text="Button" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_above="@+id/button5"

        android:layout_centerHorizontal="true"

        android:layout_marginBottom="34dp"

        android:text="Button" />

</RelativeLayout>

   這是利用Button來是實現一圖形，來說明相對布局的用處，可以相對一些座標，來實現現已物體的位置 

  

三、TableLayout布局

表格版面配置的風格跟html中的表格中比較相似，就是採取的標籤不同而已，顯示的效果相同<TableLayout>標籤是頂級元素，是在表頭寫的，來定義整體的表格，<TableRow>是定義行,<TextVew>是定義一個儲存格中的內容，就是相當於html中的<td>標籤一樣，儲存格中的內容。

執行個體來示範表格版面配置的應用

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" 

    android:stretchColumns="*"

    >

    

    <TableRow >

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/name"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/gender"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/age"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/phonenumber"

            />

        

    </TableRow>

    

       <TableRow >

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/namezs"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/genderzs"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/agezs"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/phonenumberzs"

            />

        

    </TableRow>

    

              <TableRow >

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/namely"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/genderly"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/agely"

            />

        <TextView 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/phonenumberly"

            />

        

    </TableRow>

    

</TableLayout>

android:stretchColumns="*" 

是表格中的定義其表格大小的*是平均分。

顯示的結果是

姓名，性別，年齡，和電話是以表格的形式來顯示出來的。

四 FreamLayout布局

 幀布局中的每一個組件都是相當於一幀畫面，預設是以手機螢幕的左上方做為原點（0，0），按照定義的先後順序來依次逐屏顯示，後面出現的會覆蓋前面出現的，用該布局會實現動畫的效果。

下面就讓我們看看代碼：

 建一個FreamLayout.xml檔案

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" 

    android:layout_gravity="center"

    android:id="@+id/frame"

    >

</FrameLayout>

  建一個Android程式

package cn.csdn.class3g.activity;

import android.app.Activity;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.FrameLayout;

public class DeluActivity extends Activity {

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

   

FrameLayout frame=null;

boolean flag=true;

class MyHandler extends Handler {

int i = 0;

public void handleMessage(Message msg) {

i++;

show(i % 3);

sleep(500);

}

private void sleep(long delayMillis) {

// TODO Auto-generated method stub

if (flag) {

this.sendMessageDelayed(this.obtainMessage(0), delayMillis);

}

}

 void show(int j) {

         Drawable p1=getResources().getDrawable(R.drawable.p11);

         Drawable p2=getResources().getDrawable(R.drawable.p22);

         Drawable p3=getResources().getDrawable(R.drawable.p33);

         

         switch(j){

         case 0:

          frame.setForeground(p1);

          break;

         case 1:

          frame.setForeground(p2);

          break;

         case 2:

          frame.setForeground(p3);

          break;   

         }

 }

}

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

       

        setContentView(R.layout.fream_layout); 

        findVew();

         

        final MyHandler myHandler = new MyHandler();

        frame.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

// TODO Auto-generated method stub

flag=!flag;

myHandler.sleep(10);

}

});

        

    }

private void findVew() {

// TODO Auto-generated method stub

frame=(FrameLayout) this.findViewById(R.id.frame);

}

}

這樣就可以實現了一個動態幀布局

動態幀布局