tags: Android layout

[ASJ2021] 從零開始學 Android - Unit 1-3: Build a basic layout

• [ASJ2021] 從零開始學 Android - Unit 1-3: Build a basic layout
  • 學習目標
  • 使用者介面 User Interfaces
  • 佈局編輯器 Layout Editor
  • 實戰：修改顯示文字
    • 實戰：在佈局新增 TextViews
    • 實戰：新增 text 樣式
    • 小結
  • 如何在 Android app 新增圖片
    • 實戰：新增一個 ImageView
    • 實戰：修改圖片大小與定位
    • 實戰：調整元素前後順序
    • 實戰：修正警告訊息
    • 實戰：提供無障礙服務
    • 小結

• 活動首頁：Android App 開發培訓計劃 2021
• 學習指南：Android Study Jams 2021 操作手冊
• 學習教材：Android Basics in Kotlin

---

學習目標

Unit 1: Kotlin basics for Android

• Build a basic layout - 透過建立一個生日賀卡的 app 來瞭解 Android 中使用者界面排版的基礎！

使用者介面 User Interfaces

使用者介面（User Interfaces）簡稱 UI，是使用者實際接觸產品的部分，主要由技術功能和視覺元素組成。

在 Android App 中，所有的使用者介面元素，均由 View 和 ViewGroup 所構成：

• View 是介面上能和使用者互動的對象，這些 View 彼此之間也能相互影響
• ViewGroup 則是用來存放 View 的容器

可參考以下示意圖：

佈局編輯器 Layout Editor

但我們通常不會直接用 View 和 ViewGroup 調整佈局，而是藉由撰寫程式碼來達成。

Android Studio 中的 Layout Editor（佈局編輯器）就提供了多種佈局來協助排版，常見的有：

• FrameLayout：框架佈局
  • 透過設定父層 View 的android:layout_gravity 屬性定位子層View
• LinearLayout：線性佈局
  • 透過 android:orientation 屬性指定，不允許各 View 相互重疊
• RelativeLayout：相對佈局
  • 透過相對位置設定各個元件位置
• ConstraintLayout：約束佈局
  • 透過物件本身與其它物件之間的約束，來決定物件位置，不會因裝置不同有太大差異
  • 在新版 Andorid Studio 為預設佈局，效能較佳

接下來，我們要透過 Layout Editor，把 app 介面上的 "Hello World!" 修改成 "Happy Birthday!"，以及練習如何編輯文字樣式。

撰寫Android 程式，通常由「.xml + .kt」構成一組畫面，類似於 iOS 的「.swift + .xib」的組合，分別代表：

• .xml 檔案：設計畫面
• .kt 檔案：用來定義方法，設計程式功能

切換到 .xml，可以看到 Layout Editor 的基本配置如下：

• (1) Project Window：查看專案路徑，可切換專案的排列方式
• (2) Palette：元件庫，像調色盤的概念，裡面的元件皆可放到畫面上
• (3) Component Tree：元件樹
• (4) Design View：視覺預覽
• (5) Bluepring View：設計藍圖
• (6) Attributes：元件屬性設定

參考閱讀：

• Android入門教程：ConstraintLayout約束佈局
• Day4-Android APP 佈局

實戰：修改顯示文字

1. 開啟 activity_main.xml 檔案，位在專案路徑中的 app > res > layout 資料夾

2. 在 Component Tree 欄位，預設為 ConstraintLayout 佈局，底下有個 TextView，顯示預設文字為 "Hello World!"
3. 點選 TextView 之後，可看到右側的 Attributes 欄位，顯示詳細資訊
4. 找到 Declared Attributes 欄位，裡面包含了 text 屬性為 Hello World!，代表顯示在 TextView 上的文字

5. 點選 text 屬性，並修改為 Happy Birthday!，按下 Enter 完成修改。此外，可看到畫面上出現黃色警告文字，我們會在下一章節解決這個問題：

6. Design View 可看到修改結果，執行 app 同樣可看到更新後的文字

實戰：在佈局新增 TextViews

1. 在 Layout Editor 選取 TextView，並按下 delete 鍵後可刪除該 TextView，同時會反應在 ConstraintLayout 視窗

2. 在 Palette 視窗找到 Common or Text > TextView，並直接點選拖曳到 Design View，即可新增一個 TextView

3. 在 Component Tree 的 TextView 會發現出現一個紅色警告圖示，這是因為還沒被約束的 View，會在每次運行程式時出現在不同位置

4. 因此要來定位剛才新增的 TextView，在右側的 Attributes 視窗找到 Constraint Widget 區塊，正方形代表目前的 view
5. 設定 top margin 和 left margin 為 16 dp，並將 Text 改成 Happy Birthday,OOO!

dp（density-independent pixels）：密度專屬像素，Android 的度量單位，會根據 dp 量化 UI 的大小

6. 同樣可新增一個 Textview 在右下角，設定 bottom margin 和 right margin 為 16 dp

7. 運行結果如下：

