計算自訂小費

1. 事前準備

在本程式碼研究室中，您將使用「Compose 中的狀態簡介」程式碼研究室的解決方案程式碼，建構互動式小費計算機。使用者輸入帳單金額和小費百分比後，可以用來自動計算小費並四捨五入。最終版應用程式如下圖所示：

必要條件

• 完成「使用 Jetpack Compose 中的狀態」程式碼研究室
• 可在應用程式中新增 Text 和 TextField 可組合函式
• 具備 remember 函式、狀態、狀態提升的相關知識，並瞭解有狀態與無狀態可組合函式之間的差異

課程內容

• 在虛擬鍵盤上新增動作按鈕的方法。
• 鍵盤動作的設定方法。
• Switch 可組合函式的定義和使用方法。
• 版面配置檢查器的簡介。

建構項目

• Tip Time 應用程式，可根據使用者輸入的服務費用和小費百分比計算小費金額。

軟硬體需求

• Android Studio
• 「使用 Jetpack Compose 中的狀態」程式碼研究室的解決方案程式碼

2. 範例應用程式總覽

本程式碼研究室會從上一個程式碼研究室提供的 Tip Time 應用程式開始談起，該應用程式提供了根據固定費率計算小費金額的使用者介面。使用者可以在「Cost of Service」文字方塊中輸入服務費用。接著應用程式會計算小費金額並顯示在 Text 可組合函式中。

取得範例程式碼

如要開始使用，請先下載範例程式碼：

file_download 下載 ZIP 檔案

或者，您也可以複製 GitHub 存放區的程式碼：

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-tip-calculator.git
$ cd basic-android-kotlin-compose-training-tip-calculator
$ git checkout state

您可以瀏覽 Tip Calculator GitHub 存放區中的程式碼。

執行 Tip Time 應用程式

1. 在 Android Studio 中開啟 Tip Time 專案，並在模擬器或裝置上執行應用程式。
2. 輸入服務費用。應用程式會自動計算並顯示小費金額。

在目前的實作項目中，小費百分比是以硬式編碼的方式設為 15%。在本程式碼研究室中，您將透過文字欄位來擴充這項功能，讓應用程式依據自訂小費百分比計算並將小費金額四捨五入。

新增必要的字串資源

1. 在「Project」分頁中，依序點選「res」>「values」>「strings.xml」。
2. 在 strings.xml 檔案的 <resources> 標記之間，新增以下字串資源：

<string name="how_was_the_service">Tip (%)</string>
<string name="round_up_tip">Round up tip?</string>

strings.xml 檔案應該如以下程式碼片段所示，其中包含先前程式碼研究室中的字串：

strings.xml

<resources>
   <string name="app_name">TipTime</string>
   <string name="calculate_tip">Calculate Tip</string>
   <string name="cost_of_service">Cost of Service</string>
   <string name="how_was_the_service">Tip (%)</string>
   <string name="round_up_tip">Round up tip?</string>
   <string name="tip_amount">Tip Amount: %s</string>
</resources>

3. 將 Cost Of Service 字串變更為 Bill Amount 字串。在部分國家/地區中，「服務費」指的是「小費」，因此這項變更可避免混淆。
4. 在 Cost of Service 字串中，在屬性的 name cost_of_service 上按一下滑鼠右鍵，然後依序選取「Refactor」>「Rename」。系統會隨即開啟「Rename」對話方塊。

5. 在「Rename」對話方塊中，將 cost_of _service 替換為 bill_amount，然後按一下「Refactor」。這個步驟會更新專案中出現的所有 cost_of_service 字串資源，因此您無需手動變更 Compose 程式碼。

6. 在 strings.xml 檔案中，將字串值從 Cost of Service 變更為 Bill Amount：

<string name="bill_amount">Bill Amount</string>

7. 前往 MainActivity.kt 檔案，然後執行應用程式。文字方塊中的標籤已更新，如下圖所示：

3. 新增小費百分比文字欄位

顧客可能會想按照服務品質和其他各種原因來增加或減少小費。為滿足這項需求，應用程式應讓使用者計算自訂的小費。您將在本節中新增可讓使用者輸入自訂小費百分比的文字欄位，如下圖所示：

