Pokazujemy, jak stworzyć prostą aplikację do obliczania napiwków w Kotlinie. A dokładniej Kotlin 1.3.21, Android 4, Android Studio 3. Artykuł zainteresuje przede wszystkim tych, którzy zaczynają swoją przygodę z tworzeniem aplikacji na Androida. Pozwala zrozumieć, co i jak działa wewnątrz aplikacji.
Taki kalkulator przydaje się, gdy trzeba obliczyć ilość napiwków od firmy, która decyduje się na spędzenie czasu w restauracji lub kawiarni. Oczywiście nie wszyscy i nie zawsze zostawiają herbatę dla kelnerów, jest to bardziej zachodnia tradycja, ale proces tworzenia takiej aplikacji jest i tak interesujący.
Przypomnienie: dla wszystkich czytelników „Habr” - rabat w wysokości 10 000 rubli przy zapisywaniu się na dowolny kurs Skillbox przy użyciu kodu promocyjnego „Habr”.
Skillbox poleca: Kurs praktyczny .
Oto jak wygląda uruchomiona aplikacja:
Wpisujesz żądany procent całkowitej kwoty, liczbę uczestników spotkania i otrzymujesz wynik - ilość napiwków, które należy zostawić.
Pierwsze kroki
Pełny interfejs aplikacji wygląda następująco:
Pierwsza akcja - . Otwórz go w Android Studio 3.0 lub nowszym. Budujemy i uruchamiamy projekt i widzimy biały ekran. Wszystko jest w porządku, tak jak być powinno.
Działania użytkownika są zapisywane w projekcie w porządku chronologicznym, dzięki czemu wszystko jest jasne. Aby go wyświetlić, otwórz Widok -> Okna narzędzi -> TODO.
Studiujemy projekt i otwieramy colors.xml, aby ocenić paletę kolorów. strings.xml zawiera dane tekstowe (podpisy), a styles.xml zawiera kilka szablonów czcionek.
Rozwój Sekcji Kosztów
Otwórz plik activity_main.xml i dodaj poniższy kod do LinearLayout (#1):
<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"/>Teraz możesz stylizować katalog wartości lub bawić się kolorami za pomocą .
Teraz projekt wygląda tak:
Jak widać kalkulacja kosztów odbywa się na podstawie danych wprowadzonych przez użytkownika.
Rozwój sekcji konta
Dodaj poniższy kod do LinearLayout po sekcji wydatków (#2):
<LinearLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_orientation="vertical"
android_background="@color/colorAccent">
<! — TODO #3: Build Bill Section →
…
</LinearLayout>Zamknij LinearLayout po liście TODO, a następnie dodaj nowy kod, umieszczając go wewnątrz 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"/>Ponieważ głównym zadaniem aplikacji jest kalkulacja indywidualnych kosztów dla każdego z uczestników spotkań w restauracji, główną rolę odgrywa costPerPersonTextView.
EditText ogranicza wprowadzanie do jednego wiersza, ten parametr musi być ustawiony na NumberDecimal inputType.
Uruchamiamy projekt do testu i wpisujemy parametry uszkodzeń całkowitych (stłuczone kubki, talerze itp.)
Rozwój działu „Ludzie i porady”.
Aby dodać selektor kwoty napiwku, wklej poniższy kod do nowej sekcji LinearLayout (#4):
<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>Ten fragment kodu jest wymagany do dokładnego obliczenia kwoty napiwku. Domyślna wartość tekstu to 20. ImageButtons są dostarczane z ikonami w folderze z uprawnieniami do zapisu.
Skopiuj całą sekcję i dodaj następujące (#5):
- Identyfikatory ImageButton (odejmowaniePeopleButton, addPeopleButton)
- Identyfikatory TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText dla numberOfPeopleTextView (powinno być 4).
Teraz przy uruchamianiu aplikacji jest możliwość dodania kwoty faktury, przyciski Dodaj/Odejmuj też działają, ale póki co nic się nie dzieje.
Dodaj widoki
Otwórz MainActivity.kt i dodaj 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
}Wykańczanie guzików
Aby dodać obsługę kliknięć przycisków, zaimplementuj View.OnClickListener na poziomie klasy (#7):
klasa MainActivity: AppCompatActivity(), View.OnClickListener {
Skompilowanie projektu w tej chwili nie zadziała, musisz wykonać jeszcze kilka kroków (# 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()
}
}
Jeśli chodzi o przyciski i przełączniki, Kotlin ma wszystko zorganizowane bardzo fajnie! Dodaj poniższy kod do wszystkich funkcji zwiększania i zmniejszania
(#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 chroni funkcje inkrementacyjne o wartościach maksymalnych (MAX_TIP & MAX_PEOPLE). Dodatkowo kod chroni funkcje dekrementacji o wartościach minimalnych (MIN_TIP & MIN_PEOPLE).
Teraz łączymy przyciski ze słuchaczami 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
}
Możesz teraz dodać całkowite obrażenia, wskazówki i liczbę uczestników spotkania. No to teraz najważniejsze...
Sekcja kosztów
Ten kod oblicza koszty (#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)
}Otóż tutaj wywoływana jest funkcja pozwalająca na uwzględnienie liczby osób w firmie i obliczenie napiwku (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Uruchamiamy aplikację. Wygląda i działa świetnie. Ale mogłoby być lepiej.
Jeśli spróbujesz usunąć kwotę rachunku, a następnie zwiększysz liczbę wskazówek lub znajomych, aplikacja ulegnie awarii, ponieważ nie ma jeszcze czeku na zerowe koszty. Ponadto, jeśli spróbujesz zmienić kwotę faktury, opłaty nie zostaną zaktualizowane.
Ostatnie kroki
Dodaj TextWatchera (#16):
klasa MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Następnie osadzamy detektor billEditText (#17):
billEditText.addTextChangedListener(to)
Plus dodaj kod, aby wykonać 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) {}
Cóż, teraz wszystko działa! Gratulacje, napisałeś swój własny "Kalkulator napiwków" w Kotlinie.
Skillbox poleca:
- Dwuletni kurs praktyczny .
- Kurs online .
- Praktyczny roczny kurs .
Źródło: www.habr.com