カスタムのチップ金額を計算する

1. 始める前に

この Codelab では、Compose の状態の概要 Codelab の解答コードを使用して、インタラクティブなチップ計算ツールを作成します。このアプリでは、請求額とチップ率を入力するとチップ金額が自動的に計算され、四捨五入されます。最終的なアプリの外観は次のとおりです。

前提条件

「Jetpack Compose で状態を使用する」Codelabを修了している
Text コンポーザブルと TextField コンポーザブルをアプリに追加できる
remember 関数、状態、状態ホイスティング、コンポーズ可能な関数のステートフル / ステートレスの違いに関する知識

学習内容

仮想キーボードにアクションボタンを追加する方法
キーボードアクションの設定方法
Switch コンポーザブルの概要と使用方法
Layout Inspector の概要

作成するアプリの概要

ユーザーが入力したサービス料金とチップ率に基づいてチップ金額を計算する Tip Time アプリ

必要なもの

Android Studio
「Jetpack Compose で状態を使用する」Codelab の解答コード

2. スターターアプリの概要

この Codelab は、前の Codelab の「Tip Time アプリ」を使って始めます。このアプリは、固定のチップ率でチップ金額を計算するために必要なユーザーインターフェースを提供するものです。[Cost of Service] テキストボックスに、ユーザーがサービス料金を入力します。アプリはチップ金額を計算して Text コンポーザブルに表示します。

スターターコードを取得する

まず、スターターコードをダウンロードします。

または、コードの 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 アプリを実行する

Android Studio で Tip Time プロジェクトを開き、エミュレータまたはデバイスでアプリを実行します。
サービス料金を入力します。アプリが自動的にチップ金額を計算して表示します。

現在の実装では、チップ率は 15% にハードコードされています。この Codelab では、テキストフィールドを使用してこの機能を拡張し、アプリでカスタムのチップ率を計算してチップ金額を四捨五入できるようにします。

必要な文字列リソースを追加する

[Project] タブで、[res] > [values] > [strings.xml] をクリックします。
strings.xml ファイルの <resources> タグの間に、次の文字列リソースを追加します。

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

strings.xml ファイルは、前の Codelab の文字列を含む次のコードスニペットのようになります。

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>

Cost Of Service 文字列を Bill Amount 文字列に変更します。国によっては「サービス」が「チップ」を意味するため、このように変更して混乱を防ぎます。
Cost of Service 文字列で、属性の name cost_of_service を右クリックし、[Refactor] > [Rename] を選択します。[Rename] ダイアログが開きます。

[Rename] ダイアログボックスで、cost_of _service を bill_amount に置き換えて [Refactor] をクリックします。これでプロジェクト内の cost_of_service 文字列リソースがすべて更新されるため、Compose コードを手動で変更する必要はありません。

strings.xml ファイルで、文字列値を Cost of Service から Bill Amount に変更します。

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

MainActivity.kt ファイルに移動してアプリを実行します。次の画像のように、テキストボックスのラベルが更新されます。

テキストフィールドに Cost of Service ではなく Bill Amount と表示

3. チップ率のテキストフィールドを追加する

提供されたサービスの質やその他のさまざまな理由によって、チップを増減したい場合があります。これに対応するために、アプリでユーザーがカスタムのチップ金額を計算できるようにする必要があります。このセクションでは、次の画像のように、ユーザーがカスタムのチップ率を入力するテキストフィールドを追加します。

アプリにはすでに [Bill Amount] テキストフィールドコンポーザブルがあります。これはステートレスな、EditNumberField() というコンポーズ可能な関数です。前の Codelab では、amountInput の状態を EditNumberField() コンポーザブルから TipTimeScreen() 関数にホイスティングし、EditNumberField() コンポーザブルをステートレスにしました。

テキストフィールドを追加するには、同じ EditNumberField() コンポーザブルを再利用しますが、別のラベルを使用します。この変更を行うには、ラベルをコンポーズ可能な関数 EditNumberField() の中でハードコードするのではなく、パラメータとして渡す必要があります。

コンポーズ可能な関数 EditNumberField() を再利用可能にします。

MainActivity.kt ファイルで、コンポーズ可能な関数 EditNumberField() のパラメータに Int 型の label 文字列リソースを追加します。

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

Modifier 型の modifier 引数をコンポーズ可能な関数 EditNumberField() に追加します。

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