應用程式已有「Bill Amount」文字欄位可組合函式，也就是無狀態的 EditNumberField() 可組合函式。在先前的程式碼研究室中，您已將 amountInput 狀態從 EditNumberField() 可組合函式提升為 TipTimeScreen() 函式，讓 EditNumberField() 成為無狀態的可組合函式。

如要新增文字欄位，可以重複使用相同的 EditNumberField() 可組合函式，但搭配不同的標籤。如要進行這項變更，您需將標籤做為參數傳遞，而不是在 EditNumberField() 可組合函式中對標籤進行硬式編碼。

將 EditNumberField() 可組合函式設為可重複使用：

1. 在 EditNumberField() 可組合函式參數的 MainActivity.kt 檔案中，新增 Int 類型的 label 字串資源：

@Composable
fun EditNumberField(
   label: Int,
   value: String,
   onValueChange: (String) -> Unit
)

2. 將 Modifier 類型的 modifier 引數新增至 EditNumberField() 可組合函式：

@Composable
fun EditNumberField(
   label: Int,
   value: String,
   onValueChange: (String) -> Unit,
   modifier: Modifier = Modifier
)

3. 在函式主體中，以 label 參數取代硬式編碼的字串資源 ID：

@Composable
fun EditNumberField(
   //...
) {
   TextField(
       //...
       label = { Text(stringResource(label)) },
       //...
   )
}

4. 如要表示 label 參數預計會做為字串資源參照，請使用 @StringRes 註解為函式參數加上註解：

@Composable
fun EditNumberField(
   @StringRes label: Int,
   value: String,
   onValueChange: (String) -> Unit,
   modifier: Modifier = Modifier
)

5. 匯入下列內容：

import androidx.annotation.StringRes

6. 在 EditNumberField() 函式的 TextField 可組合函式中，將 label 參數傳遞給 stringResource() 函式。

@Composable
fun EditNumberField(
   @StringRes label: Int,
   value: String,
   onValueChange: (String) -> Unit,
   modifier: Modifier = Modifier
) {
   TextField(
       //...
       label = { Text(stringResource(label)) },
       //...
   )
}

7. 在 TipTimeScreen() 函式的 EditNumberField() 函式呼叫中，將 label 參數設為 R.string.bill_amount 字串資源：

EditNumberField(
   label = R.string.bill_amount,
   value = amountInput,
   onValueChange = { amountInput = it }
)

8. 在「Design」窗格中，按一下 「Build & Refresh」。該應用程式的 UI 應如下圖所示：

9. 在 TipTimeScreen() 函式的 EditNumberField() 函式呼叫後方，新增另一個用於自訂小費百分比的文字欄位。接著使用以下參數呼叫 EditNumberField() 可組合函式：

EditNumberField(
   label = R.string.how_was_the_service,
   value = "",
   onValueChange = { }
)

這個步驟會新增另一個用於自訂小費百分比的文字方塊。

10. 在「Design」窗格中，按一下「 Build & Refresh」。應用程式預覽畫面現在會顯示「Tip (%)」文字欄位，如下圖所示：

11. 在 TipTimeScreen() 函式頂端，為新增的文字欄位狀態變數加上名為 tipInput 的 var 屬性。接著，使用 mutableStateOf("") 來初始化變數，並將該呼叫放入 remember 函式中：

var tipInput by remember { mutableStateOf("") }

12. 在新的 EditNumberField() 函式呼叫中，將 value 具名參數設為 tipInput 變數，然後更新 onValueChange lambda 運算式中的 tipInput 變數：

EditNumberField(
   label = R.string.how_was_the_service,
   value = tipInput,
   onValueChange = { tipInput = it }
)

13. 在 TipTimeScreen() 函式的 tipInput 變數定義後方，定義名為 tipPercent 的 val 變數，藉此將 tipInput 變數轉換為 Double 類型，接著使用 Elvis 運算子，並在運算結果的值為 null 時傳回 0.0：

val tipPercent = tipInput.toDoubleOrNull() ?: 0.0

14. 在 TipTimeScreen() 函式中更新 calculateTip() 函式呼叫，傳入 tipPercent 變數做為第二個參數：

val tip = calculateTip(amount, tipPercent)

TipTimeScreen() 函式的程式碼現在應如下列程式碼片段所示：

