Erstellung eines Trinkgeldrechners in Kotlin: wie funktioniert das?

Wir zeigen Ihnen, wie Sie eine einfache Anwendung zur Berechnung von Trinkgeldern in Kotlin erstellen. Genauer gesagt, verwenden wir Kotlin 1.3.21, Android 4 und Android Studio 3. Dieser Artikel richtet sich in erster Linie an diejenigen, die ihre Reise in die Entwicklung von Android-Anwendungen beginnen. Er hilft zu verstehen, wie und was innerhalb der Anwendung funktioniert.

Ein solcher Rechner ist nützlich, um den Trinkgeldbetrag für eine Gruppe zu berechnen, die beschließt, Zeit in einem Restaurant oder Café zu verbringen. Natürlich hinterlassen nicht alle und nicht immer Trinkgeld, das ist eher eine westliche Tradition, aber der Entwicklungsprozess 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 «Mobile Entwickler PRO.

So sieht die Anwendung während der Nutzung aus:

Sie geben den gewünschten Prozentsatz des Gesamtbetrags und die Anzahl der Teilnehmer an und erhalten das Ergebnis – die Summe des Trinkgelds, die Sie hinterlassen sollten.

Starten

Die vollständige Benutzeroberfläche der Anwendung sieht folgendermaßen aus:




Der erste Schritt ist — Das Grundgerüst des Projekts laden.Öffnen Sie es in Android Studio 3.0 oder einer neueren Version. Bauen und starten Sie das Projekt, und Sie sehen einen weißen Bildschirm. Das ist in Ordnung, so sollte es sein.

Die Benutzeraktionen werden im Projekt chronologisch erfasst, um alles klar verständlich zu machen. Um sie einzusehen, gehen Sie zu Ansicht -> Tool-Fenster -> TODO.

Untersuchen Sie das Projekt und öffnen Sie die colors.xml zur Bewertung der Farbpalette. In der strings.xml befinden sich die Textdaten (Beschriftungen), und in der styles.xml sind einige Schriftvorlagen enthalten.

Entwicklung des Kostenbereichs

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

Jetzt können Sie den Stil des Verzeichnisses values anpassen oder mit Farben spielen und die Material.io-Tools verwenden..

Momentan sieht das Projekt so aus:

Wie Sie sehen können, werden die Kosten basierend auf den von den Benutzern eingegebenen Daten berechnet.

Entwicklung des Rechnungsbereichs

Fügen Sie den untenstehenden Code nach dem Abschnitt „Kosten“ (#2) in den LinearLayout ein:

<! — TODO #3: Abschnitt zur Rechnung erstellen →
 
…

Schließen Sie LinearLayout nach der TODO-Liste und fügen Sie dann neuen Code hinzu, indem Sie ihn innerhalb von LinearLayout (#3) platzieren:

Da die Hauptaufgabe der Anwendung darin besteht, die individuellen Kosten für jede Person bei Restaurantbesuchen zu berechnen, ist die Textansicht costPerPersonTextView von zentraler Bedeutung.

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

Starten Sie das Projekt zum Testen und geben Sie die Parameter des Gesamtschadens (zerbrochene Tassen, Teller usw.) ein.

Entwicklung des Abschnitts ‚Personen und Trinkgelder‘.

Um die Auswahl des Trinkgeldbetrags hinzuzufügen, fügen Sie den nachstehenden Code in den neuen Abschnitt LinearLayout (#4) ein:

Dieser Codeabschnitt ist notwendig, um den Betrag des Trinkgeldes genau zu berechnen. Der Standardwert des Textes beträgt 20. Die ImageButtons sind mit Icons aus dem beschreibbaren Ordner versehen.

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

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

Nach dem Starten der Anwendung besteht jetzt die Möglichkeit, den Rechnungsbetrag hinzuzufügen; die Tasten 'Hinzufügen/Abziehen' funktionieren zwar, aber es passiert noch nichts.

Fügen wir Views hinzu

Öffnen Sie MainActivity.kt und fügen Sie Folgendes in die Funktion initViews ein (#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: Weisen Sie Buttons einen Listener zu

        //TODO #16: Weisen Sie EditText einen TextWatcher zu

}

Vervollständigen wir die Buttons

Um die Unterstützung für Button-Klicks hinzuzufügen, implementieren wir View.OnClickListener auf Klassenebene (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Das Projekt kann momentan nicht kompiliert werden, es sind noch einige Schritte erforderlich (#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 Switches ist Kotlin wirklich großartig organisiert! Fügen Sie den untenstehenden Code in alle Funktionen increment und decrement 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()
        }
    }

Dieser Code schützt die Erhöhungsfunktionen mit maximalen Werten (MAX_TIP & MAX_PEOPLE). Außerdem sichert der Code die Dekrementfunktionen mit minimalen Werten (MIN_TIP & MIN_PEOPLE).

Jetzt verknüpfen wir die Knöpfe mit den Listenern in der Funktion initViews (#13):

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

Nun können wir die Gesamtkosten, Trinkgelder und die Anzahl der Teilnehmer zum Treffen hinzufügen. Und jetzt das Wichtigste …

Bereich zur Kostenberechnung

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

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

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

Wir starten die Anwendung. Sie sieht gut aus und funktioniert einwandfrei. Aber es gibt Raum für Verbesserungen.

Wenn Sie versuchen, den Rechnungsbetrag 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 für null Kosten gibt. Darüber hinaus werden die Kosten nicht aktualisiert, wenn Sie versuchen, den Rechnungsbetrag zu ändern.

Letzte Schritte

Fügen wir einen TextWatcher hinzu (#16):

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

Dann integrieren wir den Listener für billEditText (#17):

billEditText.addTextChangedListener(this)

Zusätzlich fügen wir den Code für die Ausführung von TextWatcher 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) {}

Jetzt funktioniert alles einwandfrei! Herzlichen Glückwunsch, Sie haben Ihren eigenen "Trinkgeldrechner" in Kotlin geschrieben.

Skillbox empfiehlt:

• Zweijähriger praktischer Kurs "Ich bin PRO Web-Entwickler".
• Online-Kurs "C#-Entwickler".
• Praktischer Jahreskurs PHP-Entwickler – von 0 zu PRO.

Quelle: habr.com