星期日, 9月 25, 2011

Declaring Layout

Android應用程式學習筆記

Declaring Layout

佈局(Layout，以下都稱作布局)是在一個activity中使用者介面的結構，它定義了佈局結構及確保每個元素顯示給使用者，你有兩種方式可以宣告你的布局:

  • Declaring UI elements in XML
    Android提供對應view類與子類的簡單XML詞彙，例如，部件與佈局。
  • Instantiate layout elements at runtime
    你的應用程式能在編程時建立View及ViewGroup。
Android架構給妳相當高的靈活性，你可以使用其中一種方式或兩種方式都用來宣告與管理你的應用程式的使用者介面。例如，你可以在XML宣告你的應用程式的預設布局，包括顯示在布局上的屏幕元素及佈局的屬性。你可以在應用程式中添加程式碼，在執行時修改屏幕物件的狀態，包括宣告在XML的也可以修改。

在XML宣告你的使用者介面的好處是使你更能從控制使用者介面行為的程式碼中分離出來，將你的使用者介面的描述從應用程式程式碼中分離出來，如此表示你可以修改或調整使用者介面描述不需要修改原始碼及重新編譯。例如，你可以為不同取向的介面、不同裝置屏幕大小、不同語言來建立布局文件。此外，在XML宣告布局更容易想像使用者介面的結構，如此就能更輕鬆的調適錯誤。

一般來說，宣告UI元件的XML詞彙緊隨類別與方法的結構與命名，這裡元件名稱對應到類別名稱，屬性名稱對應到方法。事實上，該隊應是非常直覺的，你可以猜到甚麼樣的屬性對應甚麼樣的方法，或者甚麼樣的方法對應到給定的xml元件。然而不是所友都能辨識出來，在一些案例中，有一些命名有輕微的不同。例如，EditView元件有一個text屬性對應了EditView.settext()方法。


Write the XML

使用android的XML詞彙，你可以快速地設計你的UI及UI中的屏幕元件，與你用HTML建立網頁的方式一樣-有許多巢狀標籤。

每個布局文件必須確切地包含一個根標籤，它必須是View或ViewGroup物件。一旦你定義了根標籤，你可以增加其他的布局物件及部件作為子標籤，逐步建立起定義布局的View階層樹。例子，以下有一個XML文件使用了垂直的線性布局並容納了一個TextView與一個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" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

在XML宣告了你的布局後，儲存為.xml附檔名的檔案，並存在res/layout目錄下，


Load the XML Resource

當你編譯你的應用程式，每一個XML布局文件編譯成View資源，你應該從程式碼中載入布局資源，在Activity.onCreate()回呼方法中實現。藉著呼叫setContentView()方法，用R.layout.layout_filenam格式來引用布局資源。例如如果你的布局文件存為main_layout.xml，你就會如此為activity載入此文件:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

當你的activity啟動時，android架構會去呼叫在activity中的onCreate()回呼方法。


Attributes

每個View與ViewGroup物件支持它們自己的XML屬性，有些屬性是給特定View物件(例如，TextView物件支持textSize屬性)，這些屬性也是繼承自任何繼承自這個類別的View物件。有些屬性對於所有View物件是普遍的，因為它們都是繼承自根View類別(如Id屬性)。且其他屬性被視為"布局參數"，它們是描述View物件的布局取向。

ID
任何一個View物件都有一個整數ID屬性伴隨，辨識在階層樹中的View的唯一標籤。當應用程式被編譯，這個ID以一個整數被引用，但是ID屬性在XML文件中通常被分配為一個字串。ID屬性對所有View物件是相當普遍的且你會很常使用到它，在XML文件中是如此表示的:

android:id="@+id/my_button"

字串開頭的@表示XML解析器應該分析及擴展其餘的字串並視為一個ID資源。加號符號(+)是表示這是一個新的資源名稱，必須鍵立即增加到我們的資源(R.java檔案)。Android架構提供許多其他ID資源，當引用一個ID資源時，你不需要加號符號，但是必須加上android package namesapce，如以下:

android:id="@android:id/empty"