@Composable
fun TipTimeScreen() {
   var amountInput by remember { mutableStateOf("") }
   var tipInput by remember { mutableStateOf("") }

   val tipPercent = tipInput.toDoubleOrNull() ?: 0.0
   val amount = amountInput.toDoubleOrNull() ?: 0.0
   val tip = calculateTip(amount, tipPercent)

   Column(
       modifier = Modifier.padding(32.dp),
       verticalArrangement = Arrangement.spacedBy(8.dp)
   ) {
       Text(
           text = stringResource(R.string.calculate_tip),
           fontSize = 24.sp,
           modifier = Modifier.align(Alignment.CenterHorizontally)
       )
       Spacer(Modifier.height(16.dp))
       EditNumberField(
           label = R.string.bill_amount,
           value = amountInput,
           onValueChange = { amountInput = it }
       )
       EditNumberField(
           label = R.string.how_was_the_service,
           value = tipInput,
           onValueChange = { tipInput = it }
       )
       Spacer(Modifier.height(24.dp))
       Text(
           text = stringResource(R.string.tip_amount, tip),
           modifier = Modifier.align(Alignment.CenterHorizontally),
           fontSize = 20.sp,
           fontWeight = FontWeight.Bold
       )
   }
}

15. 在模擬器或裝置上執行應用程式，然後輸入帳單金額和小費百分比。應用程式是否正確計算小費金額？

4. 設定動作按鈕

在先前的程式碼研究室中，您已瞭解如何使用 KeyboardOptions 類別設定鍵盤類型。在本節中，您將瞭解如何使用相同的 KeyboardOptions 設定鍵盤動作按鈕。鍵盤動作按鈕是指鍵盤末端的按鈕，您可以在下表中看到一些範例：

在這項工作中，您會為文字方塊設定兩個不同的動作按鈕：

• 「Bill Amount」文字方塊的「Next」動作按鈕，表示使用者已輸入完畢並想移到下一個文字方塊。
• 「Tip %」文字方塊的「Done」動作按鈕，表示使用者已完成輸入。

您可以在下方圖片中查看含有這些動作按鈕的鍵盤範例：

新增鍵盤選項：

1. 在 EditNumberField() 函式的 TextField() 函式呼叫中，將設為 ImeAction.Next 值的 imeAction 具名引數傳遞給 KeyboardOptions 建構函式。接著透過 KeyboardOptions.Default.copy 函式來使用其他預設選項，例如大寫和自動更正功能。

@Composable
fun EditNumberField(
   //...
) {
   TextField(
       //...
       keyboardOptions = KeyboardOptions.Default.copy(
           keyboardType = KeyboardType.Number,
           imeAction = ImeAction.Next
       )
   )
}

2. 在模擬器或裝置上執行應用程式。鍵盤現在會顯示「Next」動作按鈕，如下圖所示：

不過，您的目標是為文字欄位提供兩個不同的動作按鈕。我們稍後就會修正這個問題。

3. 檢查 EditNumberField() 函式。TextField() 函式中的 keyboardOptions 參數是採用硬式編碼。如要為文字欄位建立不同的動作按鈕，您必須傳入 KeyboardOptions 物件做為引數 (將在下一個步驟進行)。

// No need to copy, just examine the code.
fun EditNumberField(
   @StringRes label: Int,
   value: String,
   onValueChange: (String) -> Unit
) {
   TextField(
       //...
       keyboardOptions = KeyboardOptions.Default.copy(
          keyboardType = KeyboardType.Number,
          imeAction = ImeAction.Next
       )
   )
}

4. 在 EditNumberField() 函式定義中新增 KeyboardOptions 類型的 keyboardOptions 參數。接著在函式主體中，將該函式指派給 TextField() 函式的 keyboardOptions 具名參數：

@Composable
fun EditNumberField(
   @StringRes label: Int,
   keyboardOptions: KeyboardOptions,
   value: String,
   onValueChange: (String) -> Unit
){
   TextField(
       //...
       keyboardOptions = keyboardOptions
   )
}

5. 在 TipTimeScreen() 函式中更新第一個 EditNumberField() 函式呼叫，並為「Bill Amount」文字欄位傳入 keyboardOptions 具名參數。

EditNumberField(
   label = R.string.bill_amount,
   keyboardOptions = KeyboardOptions(
       keyboardType = KeyboardType.Number,
       imeAction = ImeAction.Next
   ),
   value = amountInput,
   onValueChange = { amountInput = it }
)

