🥇在 Kotlin 中創建小費計算器：它是如何工作的？

我們向您展示如何在 Kotlin 中創建簡單的小費計算應用程序。更準確地說，是 Kotlin 1.3.21、Android 4、Android Studio 3。首先，對於那些開始開發 Android 應用程序的人來說，這篇文章會很有趣。它可以讓您了解應用程序內部的內容和工作原理。

當您需要計算決定在餐廳或咖啡館消磨時間的公司的小費金額時，這樣的計算器非常有用。當然，並不是每個人，也不總是給服務員留茶，這更多的是西方的傳統，但無論如何，開發這樣一個應用程序的過程很有趣。

提醒： 對於“Habr”的所有讀者 - 使用“Habr”促銷代碼註冊任何 Skillbox 課程可享受 10 盧布的折扣。

技能箱推薦： 實踐課程 “移動開發者專業版.

該應用程序運行時的外觀如下：

您輸入所需的總金額百分比、會議參與者人數，然後得到結果 - 應該留下的小費金額。

入門

該應用程序的完整界面如下所示：

第一個動作—— 項目庫下載。在 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"/>

現在您可以使用以下命令設置值目錄的樣式或使用顏色 Material.io 工具.

現在該項目如下所示：

正如您所看到的，成本計算是基於用戶輸入的數據。

賬戶部分的開發

將以下代碼添加到 LinearLayout 的費用部分 (#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 限制輸入一行，該參數必須設置為 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。ImageButtons 是在具有寫入權限的文件夾中提供的圖標。

複製整個部分並添加以下內容 (#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)：

類 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() {
 
…
 
}

我們啟動該應用程序。它看起來和工作都很棒。但它可能會更好。

如果您嘗試刪除賬單金額，然後增加提示或朋友的數量，應用程序將崩潰，因為尚未檢查零成本。此外，如果您嘗試更改發票金額，費用將不會更新。

最後步驟

添加文本觀察器（#16）：

類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 編寫了自己的“小費計算器”。

技能箱推薦：

兩年實踐課程 “我是一名專業網絡開發人員”.

在線課程《C# 開發人員》.

實踐年課程《PHP 開發者從 0 到 PRO》.

來源： www.habr.com

用 Kotlin 構建小費計算器：它是如何工作的？

入門

成本部分開發

賬戶部分的開發

開發“人員和提示”部分

添加視圖

完成按鈕

成本部分

最後步驟

添加評論取消回复

用 Kotlin 構建小費計算器：它是如何工作的？

入門

成本部分開發

賬戶部分的開發

開發“人員和提示”部分

添加視圖

完成按鈕

成本部分

最後步驟

添加評論 取消回复

添加評論取消回复