Spanish subtitles

← 05-07 Build Layout - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/06/2015 by sp12.

  1. Para crear este diseño tengo que abrir
    el archivo activity_main.xml.
  2. Sé que necesito
    un diseño vertical y lineal
  3. para poner cada una de estas vistas
    en una columna vertical.
  4. Así que primero cambiaré
    el RelativeLayout por el LinearLayout.
  5. En seguida me aparece un error,
  6. diciendo que la etiqueta de apertura
    no coincide con la de cierre.
  7. Lo soluciono copiando esta de aquí
    y pegándola aquí abajo.
  8. Ahora las etiquetas coinciden.
  9. Lo siguiente es añadir las vistas.
  10. En la primera vista
    pone "quantity" [cantidad].
  11. Me voy a TextView,
    le cambio el texto y pongo quantity.
  12. Ahora tengo una vista en la que pone 0.
  13. Copio la primera TextView
    y la pego en la de abajo.
  14. La cambiaré para que aquí ponga 0
    al igual que en la captura de pantalla.
  15. El último hijo en este diseño lineal
    es un botón.
  16. Como no hemos añadido ningún botón antes
    en nuestro diseño, busquémoslo en Google.
  17. Abre tu navegador y busca:
    "botón android".
  18. Este primer enlace tiene buena pinta,
    la página es: developer.android.com.
  19. Aquí hay información para "botón".
    Ignoremos esta parte de texto de aquí.
  20. Deslicémonos hacia abajo
    para leer un resumen de la clase.
  21. Habla un poco sobre el código Java,
    el cual aún no hemos aprendido.
  22. Aquí abajo tenemos algo de XML
    que sirve para poner un botón.
  23. Podemos copiarlo para ver
    qué hace en nuestro código.
  24. En nuestro diseño añadiré un botón
    debajo de estas dos TextView.
  25. Voy a pegar aquí el código
    que hemos encontrado en nuestra búsqueda.
  26. Y ahora en lugar del hilo self_destruct,
    voy a buscar algo más amistoso
  27. como, por ejemplo,
    Order [Pedir].
  28. Podemos borrar esta última línea también
    ya que no la necesitamos.
  29. Ahora tienes una TextView de "Cantidad",
    una TextView en la que pone 0,
  30. y un botón de "Pedido".
  31. Ejecutémoslo en nuestra app
    para ver qué aspecto tiene,
  32. pulsando el botón de reproducción
    de color verde.
  33. Aquí podemos ver que aún se está creando.
  34. Esto no es lo que queríamos.
  35. Parece que nuestro LinearLayout
    es horizontal en lugar de vertical.
  36. Vamos a asegurarnos de que hemos añadido
    el atributo sobre la orientación.
  37. Vamos a cambiar esto para que ponga:
    android:orientation="vertical".
  38. Esto debería resolver el problema.
  39. Pulsemos otra vez el botón de reproducir.
  40. Bien, eso está mejor.
  41. Los tres hijos se muestran
    en una columna vertical.
  42. Ahora tenemos que diseñar estos campos
  43. para que se parezcan un poco más
    a la captura de pantalla que nos dieron.
  44. En la captura de pantalla, el TextView
    "Cantidad" está todo en mayúsculas.
  45. En la lección uno hablamos de un atributo
    llamado android:textAllCaps,
  46. y nos aparece aquí,
    en autocompletar.
  47. Cuando lo veas así,
    si le das a Enter,
  48. se te añadirá automáticamente
    en el código.
  49. A este valor le hemos puesto true
    porque lo queremos todo en mayúsculas.
  50. Es mejor utilizar este atributo
    para poner en mayúsculas todo el texto
  51. porque cuando queramos cambiar la UI
    para que la cantidad salga en minúsculas,
  52. todo lo que tendremos que hacer
    es quitar este atributo
  53. sin necesidad de cambiar este texto.
  54. Sigamos. Este texto en el que pone 0
    debería tener un tamaño de texto de 16sp.
  55. Lo voy a añadir ahora y justo me sale
    como sugerencia de autocompletar.
  56. Le doy a Enter
    y después escojo 16sp como valor.
  57. También queremos que tenga
    una fuente de color negro.
  58. Utilizaré el color negro
    del sistema de Android,
  59. que lleva el mismo nombre.
  60. Bien, esto sirve tanto para la TextView
    de "Cantidad" como para la de 0.
  61. El botón de "Pedido" está bien como está.
  62. Escribirá en mayúsculas el texto
    en el botón de manera automática
  63. y la altura y el ancho son wrap_content.
  64. Necesitamos arreglar
    este espacio vertical de aquí.
  65. Queremos 16dp de empaquetado o margen
  66. entre las vistas de texto
    de "Cantidad" y 0.
  67. También queremos 16dp de empaquetado
    entre el 0 y el botón de "Pedido".
  68. Puedes implementar esto
    de muchas maneras diferentes.
  69. Voy a añadirlo como diseño
    del margen superior para este botón.
  70. Y lo añadiré como margen inferior
    para la vista de texto de "Cantidad".
  71. Si lo prefieres, hazlo de otra manera,
    pero haz que se parezca a este.
  72. He escogido poner un margen superior
    y uno inferior
  73. porque sé que este área de aquí en medio
    más tarde cambiará.
  74. Lo cambiaremos para que sea
    un selector de cantidad,
  75. con un botón de más y menos,
    y aún quiero tener 16dp de espacio
  76. entre el título de cantidad y el selector.
  77. Usaremos el mismo criterio para el botón.
  78. Bien, ejecutémoslo ahora
    otra vez en nuestro dispositivo.
  79. Perfecto, tiene justo
    la apariencia que queríamos.
  80. La vista de texto de "Cantidad"
    está en mayúsculas,
  81. la vista de texto del 0 está
    en una fuente negra y hace16sp de tamaño,
  82. y tenemos el botón de "Pedido" aquí.
  83. También tenemos
    16dp de espacio entre las vistas.
  84. Buen trabajo.
    Oh, casi se me olvida.
  85. El test también pregunta
    qué pasa cuando pulsas este botón.
  86. Bueno, en realidad no pasa nada,
    al menos por ahora.
  87. Sigue atento para descubrir
    qué pasa después.