Android - UI 設計

在本章中，我們將瞭解 Android 螢幕的不同 UI 元件。本章還涵蓋了建立更出色 UI 設計的技巧，並解釋瞭如何設計 UI。

UI 螢幕元件

Android 應用的典型使用者介面由操作欄和應用內容區域組成。

• 主操作欄
• 檢視控制
• 內容區域
• 拆分操作欄

這些元件也已在下圖中顯示 -

瞭解螢幕元件

Android 應用的基本單元是活動 (Activity)。UI 在 XML 檔案中定義。在編譯期間，XML 中的每個元素都會編譯成等效的 Android GUI 類，其屬性由方法表示。

檢視 (View) 和檢視組 (ViewGroup)

一個活動 (Activity) 由檢視 (View) 組成。檢視 (View) 只是出現在螢幕上的一個小部件。它可以是按鈕等。一個或多個檢視可以組合成一個 ViewGroup。ViewGroup 的示例包括佈局。

佈局型別

有許多型別的佈局。其中一些列在下面 -

• 線性佈局 (LinearLayout)
• 絕對佈局 (AbsoluteLayout)
• 表格佈局 (TableLayout)
• 框架佈局 (FrameLayout)
• 相對佈局 (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” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

絕對佈局 (AbsoluteLayout)

AbsoluteLayout 允許您指定其子元素的確切位置。它可以像這樣宣告。

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

表格佈局 (TableLayout)

TableLayout 將檢視分組到行和列中。它可以像這樣宣告。

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

相對佈局 (RelativeLayout)

RelativeLayout 允許您指定子檢視相對於彼此的位置。它可以像這樣宣告。

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

框架佈局 (FrameLayout)

FrameLayout 是螢幕上的一個佔位符，您可以使用它來顯示單個檢視。它可以像這樣宣告。

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

除了這些屬性之外，還有其他屬性在所有檢視和 ViewGroup 中都是通用的。它們列在下面 -

測量單位

在指定 Android UI 上元素的大小時，您應該記住以下測量單位。