在生日卡片應用程式中新增圖片

在這個程式碼研究室中，您將瞭解如何使用 ImageView 在應用程式中新增圖片。

必要條件

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

課程內容

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

建構項目

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

軟硬體需求

  • 已安裝 Android Studio 的電腦。
  • 「建立生日卡應用程式」程式碼研究室中的應用程式。
  1. 在 Android Studio 中，使用先前的程式碼研究室開啟「建立生日卡片」應用程式。
    執行應用程式時，應用程式看起來應該會像這樣。

在專案中新增圖像

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

  1. 前往這個網站尋找生日卡片圖片。
  2. 按一下右側的「Download」(下載) 按鈕。這會單獨顯示圖片。
  3. 以滑鼠右鍵按一下圖片，將檔案儲存為 androidparty.jpg 檔案儲存到您的電腦。請記下您儲存檔案的位置 (例如「下載」資料夾)。
  4. 在 Android Studio 中，按一下選單中的「View」(檢視) >「Tool Windows」(工具視窗) >「Resource Manager」(資源管理工具)，或按一下「Project」(專案) 視窗左側的「Resource Manager」(資源管理工具) 分頁標籤。
  5. 按一下「Resource Manager」(資源管理工具) 下方的「+」，然後選取「Import Drawables」(匯入可繪項目)，系統隨即會開啟檔案瀏覽器。
  6. 在檔案瀏覽器中找出您下載的圖像檔，然後按一下「Open」(開啟)。
  7. 點選 [下一步]。
    Android Studio 會顯示圖片預覽畫面。
  8. 按一下 [Import] (匯入)。
  9. 如果圖像已成功匯入，Android Studio 會將圖像新增至「Drawable」(可繪項目) 清單。這份清單包含應用程式的所有圖片和圖示。你現在可以在應用程式中使用這個圖片。
  10. 按一下選單中的「View」(檢視) >「Tool Windows」(工具視窗) >「Project」(專案)，或點選最左側的「Project」(專案) 分頁標籤，即可切換回專案檢視畫面。
  11. 展開app > res >Drawable 檔案，確認圖片位於應用程式的 drawable 資料夾中。

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

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

新增 ImageView 並設定圖像

  1. 在「Project」(專案) 視窗中開啟「activity_main.xml」(「App」(應用程式) >「Res」(解析度) >「Layout」(版面配置) >「activity_main.xml」)。
  1. 在「版面配置編輯器」中前往「面板」，然後將「ImageView」拖曳到您的應用程式中。將方塊拖放到中央附近，不要與任何文字重疊

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

  1. 「挑選資源」對話方塊會在「可繪項目」清單中尋找蛋糕圖片。
  2. 按一下圖片，然後按一下 [OK] (確定)。

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

設定 ImageView 的位置和大小

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

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

  1. 將滑鼠遊標移到「ImageView」輪廓頂端的圓圈上，之後將遊標移到另一個圓圈上。
  2. 將圓圈拖曳到應用程式畫面頂端，當您拖曳圓圈時，會有箭頭連結圓圈與游標。在螢幕上拖曳，直到貼齊畫面頂端。你已從 ImageView 頂端新增限制至 ConstraintLayout 頂端。

  3. 將限制從 ImageView 底部新增至 ConstraintLayout 的底部。


  1. 在「Attributes」(屬性)窗格中，使用「Constraint Widget」(限制條件小工具) 在左側和右側新增 0 的邊界。 這樣就會自動建立該方向的限制條件。


圖片現已置中，但目前並未佔據整個螢幕畫面。您將在後續步驟中修正這個問題。

  1. 在「Constraints」部分的「Constraint 小工具」下方，將 layout_width 設為 0dp (match limit)。
    0dp 可讓 Android Studio 將比對限制設為 ImageView 的寬度。「比對限制條件意指…」 因為您剛剛加入的限制，因此會成為 ConstraintLayout 的寬度，並降低任何邊界。
  2. 將 layout_height 設為 0dp (match limit)。
    由於您已加入相關限制，因此 ImageView 會成為 ConstraintLayout，而非任何邊界。
  3. ImageView與應用程式畫面的寬度和高度一樣，但是相片以 ImageView 為置中，相片的上方和下方則有許多空白處。這種做法看起來不太吸引人，因此您可以調整 ImageView 的 scaleType，瞭解如何調整圖像大小和對齊圖像。如要進一步瞭解「ScaleType」，請參閱開發人員指南。你的應用程式現在應該如下所示。
  4. 找出 scaleType 屬性。您可能需要向下捲動，或搜尋這項屬性。請試試看為 scaleType 設定不同的值，瞭解結果如何。
  1. 完成後，請將 scaleType 設定為 centerCrop，這樣圖像就會填滿螢幕，不會扭曲變形。

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

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

將 ImageView 移至文字後方

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

  1. 在「Component Tree」(元件樹狀結構) 中點選並拖曳 ImageView 至 TextViews 正下方 ConstraintLayout。畫面上會出現一個有三角形的藍色線條，代表 ImageView 的位置。請將 ImageView 拖曳到ConstraintLayout的正下方。