関数本体で、ハードコードされた文字列リソース ID を label パラメータに置き換えます。

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

label パラメータが文字列リソース参照であることを示すために、関数パラメータに @StringRes アノテーションを付けます。

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

以下をインポートします。

import androidx.annotation.StringRes

EditNumberField() 関数の TextField コンポーザブルで、label パラメータを stringResource() 関数に渡します。

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

TipTimeScreen() 関数の EditNumberField() 関数呼び出しで、label パラメータを R.string.bill_amount 文字列リソースに設定します。

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

[Design] ペインで「Build & Refresh」をクリックします。アプリの UI は次の画像のようになります。

TipTimeScreen() 関数で、EditNumberField() 関数呼び出しの後に、カスタムのチップ率用に別のテキストフィールドを追加します。次のパラメータを使用して、コンポーズ可能な関数 EditNumberField() を呼び出します。

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

これで、カスタムのチップ率を入力する別のテキストボックスが追加されます。

[Design] ペインで「Build & Refresh」をクリックします。次の画像のように、アプリのプレビューに [Tip (%)] テキストフィールドが表示されるようになりました。

TipTimeScreen() 関数の先頭に、追加したテキストフィールドの状態変数用に tipInput という var プロパティを追加します。mutableStateOf("") を使用して変数を初期化し、remember 関数で呼び出しを囲みます。

var tipInput by remember { mutableStateOf("") }

新しい EditNumberField() 関数呼び出しで、名前付きパラメータ value を tipInput 変数に設定し、ラムダ式 onValueChange の tipInput 変数を更新します。

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

TipTimeScreen() 関数で、tipInput 変数の定義の後、tipInput 変数を Double 型に変換する tipPercent という val 変数を定義し、エルビス演算子を使用して、値が null の場合に 0.0 を返します。

val tipPercent = tipInput.toDoubleOrNull() ?: 0.0

TipTimeScreen() 関数で、calculateTip() 関数呼び出しを更新し、2 番目のパラメータとして 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
       )
   }
}

エミュレータまたはデバイスでアプリを実行し、請求額とチップ率を入力します。チップ金額は正しく計算されていますか。

4. アクションボタンを設定する

前の Codelab では、KeyboardOptions クラスを使用してキーボードのタイプを設定する方法について説明しました。このセクションでは、同じ KeyboardOptions を使用してキーボードアクションボタンを設定する方法について説明します。キーボードアクションボタンは、キーボードの末端にあるボタンです。次の表に例を示します。

プロパティ	キーボードアクションボタン
`ImeAction.Search`: ユーザーが検索を行うときに使用します。
`ImeAction.Send`: ユーザーが入力フィールドでテキストを送信するときに使用します。
`ImeAction.Go`: ユーザーが入力テキストのターゲットに移動するときに使用します。

このタスクでは、テキストボックスのアクションボタンを 2 種類設定します。

[Bill Amount] テキストボックスの Next アクションボタン。ユーザーが現在の入力を完了し、次のテキストボックスに移動することを示します。
[Tip %] テキストボックスの Done アクションボタン。ユーザーが所定の入力を終了したことを示します。

これらのアクションボタンを備えたキーボードの例を次の画像に示します。

キーボードオプションを追加します。

EditNumberField() 関数の TextField() 関数呼び出しで、ImeAction.Next 値に設定した imeAction 名前付き引数を KeyboardOptions コンストラクタに渡します。KeyboardOptions.Default.copy 関数を使用して、大文字アルファベットの使用や自動修正などの、他のデフォルトオプションを使用します。

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

エミュレータまたはデバイスでアプリを実行します。次の画像のように、キーボードに Next アクションボタンが表示されるようになりました。

しかし、テキストフィールドにはアクションボタンが 2 種類必要です。この問題はすぐに修正できます。

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
       )
   )
}

EditNumberField() 関数定義に、KeyboardOptions 型の keyboardOptions パラメータを追加します。関数本体で、これを TextField() 関数の keyboardOptions 名前付きパラメータに代入します。

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

TipTimeScreen() 関数で、最初の EditNumberField() 関数呼び出しを更新し、[Bill Amount] テキストフィールドの keyboardOptions 名前付きパラメータを渡します。

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

2 番目の 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 }
)