6. 在第二個 EditNumberField() 函式呼叫中，將「Tip %」文字欄位的 imeAction 變更為 ImeAction.Done。函式應如以下程式碼片段所示：

EditNumberField(
   label = R.string.how_was_the_service,
   keyboardOptions = KeyboardOptions(
       keyboardType = KeyboardType.Number,
       imeAction = ImeAction.Done
   ),
   value = tipInput,
   onValueChange = { tipInput = it }
)

7. 執行應用程式。畫面會隨即顯示「Next」和「Done」動作按鈕，如下圖所示：

8. 輸入帳單金額並點選「Next」動作按鈕，然後輸入小費百分比並點選「Done」動作按鈕。由於您尚未對按鈕加入任何功能，因此系統目前沒有任何回應。您將在下一節實作這些功能。

5. 設定鍵盤動作

在本節中，您將使用 KeyboardActions 類別實作鍵盤功能，藉此將焦點移到下一個文字欄位並關閉鍵盤。這項功能不僅能改善使用者體驗，還可讓開發人員為因應使用者在螢幕鍵盤上選擇輸入法編輯器 (IME) 的動作，指定要觸發的動作。當使用者點選「Next」或「Done」動作按鈕時，就是 IME 動作的一個例子。

您將實作以下項目：

• 針對「Next」動作：將焦點移到下一個文字欄位 (「Tip %」文字方塊)。
• 針對「Done」動作：關閉虛擬鍵盤。

1. 在 EditNumberField() 函式中新增名為 focusManager 的 val 變數，並為該變數指派 LocalFocusManager.current 屬性值：

val focusManager = LocalFocusManager.current

LocalFocusManager 介面的用途是控管 Compose 中的焦點。使用這個變數即可將焦點移至或移出文字方塊。

2. 匯入 import androidx.compose.ui.platform.LocalFocusManager。
3. 在 EditNumberField() 函式簽名中，新增另一個 KeyboardActions 類型的 keyboardActions 參數：

@Composable
fun EditNumberField(
   @StringRes label: Int,
   keyboardOptions: KeyboardOptions,
   keyboardActions: KeyboardActions,
   value: String,
   onValueChange: (String) -> Unit
) {
   //...
}

4. 在 EditNumberField() 函式主體中更新 TextField() 函式呼叫，並將 keyboardActions 參數設為傳入的 keyboardActions 參數。

@Composable
fun EditNumberField(
   //...
) {
   TextField(
       //...
       keyboardActions = keyboardActions
   )
}

現在，您可以為每個動作按鈕自訂帶有不同功能的文字欄位。

5. 在 TipTimeScreen() 函式呼叫中更新第一個 EditNumberField() 函式呼叫，以便納入 keyboardActions 具名參數做為新引數，然後為該參數指派 KeyboardActions( onNext = { } ) 這個值：

// Bill amount text field
EditNumberField(
   //...
   keyboardActions = KeyboardActions(
       onNext = { }
   ),
   //...
)

當使用者按下鍵盤上的「Next」動作按鈕時，系統就會執行 onNext 具名參數的 lambda 運算式。

6. 定義 lambda，要求 FocusManager 將焦點向下移動至下一個可組合函式「Tip %」。接著在 lambda 運算式中，呼叫 focusManager 物件上的 moveFocus() 函式並傳入 FocusDirection.Down 引數：

// Bill amount text field
EditNumberField(
   label = R.string.bill_amount,
   keyboardOptions = KeyboardOptions(
       keyboardType = KeyboardType.Number,
       imeAction = ImeAction.Next
   ),
   keyboardActions = KeyboardActions(
       onNext = { focusManager.moveFocus(FocusDirection.Down) }
   ),
   value = amountInput,
   onValueChange = { amountInput = it }
)

moveFocus() 函式會將焦點移往指定方向，在本例中為向下移動至「Tip %」文字欄位。

7. 匯入下列內容：

import androidx.compose.ui.focus.FocusDirection

8. 對「Tip %」文字欄位實作類似的步驟。不同之處在於您需要定義 onDone 具名參數，而非 onNext。

// Tip% text field
EditNumberField(
   //...
   keyboardActions = KeyboardActions(
       onDone = { }
   ),
   //...
)

9. 使用者輸入自訂小費後，鍵盤上的「Done」動作應清除焦點，進而關閉鍵盤。為此，請定義 lambda，要求 FocusManager 清除焦點，方法是在 lambda 運算式中，呼叫 focusManager 物件上的 clearFocus() 函式：

