Le mostramos cómo crear una aplicación simple de cálculo de propinas en Kotlin. Para ser más precisos, Kotlin 1.3.21, Android 4, Android Studio 3. El artículo será interesante, en primer lugar, para aquellos que comienzan su camino en el desarrollo de aplicaciones para Android. Le permite comprender qué y cómo funciona dentro de la aplicación.
Dicha calculadora es útil cuando necesita calcular la cantidad de propinas de una empresa que decide pasar tiempo en un restaurante o cafetería. Por supuesto, no todos y no siempre dejan té para los camareros, esto es más una tradición occidental, pero el proceso de desarrollo de una aplicación de este tipo es interesante en cualquier caso.
Recordamos: para todos los lectores de "Habr": un descuento de 10 rublos al inscribirse en cualquier curso de Skillbox utilizando el código promocional "Habr".
Skillbox recomienda: Curso práctico .
Así es como se ve la aplicación cuando se está ejecutando:
Ingresa el porcentaje deseado del monto total, la cantidad de participantes en la reunión y obtiene el resultado: la cantidad de propinas que deben quedar.
Начинаем
La interfaz completa de la aplicación se ve así:
Primera acción - . Ábralo en Android Studio 3.0 o posterior. Construimos y ejecutamos el proyecto y vemos una pantalla blanca. Todo está bien, como debe ser.
Las acciones del usuario se escriben en el proyecto en orden cronológico, para que todo quede claro. Para verlo, abra Ver -> Ventanas de herramientas -> TODO.
Estudiamos el proyecto y abrimos colors.xml para evaluar la paleta de colores. strings.xml contiene datos de texto (títulos) y styles.xml contiene varias plantillas de fuentes.
Desarrollo de la sección de costos
Abra activity_main.xml y agregue el siguiente código a 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"/>Ahora puedes diseñar el directorio de valores o jugar con los colores usando .
Ahora el proyecto se ve así:
Como puede ver, el cálculo del costo se basa en los datos ingresados por el usuario.
Desarrollo de la sección de cuentas.
Agregue el siguiente código a LinearLayout después de la Sección de gastos (#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>Cierre LinearLayout después de la lista TODOs, y luego agregue el nuevo código, colocándolo dentro de 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"/>Dado que la tarea principal de la aplicación es calcular los costos individuales para cada uno de los participantes en las reuniones en el restaurante, costPerPersonTextView juega el papel principal.
EditText limita la entrada a una línea, este parámetro debe establecerse en NumberDecimal inputType.
Iniciamos el proyecto para la prueba e ingresamos los parámetros del daño total (tazas rotas, platos, etc.)
Desarrollo de la sección "Personas y Consejos"
Para agregar un selector de monto de propina, pegue el código a continuación en una nueva sección 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 fragmento de código es necesario para calcular con precisión el monto de la propina. El valor de texto predeterminado es 20. Los ImageButtons se proporcionan con iconos en una carpeta con permisos de escritura.
Copie toda la sección y agregue lo siguiente (#5):
- Identificadores de ImageButton (restar PeopleButton, agregar PeopleButton)
- ID de TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText para numberOfPeopleTextView (debe ser 4).
Ahora, al iniciar la aplicación, es posible agregar el monto de la factura, los botones Agregar / Restar también funcionan, pero todavía no pasa nada.
Agregar vistas
Abra MainActivity.kt y agréguelo a la función 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
}Terminando los botones
Para agregar soporte para clics de botón, implemente View.OnClickListener en el nivel de clase (#7):
clase MainActivity: AppCompatActivity(), View.OnClickListener {
Compilar el proyecto en este momento no funcionará, debe realizar algunos pasos 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()
}
}
¡En términos de botones e interruptores, Kotlin tiene todo organizado muy bien! Agregue el siguiente código a todas las funciones de incremento y 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í el código protege las funciones de incremento con valores máximos (MAX_TIP & MAX_PEOPLE). Además, el código protege las funciones de decremento con valores mínimos (MIN_TIP & MIN_PEOPLE).
Ahora vinculamos los botones a los oyentes en la 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
}
Ahora puede agregar daños totales, propinas y el número de participantes de la reunión. Bueno, ahora lo más importante...
Sección de costos
Este código calcula los 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)
}Bueno, aquí se llama una función que permite tener en cuenta el número de personas en la empresa y calcular la propina (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Lanzamos la aplicación. Se ve y funciona muy bien. Pero podría ser mejor.
Si intenta eliminar el monto de la factura y luego aumenta la cantidad de sugerencias o amigos, la aplicación se bloqueará porque todavía no hay verificación de costos cero. Además, si intenta cambiar el monto de la factura, los cargos no se actualizarán.
Pasos finales
Agregue TextWatcher (# 16):
clase MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Luego incrustamos el oyente billEditText (#17):
billEditText.addTextChangedListener(esto)
Además, agregue código para ejecutar 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) {}
Bueno, ¡ahora todo funciona! Felicitaciones, ha escrito su propia "Calculadora de propinas" en Kotlin.
Skillbox recomienda:
- Curso práctico de dos años. .
- Curso por Internet .
- curso práctico anual .
Fuente: habr.com