Wir zeigen Ihnen, wie Sie in Kotlin eine einfache Trinkgeldberechnungsanwendung erstellen. Genauer gesagt: 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 beginnen. Dadurch können Sie verstehen, was und wie in der Anwendung funktioniert.
Ein solcher Rechner ist nützlich, wenn Sie die Menge an Trinkgeldern berechnen müssen, die ein Unternehmen erhält, das Zeit in einem Restaurant oder Café verbringt. Natürlich überlässt nicht jeder und nicht immer den Tee den Kellnern, das ist eher eine westliche Tradition, aber der Prozess der Entwicklung einer solchen Anwendung ist auf jeden Fall interessant.
Erinnerung: für alle Leser von „Habr“ – ein Rabatt von 10 Rubel bei der Anmeldung zu einem beliebigen Skillbox-Kurs mit dem Aktionscode „Habr“.
Skillbox empfiehlt: Praktischer Kurs .
So sieht die App aus, wenn sie ausgeführt wird:
Sie geben den gewünschten Prozentsatz des Gesamtbetrags, die Anzahl der Teilnehmer des Meetings ein und erhalten das Ergebnis – die Menge an Trinkgeld, die übrig bleiben soll.
Erste Schritte
Die vollständige Benutzeroberfläche der App sieht folgendermaßen aus:
Erste Aktion - . Öffnen Sie es in Android Studio 3.0 oder höher. Wir erstellen und führen das Projekt aus und sehen einen weißen Bildschirm. Alles ist in Ordnung, so wie es sein sollte.
Benutzeraktionen werden im Projekt in chronologischer Reihenfolge geschrieben, sodass alles übersichtlich ist. Um es anzuzeigen, öffnen Sie Ansicht -> Werkzeugfenster -> TODO.
Wir studieren das Projekt und öffnen Colors.xml, um die Farbpalette auszuwerten. strings.xml enthält Textdaten (Untertitel) und Styles.xml enthält mehrere Schriftartvorlagen.
Entwicklung des Kostenbereichs
Öffnen Sie „activity_main.xml“ und fügen Sie den folgenden Code zum LinearLayout (#1) hinzu:
<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"/>Jetzt können Sie das Werteverzeichnis formatieren oder mit Farben spielen .
Nun sieht das Projekt so aus:
Wie Sie sehen, basiert die Kostenberechnung auf den vom Benutzer eingegebenen Daten.
Entwicklung des Kontobereichs
Fügen Sie den folgenden Code zum LinearLayout nach dem Abschnitt „Ausgaben“ (Nr. 2) hinzu:
<LinearLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_orientation="vertical"
android_background="@color/colorAccent">
<! — TODO #3: Build Bill Section →
…
</LinearLayout>Schließen Sie das LinearLayout nach der TODOs-Liste, fügen Sie dann den neuen Code hinzu und platzieren Sie ihn im 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"/>Da die Hauptaufgabe der Anwendung darin besteht, die individuellen Kosten für jeden Teilnehmer an den Zusammenkünften im Restaurant zu berechnen, spielt die costPerPersonTextView die Hauptrolle.
EditText begrenzt die Eingabe auf eine Zeile. Dieser Parameter muss auf NumberDecimal inputType gesetzt werden.
Wir starten das Projekt für den Test und geben die Parameter des Gesamtschadens ein (kaputte Tassen, Teller etc.)
Entwicklung der Rubrik „Menschen und Tipps“.
Um einen Trinkgeldbetrag-Selektor hinzuzufügen, fügen Sie den folgenden Code in einen neuen LinearLayout-Abschnitt (#4) ein:
<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>Dieser Code ist erforderlich, um den Trinkgeldbetrag genau zu berechnen. Der Standardtextwert ist 20. ImageButtons werden mit Symbolen in einem Ordner mit Schreibrechten bereitgestellt.
Kopieren Sie den gesamten Abschnitt und fügen Sie Folgendes hinzu (#5):
- ImageButton-IDs (subtractPeopleButton, addPeopleButton)
- TextView-IDs (numberOfPeopleStaticText, numberOfPeopleTextView)
- Standardtext für numberOfPeopleTextView (sollte 4 sein).
Nun ist es beim Starten der Anwendung möglich, den Rechnungsbetrag zu addieren, die Schaltflächen Addieren/Subtrahieren funktionieren auch, aber bisher passiert nichts.
Ansichten hinzufügen
Öffnen Sie MainActivity.kt und fügen Sie dies der initViews-Funktion hinzu (#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
}Fertigstellung der Knöpfe
Um Unterstützung für Schaltflächenklicks hinzuzufügen, implementieren Sie View.OnClickListener auf Klassenebene (#7):
Klasse 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()
}
}
Was Knöpfe und Schalter angeht, hat Kotlin alles sehr cool organisiert! Fügen Sie den folgenden Code zu allen Inkrementierungs- und Dekrementierungsfunktionen hinzu
(#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 Inkrementfunktionen mit Maximalwerten (MAX_TIP & MAX_PEOPLE). Darüber hinaus schützt der Code Dekrementierungsfunktionen mit Mindestwerten (MIN_TIP & MIN_PEOPLE).
Jetzt binden wir die Schaltflächen 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
}
Sie können nun den Gesamtschaden, Trinkgelder und die Anzahl der Besprechungsteilnehmer hinzufügen. Nun, das Wichtigste...
Abschnitt „Kosten“.
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 im Unternehmen 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. Es sieht großartig aus und funktioniert großartig. Aber es könnte besser sein.
Wenn Sie versuchen, den Rechnungsbetrag zu entfernen und dann die Anzahl der Hinweise oder Freunde zu erhöhen, stürzt die App ab, da noch keine Prüfung auf Nullkosten erfolgt. Wenn Sie außerdem versuchen, den Rechnungsbetrag zu ändern, werden die Gebühren nicht aktualisiert.
Letzte Schritte
TextWatcher hinzufügen (#16):
Klasse MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Dann betten wir den billEditText-Listener ein (#17):
billEditText.addTextChangedListener(this)
Fügen Sie außerdem Code hinzu, um TextWatcher auszuführen (#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) {}
So, jetzt funktioniert alles! Herzlichen Glückwunsch, Sie haben Ihren eigenen „Trinkgeldrechner“ in Kotlin geschrieben.
Skillbox empfiehlt:
- Zweijähriges Praktikum .
- Online Kurs .
- Praktisches Jahr .
Source: habr.com