練習:點選行為

1. 事前準備

在這個課程中,您已學到如何在應用程式中加入按鈕,以及如何修改應用程式來回應按鈕點選動作。接下來就要建構應用程式,練習運用所學知識。

您將建立名為 Lemonade 的應用程式。首先,請詳閱 Lemonade 應用程式的需求條件,瞭解應用程式應有的外觀和行為模式。如果您想挑戰自我,可以直接開始建構應用程式。假如遇到困難,閱讀後續章節即可取得更多提示與指引,瞭解如何分析並逐步解決問題。

請依照自己的步調完成這個練習。建構應用程式功能的各個部分時可以花些時間仔細思考。雖然我們最後會提供 Lemonade 應用程式的解決方案程式碼,但建議您先自行嘗試建構應用程式,再查看解決方案。提醒您,我們提供的解決方案並非建構 Lemonade 應用程式的唯一方法,您可以用其他方式建構應用程式,只要符合應用程式需求條件即可。

必要條件

  • 能利用文字和圖片可組合函式,在 Compose 中建立簡易 UI 版面配置
  • 能建構可回應按鈕點選動作的互動式應用程式
  • 對組成和重新組成有基本瞭解
  • 熟悉 Kotlin 程式設計語言的基本概念,包括函式、變數、條件式與 lambda

軟硬體需求

  • 已安裝 Android Studio 且具備網路連線能力的電腦。

2. 應用程式總覽

您將協助我們實際製作數位檸檬汁!這項練習的目標,是要建立簡易的互動式應用程式,可讓您在畫面上輕觸圖片來擠出檸檬汁,直到裝滿一杯檸檬汁為止。這可以視為某種比喻,或是趣味的消遣活動!

dfcc3bc3eb43e4dd.png

以下說明應用程式的運作方式:

  1. 使用者首次啟動應用程式時,會看到一棵檸檬樹。畫面上會顯示一個標籤,提示使用者輕觸檸檬樹圖片,從樹上「選取」一顆檸檬。
  2. 使用者輕觸檸檬樹後,畫面上會顯示一顆檸檬,並提示使用者輕觸檸檬來「擠」檸檬汁。使用者需要輕觸檸檬多次才能擠出檸檬汁,而輕觸次數取決於系統隨機產生的數值。這個值介於 2 到 4,每次都不一定。
  3. 輕觸檸檬的次數達到要求後,畫面上就會出現一杯新鮮的檸檬汁!系統會要求使用者輕觸杯子來「飲用」檸檬汁。
  4. 使用者輕觸裝著檸檬汁的杯子後,畫面上會顯示空杯,並要求使用者輕觸空杯來重新開始。
  5. 使用者輕觸空杯後,就會看到檸檬樹,並可以重新開始整個流程,再多擠一些檸檬汁!

以下提供較大的螢幕截圖,方便您瞭解應用程式的外觀:

針對每個檸檬汁製作步驟,畫面上會顯示不同的圖片和文字標籤,應用程式回應點選動作的方式也不盡相同。舉例來說,當使用者輕觸檸檬樹時,應用程式會顯示檸檬。

您的任務是建構應用程式的 UI 版面配置及實作相關邏輯,讓使用者順利完成所有製作檸檬汁的步驟。

3. 開始操作

<