Erstellung eines Trinkgeldrechners in Kotlin: Wie funktioniert das?

Wir erzählen, wie man eine einfache Anwendung zur Berechnung von Trinkgeldern in Kotlin erstellt. Genauer gesagt, Kotlin 1.3.21, Android 4, Android Studio 3. Der Artikel wird in erster Linie für diejenigen interessant sein, die ihren Weg in die Entwicklung von Android-Anwendungen beginnen. Er hilft zu verstehen, was und wie innerhalb der Anwendung funktioniert.

Ein solcher Rechner ist nützlich, wenn man die Trinkgeldsumme für eine Gesellschaft berechnen muss, die beschlossen hat, Zeit in einem Restaurant oder Café zu verbringen. Natürlich lassen nicht alle und nicht immer Trinkgeld, das ist eher eine westliche Tradition, aber der Prozess der Entwicklung einer solchen Anwendung ist auf jeden Fall interessant.

Wir erinnern daran: alle Leser von „Habr“ erhalten einen Rabatt von 10.000 Rubel bei der Anmeldung zu einem beliebigen Kurs von Skillbox mit dem Aktionscode „Habr“.

Skillbox empfiehlt: Praktischer Kurs „Mobiler Entwickler PRO.

So sieht die Anwendung während des Betriebs aus:

Sie geben den gewünschten Prozentsatz von der Gesamtsumme, die Anzahl der Teilnehmer am Treffen ein und erhalten das Ergebnis – die Trinkgeldsumme, die man lassen sollte.

Starten wir

Die vollständige Benutzeroberfläche der Anwendung sieht wie folgt aus:




Erster Schritt — Laden der Projektgrundlage. Öffnen Sie es in Android Studio 3.0 oder einer neueren Version. Bauen Sie das Projekt und starten Sie es, und sehen Sie einen weißen Bildschirm. Alles in Ordnung, das sollte so sein.

Die Benutzeraktionen sind im Projekt in chronologischer Reihenfolge festgelegt, damit alles verständlich ist. Um sie anzuzeigen, öffnen Sie Ansicht -> Werkzeugfenster -> TODO.

Wir untersuchen das Projekt und öffnen colors.xml zur Bewertung der Farbpalette. In strings.xml befinden sich die Textdaten (Beschriftungen), und in styles.xml gibt es einige Schriftvorlagen.

Entwicklung des Kostenabschnitts

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

Jetzt können Sie den Stil des Verzeichnisses values anpassen oder mit Farben spielen, indem Sie das tool material.io verwenden.

Jetzt sieht das Projekt so aus:

Wie Sie sehen können, werden die Kosten anhand der Daten berechnet, die der Benutzer eingibt.

Entwicklung des Rechnungsabschnitts

Fügen Sie den untenstehenden Code in LinearLayout nach dem Kostenabschnitt (#2) hinzu:

<! — TODO #3: Rechnungsabschnitt erstellen →
 
…

Wir schließen das LinearLayout nach der TODO-Liste und fügen dann neuen Code hinzu, indem wir ihn innerhalb des LinearLayout (#3) platzieren:

Da die Hauptaufgabe der Anwendung darin besteht, die individuellen Ausgaben für jeden der Teilnehmer im Restaurant zu berechnen, spielt costPerPersonTextView eine entscheidende Rolle.

EditText beschränkt die Eingabe auf eine Zeile, dieser Parameter sollte den Wert NumberDecimal inputType haben.

Wir starten das Projekt zu Testzwecken und geben die Parameter des Gesamtschadens ein (z.B. zerbrochene Tassen, Teller usw.)

Entwicklung des Abschnitts „Personen und Trinkgeld“

Um die Auswahl der Trinkgeldhöhe hinzuzufügen, fügen wir den folgenden Code in den neuen Abschnitt LinearLayout (#4) ein:

Dieser Codeabschnitt ist notwendig für die genaue Berechnung des Trinkgeldbetrags. Der Standardwert des Textes beträgt 20. Die ImageButtons sind mit Icons im schreibgeschützten Ordner ausgestattet.

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

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

Jetzt gibt es beim Start der Anwendung die Möglichkeit, den Rechnungsbetrag hinzuzufügen, die Tasten „Hinzufügen/Verringer“ funktionieren auch, aber es passiert noch nichts.

Wir fügen Views hinzu

Öffnen Sie MainActivity.kt und fügen Sie Folgendes in die Funktion initViews (#6) ein:

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: Binde die Buttons an den Listener
 
//TODO #16: Binde EditText an TextWatcher
 
}

Wir vervollständigen die Buttons

Um die Klickunterstützung für die Buttons hinzuzufügen, implementieren wir View.OnClickListener auf Klassenebene (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Das Projekt kann jetzt nicht kompiliert werden, da wir noch einige Schritte ausführen müssen (#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 Buttons und Schalter ist Kotlin wirklich großartig organisiert! Fügen Sie den unten stehenden Code in alle Funktionen zum Inkrementieren und Dekrementieren ein
(#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()
        }
    }

Hier schützt der Code die Inkrementierungsfunktionen mit maximalen Werten (MAX_TIP & MAX_PEOPLE). Darüber hinaus schützt der Code die Dekrementierungsfunktionen mit minimalen Werten (MIN_TIP & MIN_PEOPLE).

Jetzt binden wir die Buttons an die Listener in der Funktion initViews (#13):

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

Jetzt können wir die Gesamtausgaben, Trinkgelder und die Anzahl der Teilnehmer an der Besprechung hinzufügen. Und jetzt das Wichtigste …

Bereich zur Kostenaufstellung

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

Hier wird eine Funktion aufgerufen, die es ermöglicht, die Anzahl der Personen in der Gruppe zu berücksichtigen und das Trinkgeld zu berechnen (#15):

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

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

Wenn Sie versuchen, den Betrag der Rechnung zu löschen und dann die Anzahl der Tipps oder Freunde zu erhöhen, wird die Anwendung abstürzen, da es noch keine Überprüfung auf den Nullwert der Ausgaben gibt. Darüber hinaus werden die Ausgaben nicht aktualisiert, wenn Sie versuchen, den Betrag der Rechnung zu ändern.

Letzte Schritte

Wir fügen einen TextWatcher hinzu (#16):

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

Dann integrieren wir den Listener billEditText (#17):

billEditText.addTextChangedListener(this)

Außerdem fügen wir den Code für die Ausführung des TextWatchers hinzu (#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) {}

Nun funktioniert alles einwandfrei! Glückwunsch, Sie haben Ihren eigenen „Tip Rechner“ in Kotlin geschrieben.

Skillbox empfiehlt:

• Zweijähriger praktischer Kurs „Ich bin Webentwickler PRO“.
• Online-Kurs „C#-Entwickler“.
• Praktischer Jahreskurs „PHP-Entwickler von 0 bis PRO“.

Quelle: habr.com