Construir una calculadora de consells a Kotlin: com funciona?

Us mostrem com crear una aplicació senzilla de càlcul de propina a Kotlin. Per ser més precisos, Kotlin 1.3.21, Android 4, Android Studio 3. L'article serà interessant, en primer lloc, per a aquells que comencen el seu viatge en el desenvolupament d'aplicacions per a Android. Us permet entendre què i com funciona dins de l'aplicació.

Aquesta calculadora és útil quan necessiteu calcular la quantitat de propis d'una empresa que decideix passar temps en un restaurant o cafeteria. Per descomptat, no tothom i no sempre deixa el te per als cambrers, això és més una tradició occidental, però el procés de desenvolupament d'aquesta aplicació és interessant en qualsevol cas.

Recordem: per a tots els lectors de "Habr": un descompte de 10 rubles en inscriure's a qualsevol curs de Skillbox amb el codi promocional "Habr".

Skillbox recomana: Curs pràctic "Desenvolupador mòbil PRO.

Aquí teniu l'aspecte de l'aplicació quan s'executa:

Introduïu el percentatge desitjat de l'import total, el nombre de participants a la reunió i obteniu el resultat: la quantitat de propis que s'han de deixar.

Introducció

La interfície completa de l'aplicació té aquest aspecte:




Primera acció - descàrrega de la base del projecte. Obriu-lo a Android Studio 3.0 o posterior. Construïm i executem el projecte i veiem una pantalla blanca. Tot està bé, com ha de ser.

Les accions de l'usuari s'escriuen al projecte en ordre cronològic, de manera que tot quedi clar. Per visualitzar-lo, obriu Visualització -> Eina Windows -> TODO.

Estudiem el projecte i obrim colors.xml per avaluar la paleta de colors. strings.xml conté dades de text (subtítols) i styles.xml conté diverses plantilles de tipus de lletra.

Desenvolupament de la Secció de Costos

Obriu activity_main.xml i afegiu el codi següent a LinearLayout (núm. 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"/>

Ara podeu estilitzar el directori de valors o jugar amb colors eina material.io.

Ara el projecte té aquest aspecte:

Com podeu veure, el càlcul del cost es basa en les dades introduïdes per l'usuari.

Desenvolupament de la secció de comptes

Afegiu el codi següent a LinearLayout després de la secció de despeses (núm. 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>

Tanqueu el LinearLayout després de la llista TODO i, a continuació, afegiu el codi nou, col·locant-lo dins del LinearLayout (núm. 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"/>

Com que la tasca principal de l'aplicació és calcular els costos individuals per a cadascun dels participants a les reunions al restaurant, el costPerPersonTextView juga el paper principal.

EditText limita l'entrada a una línia, aquest paràmetre s'ha d'establir en NumberDecimal inputType.

Iniciem el projecte per a la prova i introduïm els paràmetres del dany total (tasses trencades, plats, etc.)

Desenvolupament de l'apartat "Persones i consells".

Per afegir un selector de quantitat de propina, enganxeu el codi següent en una nova secció LinearLayout (núm. 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>

Aquest codi és necessari per calcular amb precisió la quantitat de propina. El valor de text predeterminat és 20. Els ImageButtons es proporcionen amb icones en una carpeta amb permisos d'escriptura.

Copieu tota la secció i afegiu el següent (núm. 5):

• Identificadors d'ImageButton (subtractPeopleButton, addPeopleButton)
• Identificadors de TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText per numberOfPeopleTextView (ha de ser 4).

Теперь при запуске приложения есть возможность добавить сумму счета, также работают кнопки «Добавить/Вычесть», но пока ничего не происходит.

Afegeix vistes

Obriu MainActivity.kt i afegiu-ho a la funció initViews (núm. 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
 
}

Acabant els botons

Per afegir compatibilitat amb els clics de botons, implementeu View.OnClickListener a nivell de classe (núm. 7):

classe MainActivity: AppCompatActivity(), View.OnClickListener {

La compilació del projecte ara mateix no funcionarà, heu de realitzar uns quants passos més (# 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()
        }
    }

Pel que fa als botons i interruptors, Kotlin ho té tot organitzat molt bé! Afegiu el codi següent a totes les funcions d'increment i disminució
(#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()
        }
    }

Aquí el codi protegeix les funcions d'increment amb valors màxims (MAX_TIP i MAX_PEOPLE). A més, el codi protegeix les funcions de disminució amb valors mínims (MIN_TIP i MIN_PEOPLE).

Ara enllacem els botons als oients a la funció initViews (núm. 13):

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

Ara podeu afegir danys totals, consells i el nombre de participants a la reunió. Bé, ara el més important...

Secció de costos

Aquest codi calcula els costos (#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)
 
}

Bé, aquí es diu una funció que permet tenir en compte el nombre de persones de l'empresa i calcular la propina (#15):

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

Estrenem l'aplicació. Es veu i funciona molt bé. Però podria ser millor.

Si intenteu eliminar l'import de la factura i després augmentar el nombre de suggeriments o amics, l'aplicació es bloquejarà perquè encara no hi ha cap comprovació de costos zero. A més, si intenteu canviar l'import de la factura, els càrrecs no s'actualitzaran.

Passos finals

Afegeix TextWatcher (núm. 16):

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

A continuació, incrustem l'oient billEditText (núm. 17):

billEditText.addTextChangedListener (això)

A més, afegiu codi per executar TextWatcher (núm. 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) {}

Bé, ara tot funciona! Enhorabona, heu escrit la vostra pròpia "Calculadora de propina" a Kotlin.

Skillbox recomana:

• Curs pràctic de dos anys "Sóc un desenvolupador web PRO".
• Curs en línia "Desenvolupador C#".
• Curs pràctic de l'any "Desenvolupador PHP de 0 a PRO".

Font: www.habr.com