有android package namespace，我們現在從android.R資源中引用一個ID。
為了建立試圖以及從應用程式引用它們，普遍的模式是:

  1. 定義view/widget物件並分配一個唯一的ID:
    <Button android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>
  2. 建立view物件實體，從佈局中取得它(通常在onCreate()方法中):
    Button myButton = (Button) findViewById(R.id.my_button);
當建立RelativeLay時，為view物件定義ID是相當重要的。在相對布局(Relativelayout)中，兄弟view物件可以定義布局相對於其他兄弟view物件透過引用唯一的ID來達成。


Layout Parameters

XML布局屬性命名為layout_something來為view定義布局參數，對ViewGroup也是如此。

每個ViewGroup類都是繼承ViewGroup.LayoutParams來實現巢狀類，這個子類包括定義每個子view物件的大小及位置的特性，ViewGroup物件也是。以下圖示顯示父view group來定義每個子view的布局參數。


注意每個布局參數子類都有自己的語法來設定數值，每個子元件必須定義布局參數。

每個view小組包括寬和高(layout_width及layout_height)，且每個view也必須定義它們，許多布局參數也包括選擇邊沿與邊界。

你可以指定確切的尺寸，雖然你通常不想如此，更加平常的是，擬將使用這些常數來設定寬和高:
  • wrap_contents
    告訴你的view物件自己的尺寸需要包含內容，意思就是view的尺寸要剛好能容納內容。
  • fill_parent
    告訴你的view物件尺寸與父view物件一樣大。
一般來說，是不推薦使用絕對單位如像素指定布局的寬和高，取而代之的是使用相對尺寸如 density-independent pixel (dp)、wrap_contents、fill_parent是較適合的方式，因為能幫助確保你的應用程式顯示在不同的裝置上。


Layout Position

View的幾何形狀是矩形，view都有它的位置，可以用left和top一對來表示、用二維座標來表示、用寬和高來表示。位置和座標的單位都是像素。

呼叫getLeft()和getTop()方法取得view物件的位置是有可能的，前者回傳left或X來表示view的座標，後者回傳top或Y來表示座標。這些方法皆是回傳與它的父view物件相對的位置，例如，getLeft()回傳20，表示位於父view物件的左邊緣右邊20像素的位置。

此外，有提供許多方便的方法來避免不必要的運算，如getRight()和getBottom()。


Size , Pading and Margin

一個view大小可以表示成寬和高，實際上一個view具有兩組的寬和高。

第一組是measured width和measured height，這些尺寸定義了view在父view物件想要有多大，測量的尺寸能藉著呼叫getMeasuredWidth()方法和getMeasuredHeight()方法取得寬和高。

第二組是width和height，或有時是drawing width和drawing height，這些尺寸定義了view實際在屏幕上的大小，這些數值可能與measured width和measrued height的數值不同，我們可以呼叫getWidth()方法和getHeight()方法取得寬和高。

去測量尺寸時，view是有考慮到填充的大小，Padding是表示view的左側、頂部、右側、底部的大小，Padding可以用像素來彌補view的內容，例如left padding of 2就是只view的內容往左邊界的右邊推出去2個像素。我們可以呼叫setPadding(int ,int ,int ,int)來設定Padding以及呼叫getPaddingLeft()、getPaddingTop()、getPaddingRight()、getPaddingBottom()來取得Padding大小。



好了，以上是宣告布局的內容，以下做一個整理:
在這篇內容中說道如何宣告一個布局、如何設定布局的屬性。

1.我們有兩種方式能宣告布局，有就是說我們有兩種方式能編輯activity的使用者介面。
  • 在XML中編輯。
  • 在程式碼中編輯。
建議是將使用者介面的布局編輯在XMl文件中。

2.使用View和ViewGroup對應的標籤來編輯布局文件。
  • <RelativeLayout>對應RalativeLayout。
  • <TextView>對應TextView。
  • <Button>對應Button。
  • ...
3.在activity的onCreate()方法中呼叫setContentView()來取得布局資源。

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

4.在布局文件中設定View和ViewGroup的屬性。

5.view與viewgroup之間的關聯。

6.布局文件中view與viewgroup的位置設定。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)