ImageView 現在應列於 ConstraintLayout 下方的清單中的第一個，後面再顯示 TextViews。「生日、小杉！」和「來自 Emma.」的說明文字，現在全都應顯示，但「生日快樂，Sam!」可能很難閱讀，因為背景為深色背景為深色。(您可以暫時忽略缺少內容說明的警示。)

變更文字顏色

您的問候語和簽名現在位於圖片前方。但視您選擇的文字顏色而定，這些文字可能還是難以辨識。在這個步驟中，您會設定文字的顏色，使其與圖片背後的圖片一起顯示更好。

  1. 在元件樹狀結構中按一下第一個 TextView 即可加以選取。
  2. 在「屬性」部分中，按一下「textColor」屬性並開始輸入「白色」。
    請注意，當您輸入時，Android Studio 會顯示一份顏色清單，其中包含您目前輸入的文字。
  3. 從顏色清單中選取 [@android:color/white]，然後按下 Enter 鍵。Android 會定義多種顏色，讓您可以在應用程式的不同部分持續使用不同顏色。
  4. 與其他 TextView 相同。
  5. 執行您的應用程式，發現文字現在更容易閱讀。

恭喜！您已在 Android 應用程式中加入一張圖片，您的文字看起來非常棒！

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

翻譯中

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

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

  1. 按一下第一個「TextView」旁的橘色三角形圖示，並標示「生日快樂，小杉！」
    Android Studio 隨即會開啟一個視窗，內含詳細資訊與修正建議。你可能需要向下捲動，才會看到「修正建議」。
    硬式編碼字串 \
  2. 按一下 [修正] 按鈕。
    Android Studio 會開啟「擷取資源」對話方塊。在這個對話方塊中，您可以自訂所呼叫的字串資源，以及資源儲存方式的一些細節。「資源名稱」是指要呼叫的字串。「資源值」將是實際的字串本身。
  3. 在「擷取資源」對話方塊中，將 [資源名稱] 變更為 happy_birthday_text。字串資源應有小寫名稱，且每個字詞之間應用底線分開。沿用其他預設設定。
  4. 按一下 [OK] (確定) 按鈕。
  5. 在「屬性」窗格中找出「text」屬性，然後注意 Android Studio 已為您將該屬性自動設定為 @string/happy_birthday_text。
  6. 開啟 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 旁邊的橘色三角形。如果將遊標懸停在遊標上，畫面上會出現工具提示，指出缺少 &&33;contentDescription' 圖片的屬性。內容說明定義 UI 元素的用途，可讓應用程式更易於與 TalkBack 搭配使用。


不過，這個應用程式中的圖片僅供參考。如果使用者沒有輕觸該手勢，就不會執行任何操作，而且對於協助工具沒有任何特殊意義。你不需要設定內容說明，而是將 ImageView 標示為「ImageView」，以便系統判斷對無障礙工具來說無關緊要。接著，螢幕閱讀器會知道要略過不動。

  1. 在「Component Tree」(元件樹狀結構) 中選取 ImageView。
  2. 在「屬性」視窗中的「所有屬性」部分找出 重要 ForAccessibility 值，並將其設為 no。

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

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

恭喜！您已在「生日快樂」應用程式中加上圖片，遵循協助工具指南，且能夠輕鬆翻譯成其他語言！

「生日快樂」應用程式的解決方案程式碼已上傳到 GitHub，可供您按照需求查看最終結果。

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

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

如要取得這個程式碼研究室的程式碼，然後在 Android Studio 中開啟程式碼，請按照下列步驟操作。

取得程式碼

  1. 按一下解決方案程式碼網址。這會在瀏覽器中開啟專案的 GitHub 頁面。
  2. 在專案的 GitHub 頁面上，按一下「Clone or download」(複製或下載) 按鈕，開啟「Clone」(複製) 對話方塊。

  1. 在對話方塊中，按一下「Download ZIP」(下載 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 專案)。

注意：如果已開啟 Android Studio，則請選取 [File] (檔案) > [New] (新增) > [Import Project] (匯入專案) 選單選項。

  1. 在「Import Project」(匯入專案) 對話方塊中，前往未壓縮專案資料夾所在的位置 (可能位於「下載」資料夾中)。
  2. 按兩下該專案資料夾。
  3. 等待 Android Studio 開啟專案。
  4. 按一下 [執行] 按鈕 即可建構並執行應用程式。請確認應用程式可正常運作。
  5. 在「Project」(專案) 工具視窗中瀏覽專案檔案，瞭解應用程式的實作方式。
  • Android Studio 中的「Resource Manager」(資源管理工具) 可協助您新增及管理圖像和其他資源。
  • ImageView 是一種用於在應用程式中顯示圖像的 UI 元素。
  • ImageViews 應該提供內容說明，讓您的應用程式更容易使用。
  • 向使用者顯示的問候語 (例如生日問候語) 應擷取為字串資源，方便您將應用程式翻譯成其他語言。

請練習下列項目：

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

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

  1. 請記得將 Views 置於有限制條件和邊界處，然後調整其樣式。
  2. 為了讓文字在部分圖片中更為突出，請嘗試使用 shadowColor、shadowDx、shadowDy 和 shadowRadius。

檢查操作：

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