將圖像新增至 Android 應用程式

1. 簡介

在本程式碼研究室中，您將瞭解如何使用 ImageView 將圖像新增至應用程式。

必要條件

  • 如何在 Android Studio 中建立及執行新的應用程式。
  • 如何使用「版面配置編輯器」在 TextViews 上新增及移除屬性。

課程內容

  • 如何將圖像或相片新增至 Android 應用程式。
  • 如何使用 ImageView 在應用程式中顯示圖像。
  • 如何將文字擷取為字串資源，讓您更輕鬆地翻譯應用程式，並重複使用字串。
  • 如何盡可能讓更多人使用您的應用程式。

建構項目

  • 新增「生日快樂」應用程式即可新增圖像。

軟硬體需求

  • 已安裝 Android Studio 的電腦。
  • 「製作生日卡」程式碼研究室的應用程式。

2. 設定應用程式

  1. 從 Android Studio 中的舊版程式碼研究室開啟專案。您可以使用解決方案程式碼或您建立的程式碼。執行應用程式時，這個應用程式看起來會像這樣。

ab46eb841980bc5b.png

在專案中新增圖片

在這項工作中，您將從網際網路下載圖像並新增到「生日快樂」應用程式。

  1. 按一下這裡前往 GitHub 查看生日資訊卡的圖像。
  2. 按一下右側的「Download」按鈕。這裡會顯示圖像本身。

80745a1810838bd4.png

  1. 用滑鼠右鍵按一下圖像，並將檔案儲存為 androidparty.png。請記下您儲存檔案的位置 (例如「Downloads」資料夾)。
  2. 在 Android Studio 中，按一下選單中的「View」>「Tool Windows」>「Resource Manager」，或按一下「Project」視窗左側的「Resource Manager」分頁標籤。
  3. 按一下「Resource Manager」下方的「+」圖示，然後選取「Import Drawables」，即可開啟檔案瀏覽器。

d7f72d9af346ff2c.png

  1. 在檔案瀏覽器中找出您下載的圖片檔，然後按一下「Open」。
  2. 按一下「Next」。Android Studio 會顯示圖像的預覽畫面。
  3. 按一下「Import」。
  4. 如果圖像已成功匯入，Android Studio 會將圖像新增至「Drawable」清單。這份清單包含應用程式的所有圖片和圖示。您現在可以在應用程式中使用這個圖片。

e4a7e2568ab80e33.png

  1. 按一下選單中的「View」>「Tool Windows」>「Project」，或點選最左側的「Project」分頁標籤，即可切換回專案檢視畫面。
  2. 展開「app」>「res」>「drawable」，確認圖像位於應用程式的「drawable」資料夾中。

3af43a9ea1c39ed4.png

3. 新增 ImageView

如要在應用程式中顯示圖像，則必須顯示地點。就像使用 TextView 來顯示文字一樣，您也可以使用 ImageView 來顯示圖像。

在這項工作中，您要在應用程式中新增 ImageView，並將其圖像設定為您下載的杯子蛋糕圖像。接著調整位置並調整大小，讓圖像填滿整個螢幕。

新增 ImageView 並設定圖像

  1. 在「Project」視窗中開啟「activity_main.xml」(「App」>「Res」>「Layout」>「activity_main.xml」)。
  1. 在「版面配置編輯器」中，前往「Palette」，然後將 ImageView 拖曳至您的應用程式。請將其放在中央附近，且不要與任何文字重疊

系統隨即會開啟「Pick a Resource」對話方塊。這個對話方塊會列出應用程式的所有圖像資源。請注意「drawable」分頁標籤下方的生日圖像。可繪製資源是圖形可繪製於畫面上的一般概念。包括圖像、點陣圖、圖示和許多其他類型的繪圖資源。

  1. 在「Choose a Resource」對話方塊中，於「Drawable」清單中找到蛋糕圖像。
  2. 點選要移除的圖像，然後按一下「OK」。

1f98a4e8c3dde1bd.gif

這麼做會將圖像新增至應用程式，但可能無法正常顯示，且不會填滿整個螢幕。您將在後續步驟中修正這個問題。

