檢視畫面的版面配置

試用 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用版面配置。
瞭解 Compose 版面配置的基本概念 →

版面配置定義了應用程式使用者介面的結構，例如 換 活動。 這類版面配置的建構方式是 「View」和 ViewGroup 如需儲存大量結構化物件 建議使用 Cloud BigtableView 通常會繪製使用者可查看的內容 互動。ViewGroup 是隱藏的容器，會定義 View 和其他 ViewGroup 的版面配置結構 物件，如圖 1 所示。

圖 1. 插圖：定義檢視區塊階層， 使用者介面版面配置。

View 物件通常稱為「小工具」，可以是 許多子類別 Button 或 TextView。 ViewGroup 物件通常稱為版面配置，可以是 提供不同版面配置結構的多種類型，例如 LinearLayout 或 ConstraintLayout。

您可以透過下列兩種方式宣告版面配置：

  • 在 XML 中宣告 UI 元素。Android 提供簡單明瞭的 XML 與 View 類別和子類別相對應的詞彙 就像用於小工具和版面配置的小工具您也可以使用 Android Studio 的 可透過版面配置編輯器建立 XML 管理版面配置

  • 在執行階段將版面配置元素執行個體化。應用程式可建立下列項目： View 和 ViewGroup 物件，並操控其 管理資源

用 XML 宣告使用者介面可讓您區分應用程式呈現方式 控制其行為的程式碼使用 XML 檔案也讓 為不同的螢幕大小和方向提供不同的版面配置。這是 支援不同螢幕 大小)。

Android 架構讓您可以靈活運用 建構應用程式的 UI舉例來說，您可以宣告應用程式的 預設版面配置，然後在執行階段修改版面配置。

寫入 XML

使用 Android 的 XML 詞彙，您就能快速設計 UI 版面配置和 它們包含的畫面元素，和在 HTML 中建立網頁的方式相同 當中包含一系列巢狀元素

每個版面配置檔案都只能含有一個根元素，且該元素必須是 View 或 ViewGroup 物件。將根目錄 元素中，您可以將其他版面配置物件或小工具新增為子項元素 逐步建構用於定義版面配置的 View 階層。適用對象 例如，以下示範如何使用垂直 LinearLayout 的 XML 版面配置， 包含 TextView 和 Button：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_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 中宣告版面配置後，請使用 Android 專案 res/layout/ 中的 .xml 擴充功能 目錄，以便正確編譯。

如要進一步瞭解版面配置 XML 檔案的語法，請參閱 版面配置資源。

載入 XML 資源

編譯應用程式時，每個 XML 版面配置檔案都會編譯成 View 項資源。在應用程式中載入版面配置資源 Activity.onCreate() 回呼實作。呼叫方式如下： setContentView(), 並以下列格式將版面配置資源參照傳遞至版面配置資源： R.layout.layout_file_name。舉例來說 版面配置會儲存為 main_layout.xml，並載入 Activity，如下所示：

Kotlin

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

Java

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

Android 架構會在onCreate() Activity啟用時接收Activity。如要 如要瞭解活動生命週期的相關資訊，請參閱 簡介： 活動。

屬性

每個 View 和 ViewGroup 物件都支援自己的 各種 XML 屬性部分屬性是 View 特有的屬性 物件。舉例來說，TextView 支援 textSize 屬性。不過，所有 View 也會沿用這些屬性。 擴充這個類別的物件有些人是所有View通用的 物件，因為其繼承自根 View 類別，例如 id 屬性。其他屬性視為版面配置 參數，這是描述特定版面配置方向的屬性 由該物件的父項定義，也就是 View 物件的 ViewGroup 物件。

ID

所有 View 物件都有一個與其相關聯的整數 ID 專門用於識別樹狀結構中的 View。當應用程式處於以下狀態時 這個 ID 會參照為整數，但 ID 通常是指派的 以字串形式顯示在版面配置 XML 檔案中 id 屬性。這是 所有 View 物件通用的 XML 屬性，由 View 類別。而且使用頻率相當高。內部 ID 的語法 XML 標記如下：

android:id="@+id/my_button"

字串開頭的 at 符號 (@)，表示： XML 剖析器會剖析並展開 ID 字串的其餘部分，並將該字串識別為 ID 資源加號符號 (+) 表示這是新的資源名稱 必須建立並新增至 R.java 中的資源 檔案。

Android 架構提供許多其他 ID 資源。參照 Android 資源 ID，您不需要加上加號，但您必須將 android 套件命名空間，如下所示：

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

android 套件命名空間指出您正在參照 android.R 資源類別的 ID，而非本機

