Kotlin でのチップ計算ツールの構築: どのように機能するのか?

Kotlin で簡単なチップ計算アプリケーションを作成する方法を示します。 より正確には、Kotlin 1.3.21、Android 4、Android Studio 3。この記事は、まず Android アプリケーションの開発を始める人にとって興味深いものとなるでしょう。 これにより、アプリケーション内で何がどのように機能するかを理解できます。

このような計算機は、レストランやカフェで時間を過ごすことを決めた会社からのチップの金額を計算する必要がある場合に役立ちます。 もちろん、誰もがウェイターにお茶を残すわけではなく、常にウェイターにお茶を残すわけではありません。これはむしろ西洋の伝統ですが、いずれにせよ、このようなアプリケーションを開発するプロセスは興味深いものです。

リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。

スキルボックスは次のことを推奨します。 実践コース 「モバイル デベロッパー PRO」.

アプリの実行時の外観は次のとおりです。

合計金額に対する希望の割合、ミーティングの参加者数を入力すると、残すべきチップの量という結果が得られます。

はじめに

アプリの完全なインターフェイスは次のようになります。




最初のアクション - プロジェクトベースのダウンロード。 Android Studio 3.0以降で開きます。 プロジェクトをビルドして実行すると、白い画面が表示されます。 すべてが順調であるべきです。

ユーザーのアクションは時系列でプロジェクトに書き込まれるため、すべてが明確になります。 これを表示するには、[表示] -> [ツール ウィンドウ] -> [TODO] を開きます。

プロジェクトを調査し、colors.xml を開いてカラー パレットを評価します。 strings.xml にはテキスト データ (キャプション) が含まれ、styles.xml にはいくつかのフォント テンプレートが含まれます。

原価セクションの開発