アプリを実行します。次の画像のように、Next と Done のアクションボタンが表示されます。

請求額を入力して Next アクションボタンをクリックします。次にチップ率を入力し、Done アクションボタンをクリックします。まだボタンに機能を追加していないため、何も起こりません。これは次のセクションで行います。

5. キーボードアクションを設定する

このセクションでは、KeyboardActions クラスを使用して、フォーカスを次のテキストフィールドに移動してキーボードを閉じる機能を実装し、ユーザーエクスペリエンスを改善します。これによりデベロッパーは、ソフトウェアキーボードでユーザー IME（インプットメソッドエディタ）アクションに応じてトリガーするアクションを指定できます。IME アクションの例としては、ユーザーが Next または Done アクションボタンをクリックした場合が挙げられます。

以下を実装します。

Next アクション: フォーカスを次のテキストフィールド（[Tip %] テキストボックス）に移動する
Done アクション: 仮想キーボードを閉じる

EditNumberField() 関数で、focusManager という val 変数を追加し、LocalFocusManager.current プロパティの値を代入します。

val focusManager = LocalFocusManager.current

Compose では、LocalFocusManager インターフェースを使用してフォーカスを制御します。この変数を使用して、フォーカスをテキストボックスに移動し、テキストボックスからフォーカスをクリアします。

import androidx.compose.ui.platform.LocalFocusManager をインポートします。
EditNumberField() 関数のシグネチャに、KeyboardActions 型の別の keyboardActions パラメータを追加します。

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

EditNumberField() 関数本体で、TextField() 関数呼び出しを更新し、keyboardActions パラメータを、渡された keyboardActions パラメータに設定します。

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

テキストフィールドをカスタマイズしてアクションボタンごとに異なる機能を持たせられるようになりました。

TipTimeScreen() 関数呼び出しで、keyboardActions 名前付きパラメータを新しい引数として含むように最初の EditNumberField() 関数呼び出しを更新します。値 KeyboardActions( onNext = { } ) を代入します。

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

onNext 名前付きパラメータのラムダ式は、ユーザーがキーボードの Next アクションボタンを押すと実行されます。

ラムダを定義し、FocusManager をリクエストして、フォーカスを次のコンポーザブルである [Tip %] まで下に移動します。ラムダ式では、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 %] テキストフィールドまで下に移動します。

以下をインポートします。

import androidx.compose.ui.focus.FocusDirection

同様の実装を [Tip %] テキストフィールドに追加します。違いは、onNext ではなく onDone 名前付きパラメータを定義する必要があることです。

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

ユーザーがカスタムのチップを入力したら、キーボードの Done アクションでフォーカスをクリアし、キーボードを閉じる必要があります。ラムダを定義し、FocusManager をリクエストしてフォーカスをクリアします。ラムダ式では、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() 関数は、フォーカスのあるコンポーネントからフォーカスをクリアします。

アプリを実行します。次の GIF のように、フォーカスのあるコンポーネントがキーボードアクションで変更されるようになりました。

6. スイッチを追加する

スイッチは、1 つのアイテムの状態をオンまたはオフに切り替えます。切り替えボタンには 2 つの状態があり、ユーザーは 2 つのオプションのいずれかを選択できます。切り替えボタンは、次の画像のように、つまみとトラックから構成されています。

1. つまみ
2. トラック

スイッチは、次の画像のように、決定内容の入力や設定の宣言に使用できる選択コントロールです。

ユーザーは、つまみを前後にドラッグしてオプションを選択するか、単にスイッチをタップして切り替えます。別の切り替え例として、次の GIF ではビジュアルオプションの設定をダークモードに切り替えています。

スイッチについて詳しくは、スイッチのドキュメントをご覧ください。

次の画像のように、Switch コンポーザブルを使用して、チップを最も近い整数に切り上げるかどうかを選択できるようにします。

Text コンポーザブルと Switch コンポーザブルの行を追加します。

EditNumberField() 関数の後にコンポーズ可能な関数 RoundTheTipRow() を追加し、EditNumberField() 関数と同様の引数としてデフォルトの Modifier を渡します。

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

RoundTheTipRow() 関数を実装し、次の modifier を使用して Row レイアウトコンポーザブルを追加します。子要素の幅を画面上の最大値に設定し、中央に配置して、サイズを 48 dp にします。

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

以下をインポートします。

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