若要從應用程式建立資料檢視並做為參照，您可以使用下列常用項目： 模式如下：

  1. 在版面配置檔案中定義檢視畫面並指派專屬 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() 方法，如以下範例所示：

    Kotlin

    val myButton: Button = findViewById(R.id.my_button)

    Java

    Button myButton = (Button) findViewById(R.id.my_button);

在建立檢視畫面時，請務必定義檢視畫面物件的 ID RelativeLayout。 在相對版面配置中，同層級檢視畫面可定義與其他版面配置相關的版面配置 由專屬 ID 參照的同層級資料檢視。

ID 可以在整個樹狀結構中重複，但必須 您搜尋的樹狀結構中不會有不重複的項目這通常是 所以最好盡可能加以自訂

版面配置參數

名為 layout_something 的 XML 版面配置屬性定義 您為 View 設定適當的版面配置參數 ViewGroup，

每個 ViewGroup 類別都會實作一個可擴充的巢狀類別 ViewGroup.LayoutParams。 這個子類別包含定義各個屬性的大小和位置的屬性類型 子項檢視畫面 (適用於檢視區塊群組)。如圖 2 所示 檢視區塊群組會為每個子項檢視畫面定義版面配置參數，包括子項 檢視區塊群組

圖 2. 透過版面配置以視覺化方式呈現檢視區塊階層 參數。

每個 LayoutParams 子類別在設定時都有自己的語法 輕鬆分配獎金每個子元素都必須定義一個符合下列條件的 LayoutParams： 但也可以定義 LayoutParams 代表其本身子項。

所有檢視區塊群組都包含寬度和高度，使用 layout_width 和 layout_height 且需要每個檢視畫面都定義這些項目。多個 LayoutParams 可包含選用邊界和框線。

你可以使用確切的測量來指定寬度和高度，但可能無法 是值得一試的做法您通常會使用其中一個常數 寬度或高度：

  • wrap_content：指示您的檢視畫面將自身調整至 所需的尺寸
  • match_parent：讓您的檢視畫面佔據父項空間大小 檢視區塊群組允許

一般而言，我們不建議使用 絕對單位，例如像素更好的方法是使用相對測量值 例如密度獨立像素單位 (dp)、wrap_content 或 match_parent，因為這樣可以讓應用程式在 以及各種裝置螢幕大小可用的評估類型已定義於 版面配置資源。

版面配置位置

檢視畫面採用矩形幾何圖形。該搜尋結果會顯示一個位置，以一組字串表示 左和頂部座標，以及兩個維度，以 寬度和高度位置和維度的單位為像素。

您可以叫用方法以擷取檢視畫面的位置 getLeft() 和 getTop()。 前者會傳回矩形的左側座標 (x) 座標， 檢視畫面。後者會傳回矩形的頂部 (y) 座標 代表該檢視區塊。這些方法會傳回相對於 父系物件舉例來說，當 getLeft() 傳回 20 時，表示 檢視畫面位於其直接邊緣右側 20 像素處 父項。

此外，也有一些便利的方法可以避免不必要的運算： 名叫 getRight() 和 getBottom()。 這些方法會傳回 代表檢視區塊的矩形。舉例來說，呼叫 getRight() 是 類似於以下運算：getLeft() + getWidth()。

大小、邊框間距和邊界

檢視畫面的大小會以寬度和高度表示。一個檢視畫麵包含兩組 包括寬度和高度值

第一組稱為「測量寬度」 測量高度。這些維度能定義檢視畫面的大小 都能在父項資源中放送如要取得測量的維度，請呼叫 getMeasuredWidth() 和 getMeasuredHeight()。

第二個組合也稱為「寬度」和「高度」，有時也稱為「高度」 繪製寬度及繪圖高度。這些維度可讓您定義 繪製時及版面配置後畫面的實際大小這些 值可能與測量的寬度和高度不同，也可能相同。個人中心 才能取得寬度和高度的 getWidth() 和 getHeight()。

為了評估維度，檢視畫面會考量到邊框間距。邊框間距 會以像素的左側、頂端、右側和底部部分顯示 (以像素為單位)。 您可以使用邊框間距，將檢視畫面內容偏移 像素。舉例來說，兩個左側邊框間距會推送檢視畫面內容兩個像素 左側邊緣的右側您可以使用 setPadding(int, int, int, int) 方法，然後呼叫 getPaddingLeft(), getPaddingTop(), getPaddingRight(), 和 getPaddingBottom()。

雖然檢視畫面可以定義邊框間距，但不支援邊界。不過 檢視區塊群組支援邊界。詳情請見 「ViewGroup」和 ViewGroup.MarginLayoutParams 瞭解詳情

如要進一步瞭解維度，請參閱： 尺寸：

除了透過程式輔助方式設定邊界和邊框間距外， ，如以下範例所示：

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
      <TextView android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:text="Hello, I am a TextView" />
      <Button android:id="@+id/button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:paddingBottom="4dp"
              android:paddingEnd="8dp"
              android:paddingStart="8dp"
              android:paddingTop="4dp"
              android:text="Hello, I am a Button" />
  </LinearLayout>

