01 Android UI簡介

1.1 UI

1. 用戶界面（User Interface，簡稱 UI，亦稱使用者界面）是系統和用戶之間進行互動和資訊交換的媒介，它實作資訊的內部形式與人類可以接受形式之間的轉換，
2. 軟體設計可分為兩個部分：編碼設計與UI設計，

1.2 Android UI

1. Android應用界面包含用戶可查看并與之互動的所有內容，
2. Android 提供豐富多樣的預置 UI 組件，例如結構化布局物件和 UI控制元件，您可以利用這些組件為您的應用構建圖形界，
3. Android 還提供其他界面模塊，用于構建特殊界面，例如對話框、通知和選單，
4. Android UI 都是由布局和控制元件組成的，

02 布局

1. 布局(layout)可定義應用中的界面結構（例如 Activity 的界面結構），布局中的所有元素均使用 View和ViewGroup 物件的層次結構進行構建，
2. View 通常繪制用戶可查看并進行互動的內容，
3. 而ViewGroup 是不可見容器，用于定義 View 和其他 ViewGroup 物件的布局結構，

2.1 布局的結構

定義界面布局的視圖層次結構圖示:

1. View 物件通常稱為“微件”，可以是眾多子類之一，例如 Button 或 TextView ，
2. ViewGroup物件通常稱為“布局”，可以是提供其他布局結構的眾多型別之一，例如LinearLayout 或 ConstraintLayout ，

2.2 宣告布局

1. 在 XML 中宣告界面元素，Android 提供對應 View 類及其子類的簡明 XML 詞匯，如用于微件和布局的詞匯，
   當然也可使用 Android Studio 的 Layout Editor，并采用拖放界面來構建 XML 布局，如下圖所示是app/res/layout下的activity_main.xml的Code，

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="168dp"
        android:layout_marginTop="356dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

這張圖所示是app/res/layout下的activity_main.xml的Design，

2. 在運行時實體化布局元素，您的應用可通過編程創建 View 物件和 ViewGroup物件（并操縱其屬性），

ConstraintLayout constraintLayout = new ConstraintLayout(this);
TextView view = new TextView(this);
view.setText("Hello World!");
constraintLayout.addView(view);

• 提示 : 使用 Layout Inspector 除錯布局，可以查看通過代碼創建的布局

1. 在連接的設備或模擬器上[運行您的應用]，
2. 依次點擊 Tools > Layout Inspector，
3. 在顯示的 Choose Process 對話框中，選擇要檢查的應用行程，然后點擊 OK，

2.3 撰寫XML

1. 利用 Android 的 XML 詞匯，按照在 HTML 中創建包含一系列嵌套元素的網頁的相同方式快速設計UI布局及其包含的螢屏元素，
2. 每個布局檔案都必須只包含一個根元素，并且該元素必須是視圖物件或 ViewGroup 物件，
3. 定義根元素后，可以子元素的形式添加其他布局物件或控制元件，從而逐步構建定義布局的視圖層次結構，
4. 在 XML 中宣告布局后，以 .xml 擴展名將檔案保存在Android 專案的 res/layout/ 目錄中，

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

2.4 加載 XML 資源

當編譯應用時，系統會將每個 XML 布局檔案編譯成 View 資源，在Activity.onCreate() 回呼內，通過呼叫 setContentView() ，并以R.layout.layout_file_name 形式向應用代碼傳遞布局資源的參考 ，加載應用代碼中的布局資源，

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
}

2.5 屬性

每個 View 物件和 ViewGroup 物件均支持自己的各種 XML 屬性 ，某些屬性是 View 物件的特有屬性（例如，TextView 支持 textSize 屬性），但可擴展此類的任一 View 物件也會繼承這些屬性，某些屬性是所有 View 物件的共有屬性，因為它們繼承自 View 根類（例如 id 屬性），此外，其他屬性被視為“布局引數”，即描述 View 物件特定布局方向的屬性，如由該物件的父ViewGroup 物件定義的屬性，

