建立 Art Space 應用程式

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 事前準備

運用您在這個單元中學到的內容,建立您自己的數位藝術空間,打造出可用來展示各種藝術品的應用程式。先前的程式碼研究室會引導您逐步按照指示操作,不過本單元只會提供相關指南和建議,說明您可以運用哪些目前學過的概念建立應用程式。雖然我們在這裡提供的引導有限,您可以自行發揮創意建構專屬應用程式。

自行建構應用程式是一大挑戰,不過別擔心,您已經充分練習過了!您可以在這個新的示例中,運用您學到的相同技巧。如果不確定如何實作應用程式的某些部分,歡迎隨時參閱先前的程式碼研究室。

如果您自行建構應用程式及解決過程中遇到的問題,不僅可以學得更快,您對這些概念的印象也會更深刻。還有一個好處是應用程式完全由您自訂,因此可用來展示您的創意,做為您個人的開發人員作品集!

必要條件

  • 可在 Android Studio 中建立及執行專案。
  • 具備 Kotlin 語法的使用經驗,包含 Booleanwhen 運算式。
  • 可運用 Jetpack Compose 基本概念,例如將狀態與 MutableState 物件搭配使用。
  • 具備可組合函式的使用經驗,包括 TextImageButton 可組合函式。

課程內容

  • 如何建構低擬真度的原型並轉換為程式碼。
  • 如何使用 RowColumn 可組合函式建構簡易的版面配置,並使用 horizontalAlignmentverticalArrangement 參數排版。
  • 如何使用 Modifier 物件自訂 Compose 元素。
  • 如何以觸發條件 (例如輕觸按鈕) 找到狀態並進行修改。

建構項目

  • 可展示藝術品或家庭照的 Android 應用程式

軟硬體需求

  • 已安裝 Android Studio 的電腦。
  • 要在應用程式中顯示的相片或數位藝術品。

以下範例展示了應用程式在專案完成時可能顯示的內容:

當使用者輕觸「上一頁」或「下一頁」按鈕時,應用程式會顯示不同圖片及說明。

這個 Art Space 應用程式範例呈現的是由 Android 基本概念訓練團隊精選的一系列裱框藝術品。

2. 使用可組合函式建構靜態 UI

建立低擬真度的原型

低擬真度的原型就是簡易的模型或繪圖,可讓您基本掌握應用程式的樣貌。

建立低擬真度的原型:

  1. 思考您要在 Art Space 應用程式中顯示的內容,以及應用程式的目標對象。
  2. 使用您偏好的方法新增應用程式的組成元素。您可以考慮下列元素:
  • 藝術品圖片
  • 藝術品相關資訊,例如作品名稱、藝術家和發表年份
  • 任何其他元素,例如讓應用程式增加動態和互動式內容的按鈕。
  1. 在不同位置放置這些元素,然後看看是否合適。即使無法第一次就做出完美的設計也不用擔心,您可以先選擇採用其中一種設計,之後再逐步調整。
  1. 您可能會做出類似下圖的低擬真度設計:

這個低擬真度原型顯示了圖片、文字和按鈕的預留位置。

圖 1. UI 模擬圖中的預留位置元素有助於以視覺化方式呈現最終產品。

將設計轉為程式碼

將原型的設計轉為程式碼:

  1. 找出建構應用程式所需的 UI 元素。

舉例來說,在您製作的設計範例中,程式碼必須有 1 個 Image 可組合函式、2 個 Text 可組合函式,以及 2 個 Button 可組合函式。

  1. 找出應用程式的不同邏輯區塊,然後在區塊周圍畫出界線。

這個步驟可引導您將畫面分為小型的可組合函式,並思考可組合函式的階層結構。

在這個範例中,您可以將畫面分為以下三個區塊:

  • 藝術品牆
  • 藝術品描述元
  • 顯示控制器

您可以使用版面配置可組合函式排列各個區塊,例如 RowColumn 等可組合函式。

低擬真度原型上繪製了界線,表示三個不同區塊的外框。

圖 2. 區塊周圍的界線可協助開發人員構思可組合函式的配置概念。

  1. 看看應用程式中的每個區段,並找出哪些區段內含多個 UI 元素,然後在元素周圍畫出界線。

這些界線可幫助您瞭解區塊中各元素之間的關係。

低 Fi 原型設計中的每個部分都繪製有較小界線,用以分隔文字與按鈕。

圖 3. 文字和按鈕周圍的邊界越詳盡,更能協助開發人員配置可組合函式。

現在,您可以透過版面配置可組合函式 (例如 TextButton 可組合函式) 輕鬆安排可組合函式。

對於您可能使用的多種可組合函式,請留意以下注意事項:

  • Row Column 可組合函式。在 RowColumn 可組合函式中嘗試多種 horizontalArrangementverticalAllignment 參數,找出符合目前設計的參數設定。
  • Image 可組合函式。別忘了填入 contentDescription 參數。如同先前的程式碼研究室所述,TalkBack 會使用 contentDescription 參數為應用程式提供無障礙的體驗。如果您的 Image 可組合函式只有裝飾用途,或是您的 Text 元素已用來說明 Image 可組合函式,就可以將 contentDescription 參數設為 null
  • Text 可組合函式。您可以嘗試在 fontSizetextAlignfontWeight 中使用不同的值,為文字設定樣式。您也可以使用 buildAnnotatedString 函式,為單一 Text 可組合函式套用多種樣式。
  • Surface 可組合函式。您可以針對 Modifier.border 嘗試在 ElevationColorBorderStroke 中使用不同的值,藉此在 Surface 可組合函式中建立不同的 UI。
  • 間距與對齊設定。您可以使用 Modifier 引數 (例如 paddingweight) 來協助排列可組合函式。
  1. 在模擬器或 Android 裝置上執行應用程式,確認應用程式可順利編譯。