設定 ImageView 的位置和大小

  1. 在「版面配置編輯器」中按住並拖曳 ImageView，但請注意，在「Design」檢視畫面內，應用程式畫面周圍會顯示粉紅色矩形。 粉紅色矩形代表用來放置 ImageView 的螢幕邊界。
  2. 拖曳 ImageView，讓左側和右側邊緣對齊粉紅色矩形。當您拉近時，Android Studio 會將圖像「貼齊」邊緣 (您將在稍後處理頂端和底端)。

25ab8b0401429ebd.gif

ConstraintLayout 中的 Views 需要水平和垂直限制，才能讓 ConstraintLayout 知道如何定位。接下來，您將新增這些內容。

  1. 將游標懸停於 ImageView 外框頂端的圓圈上，並以另一個圓圈醒目顯示。
  2. 將圓圈拖曳到應用程式畫面頂端，當您拖曳圓圈時，會有箭頭連結圓圈與游標。在螢幕上拖曳，直到貼齊畫面頂端。您已新增從 ImageView 頂端至 ConstraintLayout 頂端的限制條件。

f3b70726695ea8c9.gif

  1. 新增從 ImageView 的底部到 ConstraintLayout 底部的限制。可能太靠近邊緣，無法像對頂端那樣拖動。這時您可以在「Attributes」視窗的「Constraint Widget」中，點選底部的「+」來新增至限制條件。確保邊界為 0。

cdde37ea44d6bc1a.png

  1. 在「Attributes」窗格中，使用「Constraint Widget」在左側和右側新增 0 的邊界。 這項操作會自動建立對該指令的限制。

1c58fd4afe6f83bb.png

圖像現已置中，但還沒有佔滿整個螢幕畫面。您將在後續步驟中修正此問題：

  1. 在「Constraint」部分的「Constraint Widget」下方，將「layout_width」設定為「0dp」。0dp 是 Android SDK 用來為 ImageView 寬度使用比對限制條件的簡要說明。由於剛才新增的限制條件，因此寬度與 ConstraintLayout 一樣，但須再減掉任何邊界。

9fff7d632ac45a3d.png

  1. 將「layout_height」設定為「0dp」。由於已新增的限制條件，因此 ImageView 高度與 ConstraintLayout 一樣，但須再減掉任何邊界。

704ef89d2286fd5f.png

  1. ImageView 的寬度和高度與應用程式畫面一樣，但圖像在 ImageView 內置中，且圖像上方和下方則有不少空白字元。這種做法看起來不太吸引人，因此您可以調整 ImageView 的 scaleType，瞭解如何調整圖像大小和對齊圖像。如要進一步瞭解 ScaleType，請參閱開發人員參考指南。現在，應用程式看起來會如下所示。

426fe4a377aef0c6.png

  1. 找出 scaleType 屬性。您可能需要向下捲動，或搜尋這項屬性。請試試看為 scaleType 設定不同的值，瞭解結果如何。
  1. 完成後，請將 scaleType 設定為 centerCrop，這樣圖像就會填滿螢幕，不會扭曲變形。

32350f1cf95adb1d.png

蛋糕圖像現在應填滿整個螢幕，如下所示。

b3ef159159143c95.png

但看不到您的生日問候語和簽名。您將在後續步驟中修正這個問題。

將 ImageView 移至文字後方

ImageView 填入畫面後，您就無法再查看文字。這是因為圖像現在可以覆蓋文字。因此 UI 元素的順序很重要。您先新增 TextViews，再新增 ImageView，也就是位於最上層。當您在版面配置中新增檢視畫面時，系統會將這些檢視畫面新增至檢視畫面清單的結尾，並依照清單上的順序排列。ImageView 已新增至 ConstraintLayout 中的 Views 清單結尾。這代表這是於最後一個繪製項目，並繪製在 TextViews 上。如要修正，請變更檢視畫面的順序，並將 ImageView 移至清單開頭以先繪製。

c52a8a80608e453.gif

在「Component Tree」中點選並拖曳 ImageView 至 TextViews 正下方 ConstraintLayout。系統隨即會顯示一條三角形的藍色線條，以代表 ImageView 的位置。將 ImageView 拖放到 ConstraintLayout 正下方即可。