activity_main.xml を開き、以下のコードを LinearLayout (#1) に追加します。

<TextView
    android_id="@+id/expensePerPersonTextView"
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_paddingTop="30dp"
    style="@style/h1Bold"
    android_textColor="@color/colorAccent"
    android_text="0"/>
 
<TextView
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_paddingBottom="25dp"
    style="@style/h2"
    android_textColor="@color/colorAccent"
    android_text="@string/perPersonStaticText"/>

これで、値ディレクトリのスタイルを設定したり、次を使用して色を調整したりできます。 マテリアル.ioツール.

これで、プロジェクトは次のようになります。

ご覧のとおり、コストの計算はユーザーが入力したデータに基づいています。

アカウントセクションの開発

以下のコードを LinearLayout の Expense セクション (#2) の後に追加します。

<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_background="@color/colorAccent">
 
<! — TODO #3: Build Bill Section →
 
… 
</LinearLayout>

TODO リストの後で LinearLayout を閉じ、新しいコードを追加して LinearLayout 内に配置します (#3)。

<TextView
      android_layout_margin="15dp"
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_textColor="@color/colorWhite"
      style="@style/h4"
      android_text="@string/billStaticText"/>
 
<EditText
      android_id="@+id/billEditText"
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_textColor="@color/colorWhite"
      android_inputType="numberDecimal"
      android_maxLines="1"
      style="@style/h2Bold"
      android_text="0"/>

アプリケーションの主なタスクは、レストランでの集まりの各参加者の個別コストを計算することであるため、costPerPersonTextView が主な役割を果たします。

EditText は入力を XNUMX 行に制限するため、このパラメータは NumberDecimal inputType に設定する必要があります。

テスト用のプロジェクトを開始し、合計ダメージ (壊れたカップ、皿など) のパラメータを入力します。

「人とヒント」セクションの開発

チップ金額セレクターを追加するには、以下のコードを新しい LinearLayout セクション (#4) に貼り付けます。

<TextView
      android_layout_margin="15dp"
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_textColor="@color/colorWhite"
      style="@style/h4"
      android_text="@string/tipStaticText"/>
 
<LinearLayout
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_orientation="horizontal">
 
<ImageButton
        android_id="@+id/subtractTipButton"
        style="@style/operationButton"
        android_layout_marginLeft="20dp"
        android_layout_marginStart="20dp"
        android_src="@drawable/subtract"/>
 
<TextView
        android_id="@+id/tipTextView"
        android_layout_margin="15dp"
        android_layout_width="0dp"
        android_layout_height="wrap_content"
        android_textColor="@color/colorWhite"
        android_layout_weight="1"
        style="@style/h2Bold"
        android_text="20%"/>
 
<ImageButton
        android_id="@+id/addTipButton"
        style="@style/operationButton"
        android_layout_marginEnd="20dp"
        android_layout_marginRight="20dp"
        android_src="@drawable/add"/>
 
</LinearLayout>

このコードは、チップの金額を正確に計算するために必要です。 デフォルトのテキスト値は 20 です。ImageButton は、書き込み権限のあるフォルダー内のアイコンとともに提供されます。

セクション全体をコピーし、次の行を追加します (#5)。

• ImageButton ID (subtractPeopleButton、addPeopleButton)
• TextView ID (numberOfPeopleStaticText、numberOfPeopleTextView)
• numberOfPeopleTextView の DefaultText (4 である必要があります)。

アプリケーションを起動すると、請求金額を追加することができ、追加/減算ボタンも機能しますが、今のところ何も起こりません。

ビューの追加

MainActivity.kt を開き、これを initViews 関数に追加します (#6)。

private fun initViews() {
        expensePerPersonTextView = findViewById(R.id.expensePerPersonTextView)
        billEditText = findViewById(R.id.billEditText)
 
addTipButton = findViewById(R.id.addTipButton)
        tipTextView = findViewById(R.id.tipTextView)
        subtractTipButton = findViewById(R.id.subtractTipButton)
 
addPeopleButton = findViewById(R.id.addPeopleButton)
        numberOfPeopleTextView = findViewById(R.id.numberOfPeopleTextView)
        subtractPeopleButton = findViewById(R.id.subtractPeopleButton)
 
//TODO #8: Bind Buttons to Listener
 
//TODO #16: Bind EditText to TextWatcher
 
}

ボタンの仕上げ

ボタンのクリックのサポートを追加するには、クラス レベルで View.OnClickListener を実装します (#7)。

class MainActivity: AppCompatActivity(), View.OnClickListener {

プロジェクトを今すぐコンパイルしても機能しません。さらにいくつかの手順 (# 8) を実行する必要があります。

override fun onClick(v: View?) {
        when (v?.id) {
            R.id.addTipButton -> incrementTip()
            R.id.subtractTipButton -> decrementTip()
            R.id.addPeopleButton -> incrementPeople()
            R.id.subtractPeopleButton -> decrementPeople()
        }
    }

ボタンとスイッチに関しては、Kotlin ではすべてが非常にクールに整理されています。 以下のコードをすべてのインクリメント関数とデクリメント関数に追加します。
(#9 –#12):

private fun incrementTip() {
        if (tipPercent != MAX_TIP) {
            tipPercent += TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
private fun decrementTip() {
        if (tipPercent != MIN_TIP) {
            tipPercent -= TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
private fun incrementPeople() {
        if (numberOfPeople != MAX_PEOPLE) {
            numberOfPeople += PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }
 
private fun decrementPeople() {
        if (numberOfPeople != MIN_PEOPLE) {
            numberOfPeople -= PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }

ここで、コードは最大値 (MAX_TIP および MAX_PEOPLE) を使用してインクリメント関数を保護します。 さらに、コードは最小値 (MIN_TIP および MIN_PEOPLE) を使用してデクリメント関数を保護します。

次に、initViews 関数でボタンをリスナーにバインドします (#13)。

private fun initViews() {
 
...
 
addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)
 
addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)
 
//TODO #15: Bind EditText to TextWatcher
}

合計ダメージ、チップ、会議参加者数を追加できるようになりました。 さて、ここで最も重要なことは…

コストセクション

このコードはコストを計算します (#14)。

private fun calculateExpense() {
 
val totalBill = billEditText.text.toString().toDouble()
 
val totalExpense = ((HUNDRED_PERCENT + tipPercent) / HUNDRED_PERCENT) * totalBill
        val individualExpense = totalExpense / numberOfPeople
 
expensePerPersonTextView.text = String.format("$%.2f", individualExpense)
 
}

さて、ここでは、社内の人数を考慮してチップを計算できるようにする関数が呼び出されています (#15)。

private fun incrementTip() {
 
…
 
}
 
private fun decrementTip() {
 
…
 
}
 
private fun incrementPeople() {
 
…
 
}
 
private fun decrementPeople() {
 
…
 
}

アプリケーションを起動します。 見た目も機能も素晴らしいです。 しかし、それはもっと良いかもしれません。

請求金額を削除してからヒントや友達の数を増やそうとすると、コストがゼロであるかどうかのチェックがまだ行われていないため、アプリがクラッシュします。 また、請求額を変更しようとしても料金は更新されません。

最終ステップ

TextWatcher を追加します (#16):

class MainActivity: AppCompatActivity()、View.OnClickListener、TextWatcher {

次に、 billEditText リスナー (#17) を埋め込みます。

billEditText.addTextChangedListener(this)

さらに、TextWatcher を実行するコードを追加します (#18)。

override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        if (!billEditText.text.isEmpty()) {
            calculateExpense()
        }
    }
override fun afterTextChanged(s: Editable?) {}

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

さて、これですべてがうまくいきました！ おめでとうございます。Kotlin で独自の「チップ計算ツール」を作成しました。

スキルボックスは次のことを推奨します。

• XNUMX年間の実践コース 「私はプロのウェブ開発者です」.
• オンラインコース 「C#開発者」.
• 実践一年コース 「0からPROまでのPHP開発者」.

出所： habr.com