專案：建立名片應用程式

1. 事前須知

您將運用在本單元學到的知識，建構自己的名片應用程式。先前的程式碼研究室會引導您逐步按照指示操作，不過本單元不同，只會提供相關指南和建議，說明您可以運用目前學過的概念建立哪些內容。雖然我們在這裡提供的引導有限，您可以自行發揮創意建構專屬應用程式。

自行建構應用程式是一大挑戰，不過別擔心，您已經充分練習過了！只要將學過的技巧應用在這個新情境中即可。如果不確定如何實作應用程式的某些部分，歡迎隨時參閱先前的程式碼研究室。

如果您在自行建構應用程式的過程中解開了難題，不僅可以學得更快，您對這些概念的印象也會更深刻。還有一個好處是應用程式完全由您自訂，因此您可以按照個人需求設計內容，然後將名片展示給親朋好友！

必要條件

  • 可在 Android Studio 中建立及執行專案。
  • 具有可組合函式的使用經驗，包括 Text 和 Image 可組合函式。

課程內容

  • 如何使用 Row 和 Column 可組合函式建構簡易的版面配置，並使用 horizontalAlignment 和 verticalArrangement 參數排版。
  • 如何使用 Modifier 物件自訂 Compose 元素。

建構項目

  • 可顯示名片的 Android 應用程式。

軟硬體需求

  • 已安裝 Android Studio 的電腦。
  • 要顯示在應用程式中的 Android 標誌。您可以使用這個存放區中的圖片。

下方為應用程式在專案完成時的可能樣貌：

c941a07bca72427f.png

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

建立低擬真度的原型

當您開始進行專案時，建議您以視覺化的方式呈現如何在畫面上搭配使用 UI 元素。在專業開發作業中，設計人員或設計團隊通常會為開發人員提供內含實際規格的 UI 模擬圖或設計。不過，如果您並未與設計人員合作開發，也可以自行建立低擬真度的原型。低擬真度的原型就是簡易的模型或繪圖，可讓您基本掌握應用程式的樣貌。

令人驚訝的是，建構應用程式期間往往不會有設計人員從旁協助，因此對開發人員而言，能夠草擬簡易 UI 模擬圖是很實用的技能。別擔心，您不必成為專業的設計人員，也不用瞭解如何使用設計工具，只要使用筆和紙、Google 繪圖或 Google 簡報，就能畫出簡易模擬圖。

如何建立低擬真度原型：

  1. 使用您偏好的方法新增應用程式的組成元素。您可以考慮新增 Android 標誌、姓名、職稱和聯絡資訊等等，也可以新增代表聯絡資訊的圖示，例如以電話圖示表示電話號碼。
  2. 在不同位置新增這些元素，然後看看是否合適。即使無法第一次就做出完美的設計也不用擔心，您可以先選擇採用其中一種設計，之後再逐步調整。

您可能會做出類似下圖的低擬真度設計：

33433fd75a21776.png

將設計轉為程式碼

如何將原型的設計轉為程式碼：

  1. 找出應用程式的不同邏輯區塊，然後在區塊周圍畫出界線。這個步驟可引導您將畫面分為小型的可組合函式，並思考可組合函式的階層結構。

在這個範例中，您可以將畫面分為以下兩個區塊：

  • 標誌、姓名和職稱
  • 聯絡資訊

每個區塊都能轉換成一個可組合函式。這樣一來，您就可以在建構 UI 時，使用小型的可組合函式構成元素。您可以使用版面配置可組合函式排列各個區塊，例如 Row 或 Column 可組合函式。

86ba449b7f9a5866.png

  1. 看看應用程式中的每個區段，並找出哪些區段內含多個 UI 元素，然後在元素周圍畫出界線。這些界線可幫助您瞭解區塊中各元素之間的關係。

699b66506190e912.png

現在，您可以更輕鬆地瞭解如何使用版面配置可組合函式排列 Text、Image、Icon 和其他可組合函式。

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

Row 或 Column 可組合函式

  • 在 Row 和 Column 可組合函式中嘗試多種 horizontalArrangement 和 verticalAlignment 參數，找出符合目前設計的參數設定。

Image 可組合函式

  • 別忘了填寫 contentDescription 參數。如同先前的程式碼研究室所述，TalkBack 會使用 contentDescription 參數為應用程式提供無障礙體驗。如果您的 Image 可組合函式只有裝飾用途，或是您的 Text 元素已用來說明 Image 可組合函式，就可以將 contentDescription 參數設為 null。您也可以在 modifier 參數中指定 height 和 width 修飾符，這樣就能夠自訂圖片大小。

Icon 可組合函式

Text 可組合函式

  • 您可以試著在 fontSize、textAlign、color 和 fontWeight 參數中使用不同的值，為文字設定樣式。

間距與對齊設定

  • 您可以使用 Modifier 引數 (例如 padding 和 weight 修飾符) 排列可組合函式。
  • 您也可以使用 Spacer 可組合函式讓間距看起來更明顯。

自訂顏色

  • 您可以採用自訂顏色，方法是使用 Color 類別和十六進位顏色代碼 (以十六進位制表示 RGB 格式的顏色)。舉例來說，在 Android 中，綠色的十六進位代碼為 #3DDC84，只要使用這個代碼，就能將文字顏色設為同樣的綠色，範例如下：
Text("Example", color = Color(0xFF3ddc84))
  1. 在模擬器或 Android 裝置上執行應用程式，確認程式碼可以順利編譯。

3. 祝一切順利！

希望這份指南能在您使用 Compose 建立自己的名片時提供靈感！您還可以使用自己的標誌或相片進一步自訂應用程式的內容！應用程式完成後，您可以向親朋好友展示您的名片。如要在社群媒體上分享您的作品，請使用主題標記 #AndroidBasics。