實戰：新增 text 樣式

1. 點選 Component View 的 TextView，可在右側的 Attributes 視窗下方找到 Common Attributes
2. 打開 textAppearance 選單，即可修改 text 樣式，例如 fontFamily、textSize、textColor

3. 運行結果如下：

小結

• 透過 Layout Editor 建立 Android 中的 UI，我們在 app 畫面中看到的幾乎是 View。
• TextView 是一個用來顯示文字的 UI 元素。
• ConstraintLayout 是一個用來裝其他 UI 元素的容器，在 ConstraintLayout 中的 Views 需約束水平和垂直關係
• 可透過 margin 調整 View 的位置，代表 View 與容器邊界的距離。
• 在 TextView 的 Attributes 視窗，可設定字型、大小和顏色。

---

如何在 Android app 新增圖片

1. 先到 Github 下載圖片 androidparty
2. 回到 Android Studio，點選 View > Tool Windows > Resource Manager，或直接在左邊的 Project 點選下方的 Resource Manager 標籤

3. 點選 + 開啟選單，選擇 Import Drawables 剛才下載的圖片，接著選 Next 再 Import

4. 成功匯入圖片後，即可在 app 中使用
5. 回到 Project 視窗，在專案路徑 app > res > drawable 確認是否有出現圖片

實戰：新增一個 ImageView

1. 要在 app 顯示圖片，需要新增一個 ImageView 來放圖片
2. 從 Palette 的 Common 拉取一個 ImageView 到 Design View 中央
3. 在 Pick a Resource 視窗找到 androidparty，點選 OK 建立

實戰：修改圖片大小與定位

1. 點選拖曳圖片到正中央，使邊框和粉紅色邊線對齊

2. 或直接設定 Constraint Widget，margin 上下左右均為 0，即可將圖片置中

3. 接著在 Constraint Widget 往下拉看到 Constraints section，選取 layout_width to 0dp (match constraint) 和 layout_height to 0dp (match constraint)

4. 這樣 ImageView 就會和 app 畫面等寬高，但上下仍留有大量空白
5. 找到 scaleType 屬性設定圖片如何顯示，選擇 centerCrop，讓圖片維持原比例縮放

6. 此時會發現圖片佔滿整個畫面，並遮住了文字，我們將會在下一步驟調整

實戰：調整元素前後順序

1. Component Tree 視窗，點選 ImageView 並拖曳到 TextViews 上方
2. 顯示結果如下：
   

假如拖曳效果失敗，可能是 Android Studio 需要更新。在實作過程不知為何無法拖曳，更新後就正常了！

實戰：修正警告訊息

在前面幾個步驟，可以看到 Android Studio 會顯示黃色三角的警告訊息，接下來我們要來進行修正。

HardcodedText

當我們在撰寫 app 時，程式會程式碼轉譯成別種語言。

但是像 Hardcoded string（硬編碼字串）這類的程式碼，會直接將字串或數字直接寫入程式，較難進行轉譯或更動。

1. 點選警告圖示，可查看更多詳細資訊，以及建議如何修改：

2. 點選 Fix 後，會出現 Extract Resource 視窗
3. 將 Resource name 改成 happy_birthday_text，String resources 必須統一為英文小寫，並使用底線連接

可以把 Resource name 想像成變數，而 Resource value 則是這個變數所代表的值。

4. 點選 OK 後，找到 Attributes 視窗的 text 屬性，會自動修改成@string/happy_birthday_text

5. 開啟 app > res > values > strings.xml 檔案路徑，建立了一個 string resource 叫做 happy_birthday_text

透過 strings.xml 檔案，我們能夠統一管理程式出現的字串，可重複使用，同時也能避免多國語系產生的編碼問題。

6. 用同樣的步驟，為 TextView 建立 string resource signature_text，完成後程式碼如下：

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Heidi!</string>
    <string name="signature_text">From Liu.</string>
</resources>

實戰：提供無障礙服務

為了建立無障礙服務，Android 提供許多工具給使用者。像是 TalkBack 無障礙工具，提供視障者透過語音導覽方式操作裝置。

1. 在 ImageView 顯示的警告訊息，說明圖片缺少 contentDescription 屬性：

透過 content description（內容描述），可輔助 TalkBack 工具說明 UI 元素詳細資訊。

但也需注意，這張圖片在 app 中只是裝飾用途，因此可以讓 TalkBack 忽略這個 ImageView，方法如下：

2. 在 Attributes 視窗，滑到最下方的 All Attributes 區塊，找到importantForAccessibility 屬性並設定為 no，警告樣式就會消失了！

3. 運行結果如下：

小結

• 透過 Android Studio 中的Resource Manager，可幫助新增和管理圖片或其他資源。
• ImageView 是用來顯示圖片的 UI 元素。
• ImageView 應該要有內容描述，以建立無障礙服務。
• Text 字串必須統一由 string resource 替換使用，方便程式轉譯成其他語言，以及後續管理。