140649e77bd4f05b.gif

ImageView 現在應列於 ConstraintLayout 下方的清單中的第一個，後面再顯示 TextViews。現在應可看見「生日快樂！」以及「Emma 祝賀」(您可以暫時忽略缺少內容說明的警示)。

恭喜！您已新增圖像至 Android 應用程式！

4. 採用完善的程式設計做法

您在先前的程式碼研究室中新增 TextViews 時，Android Studio 會加標記並加上警示三角形。這個步驟將修正這些警示，並修正對 ImageView 的警示。

翻譯

請特別注意，您在撰寫應用程式時，系統可能會將您的應用程式內容翻譯成其他語言。如同先前的程式碼研究室所說，字串是一系列字元，例如「Sam，生日快樂！」。

硬式編碼字串是直接編寫於應用程式程式碼中的字串。經過硬式編碼的字串可將應用程式翻譯成其他語言，讓您更難為應用程式的不同部分重複使用字串。如要解決這些問題，您可以「將字串擷取至資源檔案」。這表示您不需要將程式碼以硬式編碼方式寫入程式碼中，只要將字串置入檔案中，然後為其命名，然後每當您想使用該字串時，使用該名稱即可。即使您變更字串或將其翻譯成其他語言，名稱仍會維持不變。

c8cc318f2276fbf0.png

  1. 按一下第一個 TextView 旁邊的橘色三角形，旁邊是「Sam，生日快樂！」。Android Studio 會開啟新視窗，在其中顯示更多資訊和建議的修正方式。您可能需要向下捲動才能夠看到「Suggested Fix」。

硬式編碼字串「Sam，生日快樂！」應使用 @string 資源問題 ID：hardencodedText 建議修正：擷取字串資源

  1. 按一下「Fix」按鈕。Android Studio 會開啟「Extract Resource」對話方塊。在這個對話方塊中，您可以自訂所呼叫的字串資源，以及資源儲存方式的一些細節。「Resource name」就是您要呼叫的字串。「Resource value」本身就是字串本身。
  2. 在「Extract Resource」對話方塊中，將「Resource name」變更為 happy_birthday_text。字串資源應有小寫名稱，且每個字詞之間應用底線分開。其他設定保留預設值。

2849a324f8a7c805.png

  1. 按一下「OK」按鈕。
  2. 在「Attributes」 窗格中找出「text」屬性，並注意到 Android Studio 已自動設定為 @string/happy_birthday_text。

579b6eff07a35331.png

  1. 開啟 strings.xml (「App」>「Res」>「Values」>「string.xml」)，並注意到 Android Studio 建立了名為 happy_birthday_text 的字串資源。
<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

strings.xml 檔案含有使用者在應用程式中會看到的字串清單。請注意，您的應用程式名稱也是字串資源。只要將所有字串集中在一起，就能更輕鬆地翻譯應用程式中的所有文字，並更輕鬆地在應用程式的不同部分重複使用字串。

  1. 按照相同步驟擷取簽名 TextView 的文字，並將字串資源命名為 signature_text。

完成的檔案應如下所示。

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

檢查應用程式是否有無障礙設計

只要遵循完善的程式設計做法，所有使用者 (包括身心障礙使用者) 都能輕鬆瀏覽您的應用程式並與您的應用程式互動。

Android Studio 提供了提示和警示，讓使用者更容易使用您的應用程式。

  1. 在「Component Tree」中，找出先前新增的 ImageView 旁邊的橘色三角形。將游標懸停在指標上，就會看到工具提示，說明圖像缺少「contentDescription」屬性。內容說明可以定義 UI 元素的用途，讓您的應用程式更容易使用 TalkBack。

但應用程式中的圖像僅供參考，您只需將 importantForAccessibility 属性設定為 no.就可讓 TalkBack 略過 ImageView，而無需設定向使用者宣布的內容描述。

  1. 在「Component Tree」中選取 ImageView。
  2. 在「Attributes」視窗的「All Attributes」部分中，找出 importantForAccessibility，並將其設定為「no」。

