YouTube

Got a YouTube account?

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

Spanish subtitles

← Width and Height

Get Embed Code
14 Languages

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

  1. Hasta ahora, hemos creado
    una lista de invitados para la fiesta.
  2. ¿La lista de invitados
    para la fiesta de cumpleaños?
  3. Sí.
  4. Espero estar en esa lista.
  5. Bueno, ya veremos...
  6. Vaya... Ahora me siento
    como si fuera un niño pequeño.
  7. Hablando de cosas pequeñas,
  8. vamos a hablar del tamaño
    de las vistas en pantalla.
  9. Hemos utilizado
    la altura corregida, el DP, ¿verdad?
  10. Sí, la anchura y la altura.
  11. También podemos configurar
    cómo se coloca el contenido con la vista.
  12. Es una forma rara de decir que la vista
    va a entrar dentro del contenido.
  13. Si el contenido aumenta, la vista crece.
    Y si disminuye, la vista se ajusta.
  14. Y hay una tercera opción,
  15. que es lo que llamamos match_parent.
  16. Qué extraño...
  17. Suena como si te metieras en una página
    para ligar con padres solteros.
  18. No tiene nada que ver.
  19. "match_parent" significa
    que la vista será
  20. igual de ancha o alta
    que la de su padre.
  21. Tiene sentido.
  22. Yo soy una vista y tengo un padre.
  23. Yo seré igual de ancho
    y largo que mi padre.
  24. Sí, eso es.
    Así que vamos a resumir.
  25. Los valores que se pueden ajustar
    en una vista son la anchura,
  26. corregir DP para la anchura y la altura...
  27. También puedes usar wrap_content.
  28. Y lo siguiente que vamos a probar
    es match_parent.
  29. Veamos unos ejemplos de cómo al ajustar
    la anchura de las diferentes vistas hijas
  30. en una disposición lineal podemos alterar
    la interfaz de usuario final.
  31. En este ejemplo, hemos fijado
    el ancho de cada vista en 200dp.
  32. Si el contenido que está
    dentro de cada vista se pasa de 200dp,
  33. correremos el riesgo
    de que el contenido se corte, como aquí.
  34. En este ejemplo,
    hemos configurado cada vista hija
  35. para que tenga un ancho
    que se ajuste al contenido wrap_content.
  36. Ahora se muestra todo el contenido,
  37. pero el ancho de cada vista varía mucho
    dependiendo de lo que haya dentro de ella.
  38. En este ejemplo, hemos configurado
    el ancho de cada vista hija
  39. para que coincida con el del padre.
  40. Puedes ver que el ancho de cada hijo
  41. es igual
    que el del ViewGroups, el padre.
  42. Independientemente del contenido
    que haya en ellas.
  43. Esos valores pueden aplicarse también
    a la altura de cada vista.
  44. En este ejemplo, hemos fijado
    la altura de la TextView hija a 200dp.
  45. Si el contenido es más alto,
  46. correremos el riesgo
    de que el contenido aparezca cortado.
  47. En este ejemplo,
    hemos configurado la TextView hija
  48. para que se ajuste
    al contenido wrap_content.
  49. Así, se mostrará
    todo el contenido en pantalla
  50. y no habrá ninguna parte cortada,
    porque el tamaño de la TextView
  51. depende del contenido que haya en ella.
  52. En este ejemplo, hemos configurado
    la altura de cada vista hija
  53. para que coincida
    con la del padre match_parent.
  54. Así, la vista hija
    es igual de alta que la de su padre,
  55. independientemente
    del contenido que haya en ella.
  56. Vamos a abrir el visor XML
  57. para intentar ser
    como nuestros padres en el código.
  58. Encontrarás un enlace
    al visor XML con el código base
  59. en las notas del formador, abajo.
  60. En este caso,
    tenemos la LinearLayout en vista root
  61. de esta disposición porque
    es la primera vista y la más exterior.
  62. Si configuramos el ancho y la altura
    a match_parent en esta vista root,
  63. y la configuramos como
    la disposición principal de nuestra app,
  64. esta LinearLayout será tan alta
    y ancha como la pantalla del dispositivo.
  65. Puedo enseñarte cómo configurar
    el fondo de esta LinearLayout
  66. para que tenga un color no transparente.
  67. Si pongo un gris de color de fondo
    en esta LinearLayout,
  68. verás que el gris se extiende
    a lo largo y ancho del dispositivo.
  69. ¿Qué pasaría si trato de cambiar
    el ancho o la altura
  70. de estas TextViews a match_parent?
  71. Para dejar claros
    los extremos de cada vista,
  72. voy a poner un color de fondo
    para cada una de ellas.
  73. Voy a cambiar la altura
    de esta TextView a match_parent.
  74. Recuerda que entre las dos palabras
    hay una barra baja match_parent.
  75. Ahora verás que la TextView
    ocupa toda la altura del padre.
  76. Por desgracia,
    saca todo fuera de la pantalla,
  77. así que no es lo que queremos.
  78. Vamos a volver a poner wrap_content.
  79. Bien.
  80. Vamos a cambiar el ancho
    a match_parent para ver lo que pasa.
  81. El ancho de la TextView
    es igual que el del padre.
  82. Y este, a su vez,
    es igual que el del dispositivo.
  83. Si cambio también
    las otras TextViews a match_parent,
  84. verás que empiezan a ocupar
    todo el ancho que ocupa su padre.
  85. Quiero destacar otra cosa.
  86. Cada vez que veas un atributo
    que empieza por layout con algo más,
  87. como layout_height o layout_width,
  88. en realidad son ViewGroups
    con ajustes de disposición.
  89. Se utilizan por el ViewGroup padre
  90. para determinar el tamaño
    y la posición de las vistas.
  91. Los demás atributos,
    como el de background,
  92. textSize o text,
    dependen de la TextView
  93. como estilo de la propia vista.
  94. Pero estos parámetros de disposición
    del GroupView dependen del padre.
  95. Ahora te toca a ti probar con diferentes
    valores de anchura y altura.
  96. Para acceder al enlace del visor XML
    con el código base,
  97. mira las instrucciones
    del formador, abajo.
  98. Cambia los valores
    de anchura y altura de cada TextView.
  99. Puedes seleccionar un valor fijo de DP,
    wrap_content o match_parent.
  100. Recuerda que para cada vista, la anchura
    y la altura no tienen que coincidir.
  101. Cuando estés,
    marca este recuadro para continuar.