Row レイアウトコンポーザブルのラムダブロックに、R.string.round_up_tip 文字列リソースを使用して Round up tip? 文字列を表示する Text コンポーザブルを追加します。

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

Text コンポーザブルの後に Switch コンポーザブルを追加します。checked 名前付きパラメータを roundUp に設定し、onCheckedChange 名前付きパラメータを onRoundUpChanged に設定して渡します。

Switch(
    checked = roundUp,
    onCheckedChange = onRoundUpChanged,
)

次の表に、RoundTheTipRow() 関数で定義したものと同じパラメータに関する情報が含まれています。

パラメータ	説明
`checked`	スイッチがオンになっているかどうか。これは `Switch` コンポーザブルの状態です。
`onCheckedChange`	スイッチがクリックされたときに呼び出されるコールバック。

以下をインポートします。

import androidx.compose.material.Switch

RoundTipRow() 関数に、Boolean 型の roundUp パラメータと、Boolean を受け取って何も返さない onRoundUpChanged ラムダ関数を追加します。

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

これにより、スイッチの状態がホイスティングされます。

Switch コンポーザブルに、この modifier を追加して、Switch コンポーザブルを画面の末端に配置します。

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

以下をインポートします。

import androidx.compose.foundation.layout.wrapContentWidth

TipTimeScreen() 関数に、Switch コンポーザブルの状態の var 変数を追加します。roundUp という var 変数を作成して mutableStateOf() に設定し、デフォルトの引数として false を指定します。呼び出しを remember { } で囲みます。

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

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

これは Switch コンポーザブルの状態の変数であり、false がデフォルトの状態になります。

TipTimeScreen() 関数の Column ブロックで、[Tip %] テキストフィールドの後、RoundTheTipRow() 関数を呼び出します。roundUp 名前付きパラメータを roundUp に設定し、onRoundUpChanged 名前付きパラメータを、roundUp 値を更新するラムダコールバックに設定するよう、引数を指定します。

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

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

[Round up tip?] 行が表示されます。

アプリを実行します。アプリに [Round up tip?] の切り替えが表示されますが、次の画像のように、切り替えのつまみがかなり見えにくい状態です。

選択解除されたスイッチと選択されたスイッチ。数字を付して 2 つの要素と状態を示しています。 1. つまみ
2. トラック

次のステップとして、つまみをダークグレーに変更し、見やすくします。

RoundTheTipRow() 関数の Switch() コンポーザブルに、colors 名前付きパラメータを追加します。
colors 名前付きパラメータを、Color.DarkGray 引数に設定された uncheckedThumbColor 名前付きパラメータを受け入れる SwitchDefaults.colors() 関数に設定します。

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

以下をインポートします。

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
           )
       )
   }
}

アプリを実行します。次の画像のように、スイッチのつまみの色が変わります。

請求額とチップ率を入力し、[Round up tip?] の切り替えを選択します。チップの金額は四捨五入されませんが、これはまだ calculateTip() 関数を更新する必要があるためです（次のセクションで行います）。

チップを四捨五入するように `calculateTip()` 関数を更新する

Boolean 変数を受け入れてチップを最も近い整数に切り上げるように、calculateTip() 関数を変更します。

チップを切り上げるには、calculateTip() 関数がスイッチの状態（Boolean）を把握する必要があります。calculateTip() 関数に、Boolean 型の roundUp パラメータを追加します。

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

calculateTip() 関数の return ステートメントの前に、roundUp の値をチェックする if() 条件を追加します。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)
}

TipTimeScreen() 関数で、calculateTip() 関数呼び出しを更新し、roundUp パラメータを渡します。

val tip = calculateTip(amount, tipPercent, roundUp)

アプリを実行します。次の画像のように、チップ金額が切り上げられるようになりました。

7. 解答コードを取得する

この Codelab の完成したコードをダウンロードするには、次の git コマンドを使用します。

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

または、リポジトリを ZIP ファイルとしてダウンロードし、Android Studio で開くこともできます。

解答コードを確認する場合は、GitHub で表示します。

8. おわりに

これで、Tip Time アプリにカスタムのチップ機能を追加しました。このアプリでは、ユーザーがカスタムのチップ率を入力し、チップの金額を切り上げられるようになりました。#AndroidBasics を付けて、ソーシャルメディアで共有しましょう。