YouTube

Got a YouTube account?

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

Spanish subtitles

← Add the Other Team in XML

Get Embed Code
13 Languages

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

  1. Antes de empezar con el código,
    voy a contestar a esta pregunta.

  2. Aún solo conozco dos ViewGroups,
    LinearLayouts and RelativeLayouts.
  3. La palabra clave aquí es que estos dos
    deben ocupar un espacio igual.
  4. Usando el peso del layout es
    algo muy fácil de hacer.
  5. Vamos a echarle un vistazo al código.
  6. Ya no estoy trabajando en Java,
  7. así que voy a ir directamente
    a activity_main.xml.
  8. Y aquí está mi archivo XML.
  9. Voy a empezar poniendo todo este código
  10. en otro LinearLayout.
  11. Y este es el LinearLayout padre
    de mis dos miniLinearLayouts.
  12. Voy a mover estas dos líneas aquí arriba,
  13. porque necesitan estar adjuntas
    a la vista raíz.
  14. Añado una llave de cierre.
  15. Android Studio automáticamente
    me pone una etiqueta de cierre aquí.
  16. Lo que voy a hacer es
    cortar esta etiqueta de cierre,
  17. bajar hasta abajo del todo y pegarla.
  18. Bueno, aquí tengo
    una línea roja serpenteante.
  19. Si miro al error, dice que debo definir
    layout_height y layout_width.
  20. ¡Vaya! Hagámoslo.
  21. Como esta es la vista raíz,
    pondré match_parent.
  22. Bueno,
  23. tengo ahora un LinearLayout alrededor
    de su LinearLayout hijo.
  24. Si voy a Preview [vista previa],
    tenemos más o menos lo mismo.
  25. Lo que voy a hacer es
    copiar todo
  26. lo que hay en el LinearLayout
    del equipo A.
  27. Y justo debajo del equipo A,
    voy a pegarlo
  28. y este va a ser
    el LinearLayout del equipo B.
  29. Bueno, ahora todo tiene
    una pinta un poco desorganizada.
  30. Así que pulso Cmd+A, o
    seleccionar todo,
  31. y voy a usar el atajo de teclado
    Cmd+Opción+L
  32. para formatear mi código.
  33. En Windows, eso es Ctrl+Alt+L.
  34. Ahora tiene mejor aspecto.
  35. Quiero asegurarme
    de que entiendes lo que está pasando aquí.
  36. Subimos hasta arriba,
    donde hay un LinearLayout raíz.
  37. Empieza aquí
  38. y si bajo hasta el final, acaba aquí.
  39. Dentro de ese LinearLayout raíz,
    voy a subir de nuevo.
  40. Tengo un layout hijo aquí,
    que empieza aquí.
  41. Bajaré despacio.
  42. Y acaba aquí.
  43. Esto es para el equipo A.
  44. Y tengo otro LinearLayout hijo,
    que empieza aquí.
  45. Bajo despacio.
  46. Y aquí acaba el equipo B.
  47. He visto algo rojo en la parte de arriba,
    así que voy a subir otra vez
  48. a ver qué dice el error.
  49. Orientación equivocada, sin orientación
    especificada. Por defecto es horizontal,
  50. sin embargo este layout tiene
    varios hijos,
  51. de los cuales al menos uno tiene
    un ancho
    match_parent.
  52. Quiero que sea horizontal...
  53. Bueno, vamos a especificar la orientación.
  54. Esto no es técnicamente necesario,
    porque por defecto es horizontal,
  55. pero está bien ser claros.
  56. Y también decía algo
    de que los hijos se cubrían unos a otros.
  57. Voy a hacer clic en vista previa.
  58. Esto no parece haber cambiado demasiado,
  59. a pesar de tomarme la molestia
    de copiar y pegar otro LinearLayout.
  60. Esto quizá tenga que ver
    con el error que acabo de mirar.
  61. Decía que es un layout horizontal.
  62. Así que está intentando presentar
    estos dos LinearLayouts uno junto al otro,
  63. pero el LinearLayout
    tiene un layout_width [ancho]
  64. de match_parent
    que llena la pantalla.
  65. Así que mi primer LinearLayout
    está llenando la pantalla
  66. y el otro LinearLayout estará
    colocado al lado, fuera de la pantalla.
  67. Pensemos qué es lo que queremos
    que pase ahora de verdad.
  68. Queremos que los dos layouts ocupen
    el mismo espacio, uno junto al otro.
  69. Ahora es cuando tenemos que ocuparnos
    de los layout_weights [pesos].
  70. Voy a coger el primer LinearLayout
  71. y darle un layout_weight de 1.
  72. También le daré un ancho de 0.
  73. Podemos ver que ya tenemos
    de hecho dos LinearLayouts,
  74. lo único es no se los muestra
    adecuadamente.
  75. Pero esto está un poco mejor.
  76. Por eso, tengo que darle un layout_weight
    también al segundo LinearLayout,
  77. este de aquí.
  78. Así que voy a bajar.
  79. Aquí está mi segundo LinearLayout.
  80. Voy a hacer exactamente lo mismo.
  81. Voy a decir que tiene
  82. un layout_weight también de 1,
    para darles layout_weights iguales.
  83. Y le voy a poner un ancho de 0.
  84. La razón por la que les doy
    a los dos un ancho de 0
  85. es, básicamente, porque si ninguno
    de los dos lados tiene ancho,
  86. entonces se cogerá todo el espacio extra,
    que es la pantalla entera,
  87. y se dividirá, dando la mitad
    a un lado y la otra mitad al otro.
  88. porque ambos tienen
    el mismo layout_weight.
  89. Si no te queda claro,
    tienes unos enlaces de vídeos
  90. en las notas del profesor
    que tratan sobre layout_weight.
  91. Esto tiene muy buen aspecto,
    salvo que dice equipo A.
  92. Voy a bajar para cambiar esto.
  93. Aquí... a equipo B.
  94. Quizá hayas notado
    que también hay un error aquí.
  95. Ese error ocurre porque tenemos
    una id dos veces.
  96. Recuerda, solo copié y pegué el código,
  97. así que tenemos dos cosas
    que intentan tener la misma id
  98. de team_a_score.
  99. Así que voy a cambiar esto a team_b_score.
  100. Esto tiene muy buen aspecto.
  101. No se ve bien, pero... Haré zoom...
  102. Aquí dice equipo B.
  103. Y todos los botones están bien
    y todas las TextViews están bien,
  104. así que voy a ejecutar
    esto en mi teléfono.
  105. Bueno, tiene muy buen aspecto.
  106. Ahora, si pulso los botones del equipo A,
    se actualiza, así que estupendo.
  107. Si pulso los botones
    del equipo B, pues también.
  108. Esto es especial,
  109. pero recuerda que solo
    queríamos corregir el XML,
  110. sin preocuparnos demasiado Java.
  111. Pero ahora que el XML funciona,
    ¿por qué no arreglar Java?