YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish subtitles

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

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

Get Embed Code
13 Languages

Showing Revision 19 created 10/09/2015 by andp.

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