一個 Art Space 應用程式範例是,顯示 Owen Scott 創作的「Still Life of Blue Rose」和「Other Flowers」。

圖 4. 這個應用程式顯示靜態內容,但仍無法與使用者互動。

3. 為應用程式增加互動性

判別使用者互動方式

以數位方式打造藝術空間的優點,就是能讓使用者擁有動態的互動性體驗。在初始設計中,您建立了兩個按鈕供使用者進行互動。然而,這是您專屬的藝術空間,因此,您可以視需求變更相關設計,以及使用者與應用程式互動的方式。現在請花點時間思考您希望使用者與應用程式互動的方式,以及應用程式應如何根據這類互動做出回應。以下列出一些您可以在應用程式中加入的可能互動項目:

  • 輕觸按鈕時顯示下一件或上一件藝術品。
  • 滑動時快轉至下一本相簿中的藝術品。
  • 長按按鈕時顯示含有其他資訊的工具提示。

為動態元素建立狀態

接著處理使用者介面的部分,讓使用者輕觸按鈕時顯示下一件或上一件藝術品:

  1. 首先,找出使用者互動時需要變更的 UI 元素。

在本例中,UI 元素為藝術品圖片、藝術作品名稱、藝術家和發表年份。

  1. 視需求透過 MutableState 物件為每個動態 UI 元素建立狀態。
  2. 記得將硬式編碼值替換為已定義的 states

撰寫用於使用者互動的條件式邏輯

  1. 思考使用者輕觸按鈕時需要觸發的行為。不妨先從「Next」按鈕開始

當使用者輕觸「Next」按鈕時,應該會看到序列中的下一件藝術品。以目前來說,還不太能判定接下來要顯示哪一件藝術品。

  1. 為每件藝術品新增 ID,並採用開頭為 1 的連續數字格式。

我們現在已清楚知道下一件藝術品會是序列中帶有下一個 ID 的藝術品。

由於您的藝術品數量有限,因此建議您在顯示系列作品中的最後一件藝術品時,必須確定「Next」按鈕觸發的行為。其中一個常見行為就是在顯示最後一件藝術品後返回第一件藝術品。

  1. 先編寫虛擬程式碼,以擷取不含 Kotlin 語法的程式碼邏輯。

假設您要顯示三件藝術品,針對「下一件」按鈕的動作邏輯所編寫的虛擬程式碼如下所示:

if (current artwork is the first artwork) {
    // Update states to show the second artwork.
}
else if (current artwork is the second artwork) {
    // Update states to show the third artwork.
}
else if (current artwork is the last artwork) {
   // Update state to show the first artwork.
}
  1. 將虛擬程式碼轉換為 Kotlin 程式碼。

建構條件邏輯時,您可以使用 when 陳述式,而不要使用 if else 陳述式,以便在管理大量藝術品項的情況下讓程式碼更易讀。

  1. 如要在輕觸按鈕時執行這個邏輯,請將這個邏輯置於 Button 可組合函式的 onClick() 引數中。
  2. 重複上述相同步驟來建構「上一件」按鈕的動作邏輯。
  3. 執行您的應用程式,然後輕觸按鈕,以確認畫面會切換顯示上一件或下一件藝術品。

4. 挑戰:為各種螢幕尺寸建構應用程式

Android 的優點之一就是可支援多種裝置和螢幕尺寸,因此您所打造的應用程式可觸及廣泛的目標對象,並運用於多種使用情境。為確保所有使用者都能獲得最佳體驗,建議您在要支援的裝置上測試應用程式。舉例來說,在目前的範例應用程式中,您已對行動裝置的直向模式初步設計、建構及測試應用程式。不過,部分使用者可能會覺得在較大螢幕上以橫向模式使用您的應用程式時,能獲得愉快的使用體驗。

雖然平板電腦並不是這個應用程式主要支援的裝置,但建議您確保使用者在較大螢幕上使用應用程式時,該應用程式不會發生錯誤。

在平板電腦上測試應用程式在較大螢幕上的顯示效果:

  1. 如果您沒有 Android 平板電腦裝置,請建立 Android 虛擬裝置 (AVD)
  2. 在平板電腦 AVD 中以橫向模式建構及執行應用程式。
  3. 目視檢查有誤不可接受的錯誤,例如某些 UI 元素遭到截斷、沒有對齊,或者按鈕互動功能未如期運作。

Art Space 應用程式的表格顯示推送到螢幕一側的 UI 內容,而螢幕的另一側仍有大量空閒空間。

圖 5. 應用程式必須經過重新調整,才能在較大裝置上正確顯示。

  1. 修改程式碼以修正系統所有發現的錯誤。相關說明請參閱「大型螢幕應用程式品質基本相容性指南」。
  2. 再次對平板電腦和手機測試應用程式,確保錯誤經過修正之後可讓應用程式在這兩種裝置上正常運作。

Art Space 應用程式在平板電腦上的顯示畫面,置中的圖片和藝術品資訊卡等 UI 元素皆正常顯示。

圖 6. 應用程式在大型螢幕上的顯示效果良好。

5. 祝一切順利!

希望這份指南能在您打造自己的藝術空間時提供靈感!提醒您,您不必在一開始就打造出完美的應用程式,只要運用目前學到的 Android 相關知識來建構應用程式,並隨著技能提升,在日後加以改進。

應用程式完成後,您可以在產品系列中展示您的作品,並與親友一起使用。如要在社群媒體上分享您的作品,請使用主題標記 #AndroidBasics。