Mostramos como criar um aplicativo simples de cálculo de gorjeta em Kotlin. Para ser mais preciso, Kotlin 1.3.21, Android 4, Android Studio 3. O artigo será interessante, antes de tudo, para quem está iniciando sua jornada no desenvolvimento de aplicativos Android. Ele permite que você entenda o que e como funciona dentro do aplicativo.
Essa calculadora é útil quando você precisa calcular a quantidade de gorjetas de uma empresa que decide passar um tempo em um restaurante ou café. Claro, nem todo mundo e nem sempre deixa o chá para os garçons, isso é mais uma tradição ocidental, mas o processo de desenvolvimento de tal aplicativo é interessante em qualquer caso.
Lembramos: para todos os leitores de "Habr" - um desconto de 10 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".
A Skillbox recomenda: curso prático .
Aqui está a aparência do aplicativo quando está em execução:
Você insere a porcentagem desejada do valor total, o número de participantes na reunião e obtém o resultado - a quantidade de gorjetas que deve sobrar.
Начинаем
A interface completa do aplicativo é assim:
Primeira ação - . Abra-o no Android Studio 3.0 ou posterior. Construímos e executamos o projeto e vemos uma tela branca. Está tudo bem, como deveria estar.
As ações do usuário são escritas no projeto em ordem cronológica, para que tudo fique claro. Para visualizá-lo, abra Exibir -> Janelas de ferramentas -> TODO.
Estudamos o projeto e abrimos colors.xml para avaliar a paleta de cores. strings.xml contém dados de texto (legendas) e styles.xml contém vários modelos de fonte.
Desenvolvimento da Seção de Custo
Abra activity_main.xml e adicione o código abaixo ao 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"/>Agora você pode estilizar o diretório values ou brincar com as cores usando .
Agora o projeto fica assim:
Como você pode ver, o cálculo do custo é baseado nos dados inseridos pelo usuário.
Desenvolvimento da seção de contas
Adicione o código abaixo ao LinearLayout após a seção Expense (#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>Feche o LinearLayout após a lista de TODOs e adicione o novo código, colocando-o dentro do 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"/>Como a principal tarefa do aplicativo é calcular os custos individuais de cada um dos participantes das reuniões no restaurante, o costPerPersonTextView desempenha o papel principal.
EditText limita a entrada a uma linha, esse parâmetro deve ser definido como NumberDecimal inputType.
Iniciamos o projeto para o teste e inserimos os parâmetros do dano total (copos quebrados, pratos, etc.)
Desenvolvimento da secção "Pessoas e Dicas"
Para adicionar um seletor de valor de gorjeta, cole o código abaixo em uma nova seção 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>Este trecho de código é necessário para calcular com precisão o valor da gorjeta. O valor de texto padrão é 20. ImageButtons são fornecidos com ícones em uma pasta com permissões de gravação.
Copie toda a seção e adicione o seguinte (# 5):
- IDs de ImageButton (subtractPeopleButton, addPeopleButton)
- IDs de TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText para numberOfPeopleTextView (deve ser 4).
Agora, ao iniciar o aplicativo, é possível somar o valor da fatura, os botões Somar/Subtrair também funcionam, mas até agora nada acontece.
Adicionar visualizações
Abra MainActivity.kt e adicione-o à função 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
}Finalizando os botões
Para adicionar suporte para cliques de botão, implemente View.OnClickListener no nível de classe (#7):
classe MainActivity: AppCompatActivity(), View.OnClickListener {
Compilar o projeto agora não vai funcionar, você precisa 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 questão de botões e switches, o Kotlin tem tudo organizado muito legal! Adicione o código abaixo a todas as funções 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()
}
}Aqui o código protege funções de incremento com valores máximos (MAX_TIP & MAX_PEOPLE). Além disso, o código protege funções de decremento com valores mínimos (MIN_TIP & MIN_PEOPLE).
Agora ligamos os botões aos ouvintes na função initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Agora você pode adicionar dano total, gorjetas e o número de participantes da reunião. Bem, agora o mais importante...
Seção de custo
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 bem, aqui se chama uma função que permite levar em conta o número de pessoas da empresa e calcular a gorjeta (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Iniciamos o aplicativo. Parece e funciona muito bem. Mas poderia ser melhor.
Se você tentar remover o valor da conta e depois aumentar o número de dicas ou amigos, o aplicativo travará porque ainda não há cheque para custos zero. Além disso, se você tentar alterar o valor da fatura, as cobranças não serão atualizadas.
Etapas finais
Adicionar TextWatcher (nº 16):
classe MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Em seguida, incorporamos o ouvinte billEditText (# 17):
billEditText.addTextChangedListener (este)
Além disso, adicione o código para executar 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) {}
Bem, agora tudo funciona! Parabéns, você escreveu sua própria "Calculadora de Gorjetas" em Kotlin.
A Skillbox recomenda:
- Curso prático de dois anos .
- Curso online .
- curso de ano prático .
Fonte: habr.com