Return to Video

13-02 Añadiendo una CheckBox - Solución

  • 0:01 - 0:04
    Para construir este diseño, vamos a pensar
    primero en las vistas necesarias.
  • 0:04 - 0:07
    Voy a asumir que todo esto ya se ha
    hecho y que solo hablaremos
  • 0:07 - 0:11
    de las nuevas cosas que necesitamos
    añadir a nuestro diseño.
  • 0:11 - 0:15
    Las dos vistas que necesitamos agregar
    son una vista de texto para Toppings
  • 0:15 - 0:18
    y una vista CheckBox para
    el item Whipped cream.
  • 0:18 - 0:21
    Quizá no sabía que esta vista
    existía en Android, pero a lo mejor
  • 0:21 - 0:24
    buscándola en Google le ayude
    a encontrar esta respuesta.
  • 0:25 - 0:28
    En el Paso 2, necesitamos
    posicionar las vistas.
  • 0:28 - 0:31
    Suponiendo que las vistas ya están
    en su posición correcta, solo necesitamos
  • 0:31 - 0:35
    agregar Toppings y Whipped cream,
    verticalmente, en la misma hilera.
  • 0:35 - 0:37
    Ya que la vista raíz es un
    diseño lineal vertical,
  • 0:37 - 0:40
    podemos añadir estas dos vistas
    encima de la misma.
  • 0:41 - 0:44
    Para el tercer paso,
    necesitamos dar estilo a las vistas.
  • 0:44 - 0:47
    El estilo en el encabezado de Toppings
    es el mismo que los de Quantity
  • 0:47 - 0:51
    y Order Summary, entonces podemos copiar
    y pegar los encabezados existentes.
  • 0:51 - 0:55
    La vista CheckBox es nueva y por eso
    necesitamos darle el estilo adecuado.
  • 0:55 - 0:59
    Debiéramos permitir 24 pd de espacio
    entre la caja y el texto,
  • 0:59 - 1:04
    y debemos cambiar el tamaño de fuente
    de Whipped cream a 16 sp.
  • 1:04 - 1:06
    Hagamos esos cambios ahora a nuestra app.
  • 1:07 - 1:10
    Para agregar un encabezado a Toppings que
    se vea como el de Quantity,
  • 1:10 - 1:13
    puedo copiar y pegar este código.
  • 1:13 - 1:17
    Lo copio y luego lo añado encima de
    este LinearLayout vertical.
  • 1:18 - 1:20
    Ok, ahora dice aqui Quantity dos veces.
  • 1:20 - 1:23
    Voy a cambiar el texto para
    que diga Toppings.
  • 1:23 - 1:25
    También copié el margen inferior
  • 1:25 - 1:29
    para que haya un espacio entre este
    encabezado y el contenido debajo.
  • 1:30 - 1:33
    Aún no hemos agregado un CheckBox
    a nuestra app de antes,
  • 1:33 - 1:34
    así que buscaré en Google cómo hacerlo.
  • 1:34 - 1:38
    Voy a buscar sobre
    un checkbox en Android.
  • 1:38 - 1:41
    Recuerde agregar Android porque
    podría haber checkboxes
  • 1:41 - 1:45
    para otras plataformas, como por ejemplo
    la web u otras plataformas móviles,
  • 1:45 - 1:48
    Esto ayudará a obtener un resultado
    específico para Android.
  • 1:48 - 1:50
    Veamos el primer enlace.
  • 1:50 - 1:53
    Esta es la documentación de referencia
    para la clase CheckBox.
  • 1:53 - 1:56
    Si me desplazo por el texto veré
    un resumen de la clase
  • 1:56 - 1:59
    y luego va directo a los atributos XML.
  • 1:59 - 2:03
    Lo que me gustaría es ver un ejemplo
    de XML para CheckBox.
  • 2:03 - 2:05
    Así que regresemos a los
    resultados de la búsqueda.
  • 2:05 - 2:07
    Veamos el segundo enlace.
  • 2:07 - 2:10
    Bien, ahora me muestra algunas
    figuras de Checkboxes.
  • 2:10 - 2:12
    Y aquí hay un poco de XML.
  • 2:12 - 2:13
    Esto luce muy bien.
  • 2:13 - 2:16
    Tiene dos CheckBoxes
    dentro de un LinearLayout.
  • 2:16 - 2:21
    Voy a copiar la primera CheckBox,
    y luego la voy a pegar en nuestra app.
  • 2:22 - 2:26
    De vuelta en nuestra app, voy a pegarlo
    luego del texto de Toppings,
  • 2:26 - 2:29
    pero antes del texto de
    Quantity, justo aquí.
  • 2:29 - 2:33
    Voy a moditicar el XML, porque no se
    ajusta exactamente a nuestro caso.
  • 2:33 - 2:37
    Voy a remover el id y
    tambien el texto aquí.
  • 2:37 - 2:40
    En lugar de carne, porque nuestra
    cafetería no vende carne,
  • 2:40 - 2:42
    voy a escribir, Whipped cream.
  • 2:43 - 2:46
    Por cierto, lo que vimos antes,
    @string/meat,
  • 2:46 - 2:50
    se refería a una cadena de recursos,
    en el archivo strings.xml.
  • 2:50 - 2:53
    Ya hablaremos de eso más adelante,
    pero por ahora,
  • 2:53 - 2:56
    puede escribir la cadena de texto
    aquí directamente y mire,
  • 2:56 - 2:59
    la vista previa se actualiza, así que
    ahora en la Checkbox dice Whipped cream.
  • 2:59 - 3:03
    Lo que es bueno de la vista Checkbox,
    es que proporciona una caja,
  • 3:03 - 3:08
    así como un texto, para que no tenga
    que agregar otra vista de texto aquí.
  • 3:08 - 3:11
    Tampoco necesitamos esta linea aquí
    que habla de onClick.
  • 3:12 - 3:16
    Todo lo que nos importa en esta tarea
    es hacer que la CheckBox aparezca aquí.
  • 3:16 - 3:20
    Otra forma de llegar a este XML es
    chequear la hoja de trucos comunes
  • 3:20 - 3:22
    para vistas en Android.
  • 3:23 - 3:25
    Esta hoja de trucos enumera varias
    vistas comunes en Android
  • 3:25 - 3:27
    y contiene ejemplos del XML también.
  • 3:28 - 3:30
    Aquí está la vista CheckBox,
  • 3:30 - 3:34
    y aquí hay un ejemplo de cómo se vería
    el respectivo XML.
  • 3:34 - 3:37
    Podría haber copiado el XML desde aquí
    y pegarlo en la app.
  • 3:38 - 3:41
    Regresando a Android Studio vamos a
    correr la app para ver cómo luce.
  • 3:42 - 3:44
    Aquí está.
    Se ve muy bien.
  • 3:44 - 3:47
    Tenemos el encabezado Toppings y
    una CheckBox Whipped cream.
  • 3:48 - 3:51
    Tambień tenemos esta animación
    genial cuando chequeamos la caja.
  • 3:51 - 3:55
    El único problema que veo, sin embargo,
    es que falta el espaciado.
  • 3:55 - 3:58
    Por ejemplo, está muy ajustado entre
    el encabezado Quantity y el CheckBox
  • 3:58 - 4:02
    de Whipped cream y tampoco hay
    suficiente espacio aquí en el medio.
  • 4:02 - 4:05
    Regresando a las líneas rojas
    que fueron provistas,
  • 4:05 - 4:09
    deberíamos agregar 24 pd de espacio aquí,
    y cambiar el tamaño de fuente a 16 sp.
  • 4:11 - 4:13
    Primero voy a cambiar el tamaño de fuente.
  • 4:13 - 4:18
    Voy a escribir android:textSize
    y luego poner 16 sp.
  • 4:18 - 4:22
    Voy a abrir la vista previa aquí, para
    revisar que en realidad aumentó el tamaño
  • 4:22 - 4:24
    de la fuente y así es.
  • 4:24 - 4:26
    Si no está seguro si se actualizó,
    siempre puede dar clic en este botón.
  • 4:26 - 4:27
    OK.
  • 4:27 - 4:30
    Ahora para averiguar el espaciado,
    lo hice funcionar
  • 4:30 - 4:32
    después de mucho ensayo y error.
  • 4:32 - 4:34
    Intenté fijar los valores de margen
  • 4:34 - 4:38
    y luego los valores de relleno,
    y resultó que el valor izquierdo
  • 4:38 - 4:43
    controla el espaciado entre
    la caja y el texto aquí.
  • 4:43 - 4:44
    Agreguemos el relleno ahora.
  • 4:45 - 4:47
    Bien, el texto se movió.
  • 4:47 - 4:49
    Sin embargo, aún veo otro problema.
  • 4:49 - 4:53
    Hay suficiente espacio vertical ahí,
    pero no hay suficiente espacio aquí.
  • 4:53 - 4:57
    Necesito agregar relleno de fondo, o
    un margen inferior a esta vista CheckBox,
  • 4:57 - 5:02
    o necesito agregar relleno arriba, o
    un margen superior al encabezado Quantity.
  • 5:02 - 5:03
    De cualquier forma funcionaría.
  • 5:03 - 5:07
    Voy a agregar un margen superior
    al encabezado Quantity.
  • 5:07 - 5:09
    ¡Ahora se ve mejor!
  • 5:09 - 5:11
    Ahora las cosas se ven mejor espaciadas.
  • 5:11 - 5:13
    Voy a correr esta app en mi dispositivo.
  • 5:14 - 5:16
    Y aquí está la app.
    En verdad luce bien.
  • 5:16 - 5:17
    Buen trabajo.
  • 5:17 - 5:21
    Cuando necesite agregar mas cambios a
    la interfaz de su app, puede seguir este
  • 5:21 - 5:25
    patrón de buscar en Google la información
    en línea y luego aplicarla a la app.
Title:
13-02 Añadiendo una CheckBox - Solución
Description:

13-02 Añadiendo una CheckBox - Solución

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Spanish subtitles

Revisions Compare revisions