EditNumberField(
   label = R.string.how_was_the_service,
   keyboardOptions = KeyboardOptions(
       keyboardType = KeyboardType.Number,
       imeAction = ImeAction.Done
   ),
   keyboardActions = KeyboardActions(
       onDone = { focusManager.clearFocus() }),
   value = tipInput,
   onValueChange = { tipInput = it }
)

clearFocus() 函式會將焦點從目前所在元件中清除。

10. 執行應用程式。鍵盤動作現在會變更焦點所在的元件，如以下 GIF 所示：

6. 新增切換鈕

切換鈕可將單一項目設為開啟或關閉，使用者可以視需要選用其中一種狀態。切換按鈕包含指標和軌道，如下圖所示：

切換鈕是一種選取控制項，可用來輸入決定或宣告偏好設定，如下圖中的設定內容：

使用者可以來回拖曳「指標」選擇選項，或者輕觸切換按鈕進行切換。下方 GIF 中的切換鈕為另一個例子，其中的「Visual options」設定會切換為「Dark mode」：

如要進一步瞭解切換鈕，請參閱「切換鈕」說明文件。

您可以使用 Switch 可組合函式，讓使用者選擇是否要將小費無條件進位至最接近的整數，如下圖所示：

為 Text 和 Switch 可組合函式新增一列：

1. 在 EditNumberField() 函式後方新增 RoundTheTipRow() 可組合函式，然後傳入預設的 Modifier 做為類似 EditNumberField() 函式的引數：

@Composable
fun RoundTheTipRow(modifier: Modifier = Modifier) {
}

2. 實作 RoundTheTipRow() 函式，新增含有以下 modifier 的 Row 版面配置可組合函式，將子元素的寬度設為畫面最大寬度、置中對齊，並確保大小為 48 dp：

Row(
   modifier = Modifier
       .fillMaxWidth()
       .size(48.dp),
   verticalAlignment = Alignment.CenterVertically
) {
}

3. 匯入下列內容：

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Size

4. 在 Row 版面配置可組合項的 lambda 區塊中，新增使用 R.string.round_up_tip 字串資源的 Text 可組合項，即可顯示 Round up tip? 字串：

Text(text = stringResource(R.string.round_up_tip))

5. 在 Text 可組合項後方新增 Switch 可組合項，並傳遞設為 roundUp 的 checked 具名參數以及設為 onRoundUpChanged 的 onCheckedChange 具名參數。

Switch(
    checked = roundUp,
    onCheckedChange = onRoundUpChanged,
)

下表包含上述參數的資訊，這些參數與您為 RoundTheTipRow() 函式定義的參數相同：

6. 匯入下列內容：

import androidx.compose.material.Switch

7. 在 RoundTipRow() 函式中新增 Boolean 類型的 roundUp 參數，以及可接受 Boolean 且不會傳回任何結果的 onRoundUpChanged lambda 函式：

@Composable
fun RoundTheTipRow(
   roundUp: Boolean,
   onRoundUpChanged: (Boolean) -> Unit,
   modifier: Modifier = Modifier
)

這會提升切換鈕的狀態。

8. 在 Switch 可組合項中新增上述 modifier，讓 Switch 可組合項對齊螢幕尾端：

       Switch(
           modifier = modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.End),
           //...
       )

9. 匯入下列內容：

import androidx.compose.foundation.layout.wrapContentWidth

10. 在 TipTimeScreen() 函式中，為 Switch 可組合函式的狀態新增 var 變數。接著建立名為 roundUp 的 var 變數、設為 mutableStateOf()，並使用 false 做為預設引數。然後將呼叫放入 remember { } 中。

fun TipTimeScreen() {
   //...
   var roundUp by remember { mutableStateOf(false) }

   //...
   Column(
       ...
   ) {
     //...
  }
}

這是 Switch 可組合函式狀態的變數，預設狀態為 false。

11. 在 TipTimeScreen() 函式的 Column 區塊中，於「Tip %」文字欄位後方呼叫含有以下引數的 RoundTheTipRow() 函式：設為 roundUp 的 roundUp 具名參數，以及設為 lambda 回呼 (可更新 roundUp 值) 的 onRoundUpChanged 具名參數：

