Crear unha calculadora de propinas en Kotlin: como funciona?

Contámosche como crear unha aplicación sinxela para calcular consellos en Kotlin. Máis precisamente, Kotlin 1.3.21, Android 4, Android Studio 3. O artigo será interesante, en primeiro lugar, para aqueles que están comezando a súa andaina no desenvolvemento de aplicacións para Android. Permítelle comprender que e como funciona dentro da aplicación.

Esta calculadora será útil cando necesites calcular a cantidade de propinas dunha empresa que decide pasar o tempo nun restaurante ou cafetería. Por suposto, non todos deixan sempre unha propina aos camareiros, é máis unha tradición occidental, pero o proceso de desenvolvemento desta aplicación é interesante en calquera caso.

Recordámolo: para todos os lectores de "Habr" - un desconto de 10 rublos ao inscribirse en calquera curso de Skillbox usando o código promocional "Habr".

Skillbox recomenda: Curso práctico "Desenvolvedor móbil PRO.

Este é o aspecto da aplicación en funcionamento:

Introduza a porcentaxe desexada do importe total, o número de participantes na reunión e obtén o resultado: a cantidade de propina que debe deixar.

Comezando

A interface da aplicación completa ten o seguinte aspecto:




primeira acción - descargando a base do proxecto. Ábreo en Android Studio 3.0 ou posterior. Construímos e lanzamos o proxecto e vemos unha pantalla branca. Todo está ben, así debe ser.

As accións do usuario están escritas no proxecto en orde cronolóxica para que todo sexa claro. Para velo, abra Ver -> Ferramenta Windows -> TODO.

Estudamos o proxecto e abrimos colors.xml para avaliar a paleta de cores. strings.xml contén datos de texto (sinaturas) e styles.xml contén varios modelos de fontes.

Desenvolvemento da sección de custos

Abre activity_main.xml e engade o seguinte código ao LinearLayout (nº 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"/>

Agora podes usar o estilo do directorio de valores ou xogar coas cores ferramenta material.io.

Agora o proxecto ten o seguinte aspecto:

Como podes ver, os custos calcúlanse en función dos datos introducidos polo usuario.

Desenvolvemento do apartado de contas

Engade o seguinte código ao LinearLayout despois da Sección de gastos (n.º 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>

Pechamos o LinearLayout despois da lista de TODO, e despois engadimos un novo código, colocándoo dentro do LinearLayout (nº 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"/>

Dado que a tarefa principal da aplicación é calcular os custos individuais para cada participante nunha reunión de restaurante, costPersonTextView xoga o papel principal.

EditText limita a entrada a unha liña, este parámetro debe establecerse en NumberDecimal inputType.

Lanzamos o proxecto para a proba e introducimos os parámetros de danos xerais (vasos, pratos rotos, etc.)

Desenvolvemento da sección “Persoas e Consellos”.

Para engadir unha selección de volume de consellos, pega o seguinte código na nova sección LinearLayout (n.º 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>

Esta sección do código é necesaria para calcular con precisión a cantidade de propina. O valor de texto predeterminado é 20. Os ImageButtons proporciónanse con iconas nun cartafol con permisos de escritura.

Copia a sección por completo e engade o seguinte (#5):

• ID de ImageButton (restar PeopleButton, addPeopleButton)
• IDs de TextView (número de texto estático de persoas, texto de vista de número de persoas)
• DefaultText para numberOfPeopleTextView (debe ser 4).

Agora, cando inicias a aplicación, hai a oportunidade de engadir o importe da factura, os botóns "Engadir/Restar" tamén funcionan, pero aínda non pasa nada.

Engadindo vistas

Abre MainActivity.kt e engade isto á función initViews (n.º 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
 
}

Rematando os botóns

Para engadir compatibilidade con clics de botóns, implementamos View.OnClickListener a nivel de clase (n.º 7):

clase MainActivity: AppCompatActivity(), View.OnClickListener {

Non será posible compilar o proxecto agora mesmo; cómpre realizar algúns pasos máis (nº 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()
        }
    }

En canto a botóns e interruptores, Kotlin organiza todo moi ben! Engade o código a continuación a todas as funcións de incremento e decremento
(#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í o código protexe as funcións de incremento cos valores máximos (MAX_TIP e MAX_PEOPLE). Ademais, o código protexe as funcións de decremento con valores mínimos (MIN_TIP e MIN_PEOPLE).

Agora asociamos os botóns cos oíntes na función initViews (#13):

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

Agora podes engadir danos totais, consellos e o número de participantes na reunión. Pois agora o máis importante...

Sección de cálculo de custos

Este código calcula os custos (#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)
 
}

Pois ben, aquí chámase unha función que permite ter en conta o número de persoas na empresa e calcular consellos (#15):

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

Imos lanzar a aplicación. Parece e funciona moi ben. Pero podería ser mellor.

Se tentas eliminar o importe da factura e despois aumentas o número de propinas ou amigos, a aplicación fallará porque aínda non hai comprobación do valor de custo cero. Ademais, se tentas cambiar o importe da factura, os cargos non se actualizarán.

Pasos finais

Engadir TextWatcher (nº 16):

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

Despois incorporamos o oínte billEditText (n.º 17):

billEditText.addTextChangedListener(this)

Ademais engadimos código para executar 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) {}

Ben, agora absolutamente todo funciona! Parabéns, escribiches a túa propia "Calculadora de propinas" en Kotlin.

Skillbox recomenda:

• Curso práctico de dous anos "Son un programador web PRO".
• Curso en liña "Desenvolvedor C#".
• Curso práctico anual "Desenvolvedor PHP de 0 a PRO".

Fonte: www.habr.com