Criando uma calculadora de gorjetas em Kotlin: como funciona?

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Vamos explicar como criar um aplicativo simples para calcular gorjetas em Kotlin. Especificamente, Kotlin 1.3.21, Android 4, Android Studio 3. Este artigo será interessante, especialmente para aqueles que estão começando sua jornada no desenvolvimento de aplicativos Android. Ele permite entender como e o que funciona dentro do aplicativo.

Esse calculador será útil quando for necessário calcular o valor das gorjetas de um grupo que decidiu passar um tempo em um restaurante ou café. Claro, nem todos e nem sempre deixam gorjetas para os garçons, isso é mais uma tradição ocidental, mas o processo de desenvolvimento desse aplicativo é, de qualquer forma, interessante.

Lembramos: para todos os leitores do «Habr» — desconto de 10.000 rublos na inscrição em qualquer curso Skillbox com o código promocional «Habr».

A Skillbox recomenda: Curso Prático Desenvolvedor Móvel PRO.

Veja como o aplicativo se apresenta em funcionamento:

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Você insere a porcentagem desejada sobre o total, o número de participantes da reunião e obtém o resultado — o valor das gorjetas a serem deixadas.

Começar

A interface completa do aplicativo é mostrada da seguinte forma:
Criando uma calculadora de gorjetas em Kotlin: como funciona?

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Primeira ação — carregamento da base do projeto. Abra-o no Android Studio 3.0 ou versão mais recente. Compile e execute o projeto e você verá uma tela branca. Tudo está normal, é assim que deve ser.

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Criando uma calculadora de gorjetas em Kotlin: como funciona?

As ações do usuário estão escritas no projeto em ordem cronológica, para que tudo fique claro. Para visualizá-las, vá em View -> Tool Windows -> TODO.

Examine o projeto e abra colors.xml para avaliar a paleta de cores. No strings.xml estão os dados de texto (rótulos), e no styles.xml há alguns modelos de fonte.

Desenvolvimento da seção de despesas

Abra activity_main.xml e adicione o código abaixo ao LinearLayout (#1):

Agora você pode configurar o estilo do diretório values ou brincar com as cores, usando a ferramenta material.io.

Neste momento, o projeto se apresenta assim:

Criando uma calculadora de gorjetas em Kotlin: como funciona?
Como você pode ver, o cálculo das despesas é feito com base nos dados que o usuário insere.

Desenvolvimento da seção de contas

Adicione o código abaixo ao LinearLayout após a Seção de Despesas (#2):

<! — TODO #3: Construir Seção de Conta →

…

Fechamos o LinearLayout após a lista de TODOs e, em seguida, adicionamos novo código, colocando-o dentro do LinearLayout (#3):

Como a principal função do aplicativo é calcular os custos individuais para cada participante das refeições no restaurante, o TextView costPerPerson é de grande importância.

O EditText limita a entrada de dados a uma linha, e esse parâmetro deve ter o valor NumberDecimal para inputType.

Criando uma calculadora de gorjetas em Kotlin: como funciona?
Executamos o projeto para teste e inserimos os parâmetros de custo total (como copos, pratos quebrados etc.).

Desenvolvimento da seção 'Pessoas e gorjetas'.

Para incluir a escolha do valor da gorjeta, inserimos o código abaixo na nova seção LinearLayout (#4):

Este trecho de código é necessário para calcular corretamente o valor da gorjeta. O valor padrão do texto é 20. Os ImageButtons têm ícones na pasta com permissões de gravação.

Copiamos completamente a seção e adicionamos o seguinte (#5):

  • IDs dos ImageButtons (subtractPeopleButton, addPeopleButton)
  • IDs dos TextViews (numberOfPeopleStaticText, numberOfPeopleTextView)
  • Valor padrão para numberOfPeopleTextView (deve ser 4).

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Agora, ao iniciar o aplicativo, há a possibilidade de adicionar o valor da conta, e os botões 'Adicionar/Subtrair' estão funcionando, mas por enquanto, nada acontece.

Adicionando Views

Abrimos o MainActivity.kt e adicionamos isto na função initViews (#6):

função privada 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: Vínculo de Botões ao Listener
 
//TODO #16: Vínculo de EditText ao TextWatcher
 }

Finalizando os botões

Para adicionar suporte ao clique dos botões, estamos implementando View.OnClickListener no nível da classe (#7):

classe MainActivity: AppCompatActivity(), View.OnClickListener {

Não será possível compilar o projeto agora, precisamos realizar mais algumas etapas (#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()
        }
    }

Em termos de botões e switches, o Kotlin está muito bem organizado! Adicione o código abaixo em todas as funções increment e decrement
(#9 –#12):

função privada incrementTip() {
        if (tipPercent != MAX_TIP) {
            tipPercent += TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
função privada decrementTip() {
        if (tipPercent != MIN_TIP) {
            tipPercent -= TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
função privada incrementPeople() {
        if (numberOfPeople != MAX_PEOPLE) {
            numberOfPeople += PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }
 
função privada decrementPeople() {
        if (numberOfPeople != MIN_PEOPLE) {
            numberOfPeople -= PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }

Aqui o código protege as funções de incremento com valores máximos (MAX_TIP & MAX_PEOPLE). Além disso, o código protege as funções de decremento com valores mínimos (MIN_TIP & MIN_PEOPLE).

Agora vamos vincular os botões aos ouvintes na função initViews (#13):

função privada initViews() {
 
...
 
addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)
 
addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)
 
//TODO #15: Vínculo de EditText ao TextWatcher
}

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Agora podemos adicionar os gastos totais, gorjetas e o número de participantes da reunião. E agora o mais importante…

Seção de cálculo de gastos

Este código calcula os gastos (#14):

função privada 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)
 
}

E aqui chamamos a função que permite considerar o número de pessoas na empresa e calcular a gorjeta (#15):

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

Estamos lançando o aplicativo. Ele parece e funciona muito bem. Mas pode ser ainda melhor.

Se você tentar remover o valor da conta e, em seguida, aumentar o número de dicas ou amigos, o aplicativo irá falhar, pois ainda não há verificação para o valor de custo zero. Além disso, se você tentar alterar o valor da conta, as despesas não serão atualizadas.

Etapas finais

Adicionando o TextWatcher (#16):

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

Em seguida, incorporamos o ouvinte billEditText (#17):

billEditText.addTextChangedListener(this)

Além disso, adicionamos o código para realizar o 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) {}

Criando uma calculadora de gorjetas em Kotlin: como funciona?

Agora tudo funciona perfeitamente! Parabéns, você escreveu seu próprio "Calculadora de Gorjetas" em Kotlin.

Criando uma calculadora de gorjetas em Kotlin: como funciona?

A Skillbox recomenda:

Fonte: habr.com

Compre hospedagem confiável para sites com proteção contra DDoS, servidores VPS VDS 🔥 Compre hospedagem confiável para sites com proteção contra DDoS, servidores VPS VDS | ProHoster