ImageView 旁邊的橘色三角形圖示會消失。

  1. 執行應用程式，確保應用程式仍可正常運作。

恭喜！您已將圖像新增至「生日快樂」應用程式中。之後，您只要遵守無障礙指南，即可更輕鬆地翻譯成其他語言！

ba4136f24be200c4.png

5. 解決方案程式碼

Happy Birthday 應用程式的解決方案程式碼已上傳到 GitHub，可供您按照需求查看最終結果。

GitHub 是一項可讓開發人員管理軟體專案程式碼的服務，並且使用版本控制系統 Git 來追蹤每個版本的程式碼變更。如果您曾檢視 Google 文件的版本記錄，可以查看過去曾編輯文件的時間和內容。同樣地，您可以追蹤專案中程式碼的版本記錄。以個別使用者或團隊身分處理專案時，這項功能非常實用。

您也可以在 GitHub 提供的網站上查看及管理專案。這個 GitHub 連結可讓您線上瀏覽「生日快樂」專案檔案，或是將檔案下載至電腦。

若要取得本程式碼研究室的程式碼，並在 Android Studio 中開啟，請按照下列步驟：

取得程式碼

  1. 按一下所提供的網址。系統會在瀏覽器中開啟專案的 GitHub 頁面。
  2. 在專案的 GitHub 頁面中，按一下「Code」按鈕，開啟對話方塊。

1debcf330fd04c7b.png

  1. 在對話方塊中，按一下「Download ZIP」按鈕，將專案儲存到電腦。等待下載作業完成。
  2. 在電腦上尋找檔案 (可能位於「Downloads」資料夾中)。
  3. 按兩下 ZIP 檔案，將檔案解壓縮。這項操作會建立含有專案檔案的新資料夾。

在 Android Studio 中開啟專案

  1. 啟動 Android Studio。
  2. 在「Welcome to Android Studio」(歡迎使用 Android Studio) 視窗中，按一下「Open an existing Android Studio project」(開啟現有的 Android Studio 專案)。

4948a0ef4afe4454.png

注意：如果 Android Studio 已開啟，請依序選取「File」>「New」>「Import Project」選單選項。

3047d8205840651d.png

  1. 在「Import Project」對話方塊中，前往未壓縮專案資料夾所在的位置 (可能位於「Downloads」資料夾中)。
  2. 在專案資料夾中，選取「生日快樂」資料夾。
  3. 按一下「Open」。
  4. 等待 Android Studio 開啟專案。
  5. 按一下「Run」按鈕 8de56cba7583251f.png 即可建構並執行應用程式，請確認應用程式的建構符合預期。
  6. 在「Project」工具視窗中瀏覽專案檔案，查看應用程式的設定方式。

6. 摘要

  • Android Studio 中的「Resource Manager」可協助您新增及管理圖像和其他資源。
  • ImageView 是一種用於在應用程式中顯示圖像的 UI 元素。
  • ImageViews 應該提供內容說明，讓您的應用程式更容易使用。
  • 向使用者顯示的問候語 (例如生日問候語) 應擷取為字串資源，方便您將應用程式翻譯成其他語言。

7. 瞭解詳情

8. 自行練習

請練習下列項目：

  1. 根據設計建立專屬的生日卡應用程式。
  2. 請先思考您需要的 Views 資訊。
  3. 新增順序最簡單的步驟？
  4. 您需要將哪些圖像新增至可繪項目資料夾？

Android 應用程式通常有兩種類型點陣圖圖像：JPEG 檔案和 PNG 檔案。PNG 檔案內有透明 (空白) 區域。若要進一步瞭解圖像格式，請參閱開發人員參考資料。

  1. 請記得將 Views 置於有限制條件和邊界處，然後調整其樣式。
  2. 想讓圖像上的文字更加顯眼，不妨嘗試使用 shadowColor、shadowDx、shadowDy 和 shadowRadius 等實驗功能。

b4480740bd2e2cd6.png

檢查操作：

應用程式成品應能夠順利執行，而且會顯示您設計的生日資訊卡。

恭喜，您成功建立生日卡應用程式！在社群媒體上分享您的作品，並加上 #LearningKotlin 主題標記，讓我們看到您的作品！