<TextView
	android:id="@+id/tv"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World!"
	android:textSize="24sp"/>
<Button
	android:id="@+id/btn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="按鈕"/>

2.6 ID

任何 View 物件均可擁有與之關聯的整型 ID，用于在結構樹中對 View 物件進行唯一標識，編譯應用后，系統會以整型形式參考此 ID，但在布局 XML 檔案中，系統通常會以字串的形式在 id屬性中指定該 ID，這是所有 View 物件共有的 XML 屬性（由 View 類定義），并且您會經常使用該屬性，

• XML 標記內部的 ID 語法是：

android:id="@+id/tv"

• 字串開頭處的 @ 符號指示 XML 決議器應決議并展開 ID 字串的其余部分，并將其標識為 ID 資源，加號 (+) 表示這是一個新的資源名稱，必須創建該名稱并將其添加到我們的資源（在 R.java檔案中）內，
• Android 框架還提供許多其他 ID 資源，參考 Android 資源 ID 時，不需要加號，但必須添加 android 軟體包命名空間，

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

添加 android 軟體包命名空間后，我們現在將從 android.R 資源類而非本地資源類參考 ID.R.java 檔案

• tips: @+id 和 @id區別：其實@+id就是在R.java檔案里新增一個id名稱，如果之前已經存在相同的id名稱，那么會覆寫之前的名稱，而@id則是直接參考R.java檔案的存在的id資源，如果不存在，會編譯報錯，

注意：ID 字串名稱，在同一布局中必須是唯一的，不能重名，不同布局中可以同名；同時也可以通過ID值創建我們視圖物件的實體，

<TextView
	android:id="@+id/tv"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World!"
	android:textSize="24sp"/>

TextView textView = (TextView) findViewById(R.id.tv);

2.7 布局引數 LayoutParams

• layout_*** 的布局屬性

<TextView
	android:layout_width="100dp"
	android:layout_height="200dp"
	android:layout_marginLeft="10dp" //左邊距
	android:layout_marginTop="10dp" //上邊距
	android:text="Hello World!" />

• 布局引數作用是給我們的視圖設定在布局中位置和大小
• ViewGroup 類會實作一個擴展 ViewGroup.LayoutParams 的嵌套類，里面包含一些設定視圖view 的尺寸和位置的屬性，
  視圖層次結構圖，包含每個視圖關聯的布局引數：
  

TextView tv = new TextView(this);
LinearLayout linearLayout = new LinearLayout(this);
LinearLayout.LayoutParams layoutParams =
(LinearLayout.LayoutParams)tv.getLayoutParams();
layoutParams.leftMargin = 30; //左邊距
layoutParams.topMargin = 30;//上邊距
layoutParams.width = 100;//寬
layoutParams.height = 200;//高
tv.setLayoutParams(layoutParams);
linearLayout.addView(tv);

• 一般而言，建議不要使用絕對單位（如像素）來指定布局寬度和高度，更好的方法是使用相對測量單位（如與密度無關的像素單位 (dp) 、 wrap_content 或 match_parent ），因為其有助于確保應用在各類尺寸的設備螢屏上正確顯示，
• wrap_content 指示您的視圖將其大小調整為內容所需的尺寸，
• match_parent指示您的視圖盡可能采用其父視圖組所允許的最大尺寸，

2.8 布局位置

• 視圖可以通過呼叫 getLeft() 方法和 getTop() 方法來獲取視圖的坐標位置 ，也可以通過getWidth() 和 getHeight() 獲取視圖的尺寸，這些方法回傳的值是相對于其父視圖的位置，
• 位置和尺寸的單位是像素（ px ），
• px 與 dp 區別
• px 即像素，1px代表螢屏上一個物理的像素點；
  給視圖設定px單位，不同解析度下，尺寸不一樣，
• dp (dip) Density independent pixels ，設備無關像素，它與“像素密度”密切相關 ;
  dpi像素密度： 每英寸包含的像素數
  

2.9 內邊距和外邊距