@Composable
fun TipTimeScreen() {
   //...

   Column(
       ...
   ) {
       Text(
           ...
       )
       Spacer(...)
       EditNumberField(
           ...
       )
       EditNumberField(
           ...
       )
       RoundTheTipRow(roundUp = roundUp, onRoundUpChanged = { roundUp = it })
       Spacer(...)
       Text(
           ...
       )
   }
}

這會顯示「Round up tip」列。

12. 執行應用程式。應用程式會顯示下圖中的「Round up tip?」的切換按鈕，但其中的指標不太明顯：

為了改善指標的可見度，請在後續步驟中將指標變更為深灰色。

13. 在 RoundTheTipRow() 函式的 Switch() 可組合函式中，新增 colors 具名參數。
14. 將 colors 具名參數設為 SwitchDefaults.colors() 函式，並在該函式中加入設為 Color.DarkGray 引數的 uncheckedThumbColor 具名參數。

Switch(
   //...
   colors = SwitchDefaults.colors(
       uncheckedThumbColor = Color.DarkGray
   )
)

15. 匯入下列內容：

import androidx.compose.material.SwitchDefaults
import androidx.compose.ui.graphics.Color

RoundTheTipRow() 可組合函式現在應如下列程式碼片段所示：

@Composable
fun RoundTheTipRow(roundUp: Boolean, onRoundUpChanged: (Boolean) -> Unit) {
   Row(
       modifier = Modifier
           .fillMaxWidth()
           .size(48.dp),
       verticalAlignment = Alignment.CenterVertically
   ) {
       Text(stringResource(R.string.round_up_tip))
       Switch(
           modifier = Modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.End),
           checked = roundUp,
           onCheckedChange = onRoundUpChanged,
           colors = SwitchDefaults.colors(
               uncheckedThumbColor = Color.DarkGray
           )
       )
   }
}

16. 執行應用程式。切換鈕的指標顏色現已變更，如下圖所示：

17. 輸入帳單金額和小費百分比，然後選取「Round up tip?」切換按鈕。這時小費金額並不會四捨五入，如果有此需求，請繼續依下一節說明更新 calculateTip() 函式。

更新 calculateTip() 函式將小費四捨五入

請修改 calculateTip() 函式以接受 Boolean 變數，將小費無條件進位至最接近的整數：

1. 如要將小費四捨五入，calculateTip() 函式必須知道切換按鈕的狀態，這是一個 Boolean 值。請在 calculateTip() 函式中新增 Boolean 類型的 roundUp 參數：

private fun calculateTip(
   amount: Double,
   tipPercent: Double = 15.0,
   roundUp: Boolean
): String {
   //...
}

2. 在 calculateTip() 函式的 return 陳述式前方，新增 if() 條件來檢查 roundUp 值。如果 roundUp 為 true，請定義 tip 變數並設為 kotlin.math.ceil() 函式，然後傳遞 tip 函式做為引數：

if (roundUp)
   tip = kotlin.math.ceil(tip)

完成的 calculateTip() 函式應如下列程式碼片段所示：

private fun calculateTip(amount: Double, tipPercent: Double = 15.0, roundUp: Boolean): String {
   var tip = tipPercent / 100 * amount
   if (roundUp)
       tip = kotlin.math.ceil(tip)
   return NumberFormat.getCurrencyInstance().format(tip)
}

3. 在 TipTimeScreen() 函式中更新 calculateTip() 函式呼叫，然後傳入 roundUp 參數：

val tip = calculateTip(amount, tipPercent, roundUp)

4. 執行應用程式。應用程式現在可將小費金額四捨五入，如下圖所示：

7. 取得解決方案程式碼

完成程式碼研究室後，如要下載當中用到的程式碼，您可以使用以下 Git 指令：

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-tip-calculator.git

您也可以將存放區下載為 ZIP 檔案、將其解壓縮，並在 Android Studio 中開啟。

file_download下載 ZIP 檔案

如要查看解決方案程式碼，請前往 GitHub。

8. 結語

恭喜！您已在 Tip Time 應用程式中新增自訂小費功能。現在使用者可在應用程式中輸入自訂小費百分比，並將小費金額四捨五入。歡迎在社群媒體上分享您的作品，並加上 #AndroidBasics 主題標記！

瞭解詳情

• FocusManager
• KeyboardActions
• 使用版面配置檢查器和版面配置驗證功能對版面配置進行偵錯