Jak stworzyć kalkulator napiwków w Kotlinie: jak to działa?

Opowiadamy, jak stworzyć prostą aplikację do obliczania napiwków w języku Kotlin. Dokładniej mówiąc, Kotlin 1.3.21, Android 4, Android Studio 3. Artykuł będzie interesujący przede wszystkim dla tych, którzy zaczynają swoją przygodę z tworzeniem aplikacji na Androida. Pozwala zrozumieć, jak działa aplikacja wewnętrznie.

Taki kalkulator przyda się, gdy trzeba obliczyć sumę napiwków dla grupy, która postanowiła spędzić czas w restauracji lub kawiarni. Oczywiście, nie wszyscy zawsze zostawiają napiwki kelnerom, to bardziej zachodnia tradycja, ale proces tworzenia takiej aplikacji w każdym przypadku jest interesujący.

Przypominamy: dla wszystkich czytelników „Habra” — zniżka 10 000 rubli przy zapisie na dowolny kurs Skillbox z kodem promocyjnym „Habra”.

Skillbox poleca: Praktyczny kurs Mobilny programista PRO.

Tak wygląda aplikacja w trakcie działania:

Wprowadzasz pożądany procent od całkowitej kwoty, liczbę uczestników spotkania i otrzymujesz wynik — sumę napiwków, które warto zostawić.

Rozpoczynamy

Pełny interfejs aplikacji wygląda następująco:




Pierwsza czynność — załadowanie podstawy projektu. Otwieramy go w Android Studio 3.0 lub nowszej wersji. Kompilujemy i uruchamiamy projekt, widzimy biały ekran. Wszystko w porządku, tak ma być.

Czynności użytkownika są zapisane w projekcie w kolejności chronologicznej, aby wszystko było jasne. Aby je zobaczyć, otwieramy Widok -> Okna narzędzi -> TODO.

Przeglądamy projekt i otwieramy colors.xml, aby ocenić paletę kolorów. W strings.xml umieszczone są dane tekstowe (napisy), a w styles.xml znajdują się szablony czcionek.

Rozwój sekcji wydatków

Otwieramy activity_main.xml i dodajemy poniższy kod do LinearLayout (#1):

Teraz można dostosować styl katalogu values lub pobawić się kolorami, korzystając z narzędzia material.io.

Obecnie projekt wygląda tak:

Jak widać, obliczenie wydatków dokonywane jest na podstawie danych wprowadzonych przez użytkownika.

Rozwój sekcji rachunków

Dodajemy kod poniżej do LinearLayout po sekcji wydatków (#2):

<! — TODO #3: Zbuduj sekcję rachunku →
 
…

Zamykamy LinearLayout po liście TODOs, a następnie dodajemy nowy kod, umieszczając go w LinearLayout (#3):

Ponieważ głównym zadaniem aplikacji jest obliczanie indywidualnych kosztów dla każdego uczestnika spotkania w restauracji, kluczowe znaczenie ma costPerPersonTextView.

EditText ogranicza wprowadzanie danych do jednej linii, a ten parametr powinien mieć wartość NumberDecimal jako inputType.

Uruchamiamy projekt do testów i wprowadzamy parametry całkowych strat (stłuczone filiżanki, talerze itp.)

Rozwój sekcji „Ludzie i napiwki”

Aby dodać opcję wyboru wysokości napiwków, wstawiamy poniższy kod w nową sekcję LinearLayout (#4):

Ten fragment kodu jest niezbędny do precyzyjnego obliczenia kwoty napiwków. Domyślna wartość tekstu to 20. ImageButtons mają przypisane ikony w folderze z prawami zapisu.

Całkowicie kopiujemy sekcję i dodajemy następujące (#5):

• Identyfikatory ImageButton (subtractPeopleButton, addPeopleButton)
• Identyfikatory TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText dla numberOfPeopleTextView (powinien być 4).

Teraz przy uruchomieniu aplikacji istnieje możliwość dodania kwoty rachunku, a także działają przyciski „Dodaj/Wyjmij”, ale na razie nic się nie dzieje.

Dodajemy Views

Otwieramy MainActivity.kt i dodajemy to do funkcji 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
 
}

Kończymy przyciski

Aby dodać obsługę kliknięcia przycisków, implementujemy View.OnClickListener na poziomie klasy (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Nie uda się teraz skompilować projektu, trzeba wykonać jeszcze kilka czynności (#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()
        }
    }

W przypadku przycisków i przełączników Kotlin jest doskonale zorganizowany! Dodaj poniższy kod do wszystkich funkcji increment i decrement
(#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()
        }
    }

Tutaj kod zabezpiecza funkcje przyrostu na maksymalnych wartościach (MAX_TIP & MAX_PEOPLE). Ponadto, kod zabezpiecza funkcje dekrementu na minimalnych wartościach (MIN_TIP & MIN_PEOPLE).

Teraz łączymy przyciski z nasłuchiwaczami w funkcji initViews (#13):

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

Teraz można dodawać całkowite wydatki, napiwki i liczbę uczestników spotkania. A teraz najważniejsze…

Sekcja obliczania wydatków

Ten kod oblicza wydatki (#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)
 
}

A tutaj wywoływana jest funkcja, która pozwala uwzględnić liczbę osób w firmie i obliczyć napiwki (#15):

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

Uruchamiamy aplikację. Wygląda i działa świetnie. Może być jednak lepiej.

Jeśli spróbujesz usunąć kwotę rachunku, a następnie zwiększyć liczbę wskazówek lub znajomych, aplikacja ulegnie awarii, ponieważ brak jest jeszcze weryfikacji dla zerowej wartości kosztów. Co więcej, jeśli spróbujesz zmienić kwotę rachunku, wydatki nie zostaną zaktualizowane.

Ostatnie kroki

Dodajemy TextWatcher (#16):

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

Następnie wstawiamy nasłuchiwacz billEditText (#17):

billEditText.addTextChangedListener(this)

Dodatkowo dodajemy kod do wykonania 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) {}

A teraz wszystko działa idealnie! Gratulacje, napisałeś własny "Kalkulator napiwków" w Kotlinie.

Skillbox poleca:

• Dwuletni praktyczny kurs „Jestem programistą internetowym PRO”.
• Kurs online „Programista C#”.
• Praktyczny roczny kurs «PHP programista od 0 do PRO».

Źródło: habr.com