上例顯示套用邊界和邊框間距。 TextView 的周圍套用統一邊界和邊框間距，以及 Button 顯示如何單獨針對不同項目套用 邊線。

常見版面配置

ViewGroup 類別的每個子類別都為 會顯示巢狀結構的資料檢視最具彈性的版面配置類型 提供了保持版面配置階層精簡的最佳工具 ConstraintLayout。

以下是 Android 內建的幾個常見版面配置類型 平台。

建立線性版面配置

將子項組成單一水平或垂直列，然後建立 捲軸。

在 WebView 中建構網頁應用程式

顯示網頁。

建立動態清單

如果版面配置內容是動態或未預先決定，您可以 使用 RecyclerView或 會變為 AdapterView。 一般而言，RecyclerView 是較佳的選項，因為這會使用記憶體 比 AdapterView 的效率更高。

可使用 RecyclerView 和 AdapterView 包含下列項目：

清單

顯示捲動單一欄清單。

格線

顯示欄和列的捲動格線。

RecyclerView 提供更多可能， 可選擇 建立自訂 版面配置管理工具

在轉接程式檢視畫面中填入資料

您可以在 AdapterView 例如：ListView 或 GridView 製作者 將 AdapterView 例項繫結至 Adapter, 這個物件會從外部來源擷取資料並建立 View 代表每個資料項目

Android 提供多個實用的 Adapter 子類別 來擷取不同類型的資料及建立檢視畫面 AdapterView。兩種最常見的轉接程式如下：

ArrayAdapter
當資料來源是陣列時，請使用這個轉接程式。根據預設 ArrayAdapter 會呼叫 toString() 並將內容放在 TextView 中。

舉例來說，假設您想將一系列字串顯示在 ListView，請使用ArrayAdapter 建構函式，為每個字串和字串陣列指定版面配置：

Kotlin

    val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)

Java

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, myStringArray);

這個建構函式的引數如下：

  • 您的應用程式 Context
  • 包含 TextView 中每個字串的 陣列
  • 字串陣列

然後呼叫 setAdapter() 在你的 ListView 上：

Kotlin

    val listView: ListView = findViewById(R.id.listview)
    listView.adapter = adapter

Java

    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);

如要自訂每個項目的外觀，您可以覆寫 陣列中物件的 toString() 方法。或是 這裡提到的 TextView：例如，如果您想 ImageView 針對每個陣列項目，擴充 ArrayAdapter 類別 覆寫 getView() 傳回您要為每個項目指定的檢視畫面類型

SimpleCursorAdapter
如果資料來自 Cursor。 使用 SimpleCursorAdapter 時，請指定要使用的版面配置 「Cursor」中的每一列以及 您要插入目標版面配置的 Cursor。 舉例來說，假設您想要建立使用者姓名和電話的清單 您可以執行會傳回 Cursor 的查詢 每位使用者都有一行，分別代表姓名和數字個人中心 然後建立字串陣列，從 每個結果在版面配置中所需的 Cursor 和整數 陣列，用於指定各資料欄需要的對應檢視畫面 下單時間：

Kotlin

    val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                              ContactsContract.CommonDataKinds.Phone.NUMBER)
    val toViews = intArrayOf(R.id.display_name, R.id.phone_number)

Java

    String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                            ContactsContract.CommonDataKinds.Phone.NUMBER};
    int[] toViews = {R.id.display_name, R.id.phone_number};

將 SimpleCursorAdapter 執行個體化時，請傳遞 每個結果要使用的版面配置，Cursor 包含 結果，而以下兩個陣列：

Kotlin

    val adapter = SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
    val listView = getListView()
    listView.adapter = adapter

Java

    SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
    ListView listView = getListView();
    listView.setAdapter(adapter);

接著 SimpleCursorAdapter 會為以下資料欄中的每個資料列建立檢視畫面： Cursor使用所提供的版面配置，方法是將 fromColumns 項目加到對應的 toViews 檢視畫面。

如果您在應用程式的生命週期中，變更了 讀取器讀取， notifyDataSetChanged()。 系統會通知附加的檢視畫面，指出資料有所變更，且系統會重新整理 機器學習是向機器提供資料和答案 讓機器自行探索規則的科學

處理點擊事件

您可以回應 AdapterView 中每個項目的點擊事件 方法是導入 AdapterView.OnItemClickListener 存取 API例如：

Kotlin

listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
    // Do something in response to the click.
}

Java

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click.
    }
};

listView.setOnItemClickListener(messageClickedHandler);

其他資源

如要瞭解版面配置的使用方式，請前往 向日葵 。