Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Mēs parādīsim, kā izveidot vienkāršu padomu aprēķināšanas lietojumprogrammu Kotlinā. Precīzāk sakot, Kotlin 1.3.21, Android 4, Android Studio 3. Raksts būs interesants, pirmkārt, tiem, kas sāk savu ceļu Android aplikāciju izstrādē. Tas ļauj saprast, kas un kā darbojas lietojumprogrammā.

Šāds kalkulators noder, kad jāaprēķina dzeramnaudu apjoms no uzņēmuma, kas nolemj pavadīt laiku restorānā vai kafejnīcā. Protams, ne visi un ne vienmēr atstāj tēju viesmīļiem, tā vairāk ir Rietumu tradīcija, taču šādas aplikācijas izstrādes process ir interesants jebkurā gadījumā.

Atgādinām: visiem "Habr" lasītājiem - atlaide 10 000 rubļu, reģistrējoties jebkurā Skillbox kursā, izmantojot "Habr" reklāmas kodu.

Skillbox iesaka: Praktiskais kurss "Mobile Developer PRO.

Lūk, kā lietotne izskatās, kad tā darbojas:

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Jūs ievadāt vēlamo procentuālo daļu no kopējās summas, sapulces dalībnieku skaitu un iegūstat rezultātu - dzeramnaudu daudzumu, kas jāatstāj.

Darba sākšana

Pilns lietojumprogrammas interfeiss izskatās šādi:
Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Pirmā darbība - projektu bāzes lejupielāde. Atveriet to Android Studio 3.0 vai jaunākā versijā. Mēs veidojam un izpildām projektu un redzam baltu ekrānu. Viss ir labi, kā tam jābūt.

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Lietotāju darbības projektā ir ierakstītas hronoloģiskā secībā, lai viss būtu skaidrs. Lai to skatītu, atveriet View -> Tool Windows -> TODO.

Mēs izpētām projektu un atveram colours.xml, lai novērtētu krāsu paleti. Strings.xml satur teksta datus (titrus), un styles.xml satur vairākas fontu veidnes.

Izmaksu sadaļas izstrāde

Atveriet activity_main.xml un pievienojiet tālāk norādīto kodu lineārajam izkārtojumam (#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"/>

Tagad jūs varat veidot vērtību direktoriju vai spēlēt ar krāsām materiāls.io rīks.

Tagad projekts izskatās šādi:

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?
Kā redzat, izmaksu aprēķins tiek veikts, pamatojoties uz lietotāja ievadītajiem datiem.

Konta sadaļas izstrāde

Pievienojiet tālāk norādīto kodu Lineārajam izkārtojumam pēc izdevumu sadaļas (#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>

Aizveriet LinearLayout pēc TODO saraksta un pēc tam pievienojiet jauno kodu, ievietojot to 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"/>

Tā kā aplikācijas galvenais uzdevums ir aprēķināt individuālās izmaksas katram pasākuma dalībniekam restorānā, tad galvenā loma ir costPersonTextView.

EditText ierobežo ievadi ar vienu rindiņu, šim parametram ir jābūt iestatītam uz NumberDecimal inputType.

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?
Mēs sākam projektu testa veikšanai un ievadām kopējo bojājumu parametrus (salauztas krūzes, šķīvji utt.)

Sadaļas "Cilvēki un padomi" izstrāde

Lai pievienotu dzeramnaudas summas atlasītāju, ielīmējiet tālāk norādīto kodu jaunā Lineārā izkārtojuma sadaļā (#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>

Šī koda daļa ir nepieciešama, lai precīzi aprēķinātu dzeramnaudas summu. Noklusējuma teksta vērtība ir 20. ImageButtons ir nodrošinātas ar ikonām mapē ar rakstīšanas atļaujām.

Kopējiet visu sadaļu un pievienojiet šo (#5):

  • ImageButton ID (subtractPeopleButton, addPeopleButton)
  • TextView ID (numberOfPeopleStaticText, numberOfPeopleTextView)
  • DefaultText priekš numberOfPeopleTextView (jābūt 4).

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Tagad, startējot aplikāciju, ir iespēja pievienot rēķina summu, darbojas arī pogas Pievienot/Atņemt, bet pagaidām nekas nenotiek.

Pievienot skatus

Atveriet MainActivity.kt un pievienojiet to funkcijai 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
 
}

Pogu pabeigšana

Lai pievienotu atbalstu pogu klikšķiem, ieviesiet View.OnClickListener klases līmenī (7.):

class Galvenā darbība: AppCompatActivity(), View.OnClickListener {

Projekta apkopošana šobrīd nedarbosies, jums ir jāveic vēl dažas darbības (# 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()
        }
    }

Runājot par pogām un slēdžiem, Kotlinam viss ir ļoti forši organizēts! Pievienojiet tālāk norādīto kodu visām palielināšanas un samazināšanas funkcijām
(#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()
        }
    }

Šeit kods aizsargā pieauguma funkcijas ar maksimālajām vērtībām (MAX_TIP & MAX_PEOPLE). Turklāt kods aizsargā samazināšanas funkcijas ar minimālajām vērtībām (MIN_TIP & MIN_PEOPLE).

Tagad mēs saistām pogas ar klausītājiem initViews funkcijā (#13):

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

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Tagad varat pievienot kopējo bojājumu, padomus un sapulces dalībnieku skaitu. Nu, tagad pats svarīgākais...

Izmaksu sadaļa

Šis kods aprēķina izmaksas (#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)
 
}

Šeit tiek izsaukta funkcija, kas ļauj ņemt vērā cilvēku skaitu uzņēmumā un aprēķināt dzeramnaudu (#15):

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

Mēs palaižam lietojumprogrammu. Tas izskatās un darbojas lieliski. Bet varētu būt labāk.

Ja mēģināsit noņemt rēķina summu un pēc tam palielināt mājienu vai draugu skaitu, lietotne avarēs, jo vēl nav pārbaudīta nulles izmaksas. Turklāt, ja mēģināsiet mainīt rēķina summu, maksa netiks atjaunināta.

Pēdējie soļi

Pievienojiet TextWatcher (#16):

class Galvenā darbība: AppCompatActivity(), View.OnClickListener, TextWatcher {

Pēc tam mēs iegulsim billEditText klausītāju (#17):

billEditText.addTextChangedListener(this)

Turklāt pievienojiet kodu, lai izpildītu 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) {}

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Nu, tagad viss darbojas! Apsveicam, jūs esat uzrakstījis pats savu "Dzērienu kalkulatoru" Kotlinā.

Dzeramnaudas kalkulatora izveide Kotlinā: kā tas darbojas?

Skillbox iesaka:

Avots: www.habr.com

Pievieno komentāru