Skip to content

Latest commit

 

History

History
148 lines (95 loc) · 5.81 KB

Readme.md

File metadata and controls

148 lines (95 loc) · 5.81 KB
Raw

Kotlin Intermedio > Sesión 01 > Ejemplo 5

Ejemplo 5: Views, Button

1. Objetivos 🎯

  • Crear un View desde el layout.
  • Explorar los atributos básicos de un View.

2. Requisitos 📋

  1. Android Studio Instalado en nuestra computadora.
  2. Seguir la instrucción específica para esta sesión.

3. Desarrollo 💻

  1. Abre Android Studio y crea un nuevo proyecto con Activity Vacía (Empty Activity).

  2. Una vez creado el proyecto, nos dirigimos al directorio de nuestro proyecto, localizamos la carpeta de recursos y abrimos el archivo XML enconatrado en la carpeta layout.

  3. Se abrirá una nueva pestaña con una ventana que muestra el diseño de la pantalla principal, esta es una interpretación gráfica del código XML que se encuentra en nuestro archivo, y por supuesto podemos visualizarlo en Android Studio. Las formas de visualizar este archivo son por código,diseño o mixto y se muestran en el siguiente gif:

  4. Ahora vamos a explorar un poco las herramientas que la IDE nos brinda para este tipo de archivos:

    • #FF0000: La barra vertical izquierda contiene Palette Que nos muestra una serie de Views para insertar en el layout y Component tree Que muestra la estructura de nuestro layout.
    • #FFFF00: En la barra superior vertical, tenemos opciones para mostrar el diseño con su blueprint, una opción para colocar el diseño en formato vertical/horizontal, seleccionar la resolución de la pantalla mediante móviles predefinidos o con medidas personalizadas, la API de android entre otras cosas.
    • #0000FF:En la barra lateral derecha, tenemos la opción attributes que despliegan los atributos de un View seleccionado con el cursor.
    • #00FF00: Este menú flotante posibilita el zoom in/out al layout, capacidad de pan, escalar la app a resolución 1:1.

  5. Elegiremos un tipo de visualización para nuestro archivo. En este caso, elegiremos la opción mixta para permitirnos visualizar nuestro código con el que trabajaremos manualmente y visualizar los cambios que genera en el layout.

  6. Utilizaremos Este código para sustituir el ViewGroup actual (ConstraintLayout) con uno de manejo más sencillo (LinearLayout), este tema se toca a mayor profundidad en la siguiente sesión.

  7. Agregamos el siguiente código XML para agregar un TextView:

<TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
  1. Agregaremos un texto para nuestro TextView, para eso, abrirermos el recurso strings.xml ubicado en res/values/ . Dentro del tag resources, agregamos un nuevo string:
<string name="hello_text">Hola, Estas es la sesión 2!</string>

y agregamos un nuevo atributo text al TextView para insertarle un texto. Adicionalmente, haremos el texto en negritas y definiremos el tamaño de la fuente:

android:text="@string/hello_text"
android:textStyle="bold"
android:textSize="14sp"

en textSize, tenemos el sufijo "sp" que significa scale-independent pixels. Deberíamos poder visualizar el texto correctamente!

  1. Añadimos ahora un botón, ponemos esta línea de código abajo del Textview para generar uno.
<Button 
        android:id="@+id/btnAccept"
        android:background="@color/mexicanPink"
        android:text="@string/accept_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Ingresamos el texto accept_button en strings.xml :

<string name="accept_button">ACEPTAR</string>

Y el color rosa mexicano a colors.xml:

<color name="mexicanPink">#E4007C</color>

En el diseño se visualiza correctamente el botón, sin embargo, el botón está pegado al TextView, así que le daremos un margen en la parte superior:

android:layout_marginTop="48dp"
  1. Ahora agregaremos funcionalidad a este botón. Abrimos El archivo MainActivity.kt en java/nombre.del.paquete/. Dentro de la clase homónima, declaramos dos objetos Button y TextView para representar los Views en nuestra Activity.
private lateinit var btnAccept: Button
private lateinit var text: TextView

al final del método onCreate , agregamos la siguiente línea de código para asignarles los Views correspondientes (mediante sus id's):

btnAccept = findViewById(R.id.btnAccept)
text = findViewById(R.id.text)

y por último asignamos el código a reproducirse cuando se pulse el botón:

btnAccept.setOnClickListener {
            text.text = "Haz dado click al botón!"
        }

Lo que estamos haciendo aquí es asignar un nuevo texto a nuestro TextView al hacer click en el botón. Corremos la aplicación para comprobar que todo funcione bien.

Por buena práctica, todo texto de la aplicación va en strings.xml por lo que trasladamos el texto del TextView al archivo:

<string name="button_clicked">Haz dado click al botón!</string>

y el texto ahora se asigna de la siguiente form:

text.text = getString(R.string.button_clicked)

Nuestra aplicación debe verse de la siguiente forma:

Anterior | Siguiente