Trinkgeldrechner auf Kotlin erstellen: Wie geht das?

Ursprünglicher Autor: Lawrence Tan
  • Übersetzung

Wir zeigen Ihnen, wie Sie eine einfache Kotlin-Spitzenrechner-Anwendung erstellen. Insbesondere Kotlin 1.3.21, Android 4, Android Studio 3. Der Artikel wird vor allem für diejenigen interessant sein, die ihre Reise in die Entwicklung von Android-Anwendungen antreten. Damit können Sie verstehen, was und wie es in der Anwendung funktioniert.

Ein solcher Taschenrechner ist nützlich, wenn Sie die Anzahl der Trinkgelder eines Unternehmens berechnen müssen, das sich für ein Restaurant oder ein Café entschieden hat. Natürlich nicht alle und nicht immer den Kellnern zum Tee überlassen, dies ist eher eine westliche Tradition, aber der Entwicklungsprozess einer solchen Anwendung ist auf jeden Fall interessant.

Wir erinnern Sie daran: für alle Leser von "Habr" - einen Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code "Habr".

Skillbox empfiehlt: Praktikum „Mobile Developer PRO .
So sieht die Bewerbung während des Arbeitsprozesses aus:



Sie geben den gewünschten Prozentsatz des Gesamtbetrags und die Anzahl der Teilnehmer an der Besprechung ein und erhalten das Ergebnis - die Anzahl der verbleibenden Tipps.

Erste Schritte


Die vollständige Anwendungsoberfläche sieht wie folgt aus:





Die erste Aktion ist das Herunterladen der Projektgrundlagen . Öffnen Sie es in Android Studio 3.0 oder höher. Wir bauen und starten das Projekt und sehen einen weißen Bildschirm. Alles ist gut, es sollte so sein.





Benutzeraktionen werden im Projekt in chronologischer Reihenfolge aufgeführt, damit alles klar ist. Um es anzuzeigen, öffnen Sie Ansicht -> Tool Windows -> TODO.

Wir untersuchen das Projekt und öffnen colors.xml, um die Farbpalette auszuwerten. Textdaten (Signaturen) werden in der Datei strings.xml abgelegt, und die Datei styles.xml enthält mehrere Schriftmuster.

Kostenabschnittsentwicklung


Öffnen Sie activity_main.xml und fügen Sie den folgenden Code in LinearLayout (# 1) ein:



Jetzt können Sie den Stil des Werteverzeichnisses anpassen oder mit dem material.io-Tool mit Farben spielen .

Das Projekt sieht nun folgendermaßen aus :


Wie Sie sehen können, ist die Kostenberechnung basiert auf Daten , dass der Benutzer macht.

Entwicklung des Kontobereichs


Fügen Sie den folgenden Code in LinearLayout nach dem Ausgabenabschnitt (Nr. 2) ein:



Schließen Sie LinearLayout nach der Liste der Aufgaben, und fügen Sie dann einen neuen Code hinzu, indem Sie ihn in LinearLayout (# 3) einfügen:



Da die Hauptaufgabe der Anwendung die Berechnung der individuellen Kosten für jeden der Teilnehmer von Versammlungen im Restaurant ist, wird der Hauptwert von costPerPersonTextView gespielt.

EditText beschränkt die Eingabe auf eine Zeile, dieser Parameter muss einen NumberDecimal-Wert für inputType haben.


Wir starten das Projekt für den Test und geben die Parameter des Gesamtschadens ein (zerbrochene Tassen, Teller usw.)

Entwicklung der Rubrik "Menschen und Tipps"


Geben Sie den folgenden Code in den neuen Abschnitt "LinearLayout" ein (Nr. 4), um die Auswahl für das Spitzenvolumen zu erweitern:







Dieser Codeabschnitt ist für die genaue Berechnung der Trinkgeldmenge erforderlich. Der Standardwert für den Text ist 20. ImageButtons werden mit Symbolen im Ordner mit Schreibberechtigungen versehen.

Wir kopieren den Abschnitt vollständig und fügen Folgendes hinzu (# 5):

  • ImageButton-IDs (subtractPeopleButton, addPeopleButton)
  • TextView-IDs (numberOfPeopleStaticText, numberOfPeopleTextView)
  • DefaultText für numberOfPeopleTextView (muss 4 sein).



Wenn Sie nun die Anwendung starten, ist es möglich, den Rechnungsbetrag hinzuzufügen, die Schaltflächen "Hinzufügen / Entfernen" funktionieren ebenfalls, aber bisher ist nichts passiert.

Ansichten hinzufügen


Öffnen Sie MainActivity.kt und fügen Sie dies der Funktion initViews (# 6) hinzu:

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
}

Beenden Sie die Schaltflächen


Um Unterstützung für das Klicken auf Schaltflächen hinzuzufügen, implementieren wir den View.OnClickListener (# 7) auf Klassenebene:

class MainActivity : AppCompatActivity(), View.OnClickListener {

Das Kompilieren des Projekts wird jetzt nicht funktionieren, Sie müssen noch ein paar Schritte ausführen (# 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()
        }
    }

In Bezug auf die Tasten und Schalter in Kotlin alle sehr kühlen organisiert! Fügen Sie den folgenden Code zu allen Inkrement- und Dekrementfunktionen

(Nr. 9 - Nr. 12) hinzu:

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

Hier schützt der Code die Inkrementfunktionen mit den Maximalwerten (MAX_TIP & MAX_PEOPLE). Darüber hinaus schützt der Code Dekrementierungsfunktionen mit Mindestwerten (MIN_TIP & MIN_PEOPLE).

Binden Sie nun die Buttons an die Listener in der initViews-Funktion (# 13):

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



Jetzt können Sie den Gesamtschaden, Tipps und die Anzahl der Teilnehmer an der Besprechung hinzufügen. Nun, jetzt das Wichtigste ...

Costing Section


Dieser Code berechnet die Kosten (# 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)
}

Nun, hier wird eine Funktion aufgerufen, die es ermöglicht, die Anzahl der Personen in der Firma zu berücksichtigen und den Tipp zu berechnen (# 15):

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

Wir starten die Anwendung. Es sieht gut aus und funktioniert gut. Aber es könnte besser sein.

Wenn Sie versuchen , die Menge der Rechnung zu entfernen, und dann die Anzahl der Tipps oder Freunde zu erhöhen, wird die Anwendung fällt noch Test für den Nullkostenwert. Wenn Sie versuchen, den Rechnungsbetrag zu ändern, werden die Kosten nicht aktualisiert.

Letzte Schritte


TextWatcher hinzufügen (# 16):

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

Dann binden wir den billEditText-Listener (# 17) ein:

billEditText.addTextChangedListener(this)

Fügen Sie außerdem den Code zum Ausführen von TextWatcher (# 18) hinzu:

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



Nun, jetzt funktioniert absolut alles! Herzlichen Glückwunsch, Sie haben auf Kotlin Ihren eigenen Trinkgeldrechner geschrieben.


Skillbox empfiehlt:


Jetzt auch beliebt: