Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:03
    Aquí tenemos la imagen
    de nuestra app CourtCounter,
  • 0:04 - 0:05
    o del aspecto que queremos que tenga.
  • 0:06 - 0:09
    Voy a seguir mi propio consejo
    y empezar con el XML primero.
  • 0:10 - 0:12
    Pensemos en la situación de las vistas.
  • 0:13 - 0:14
    Tenemos aún todas estas vistas,
  • 0:15 - 0:18
    y estas vistas están
    en LinearLayouts verticales.
  • 0:19 - 0:23
    Tenemos un LinearLayout para el equipo B
    y un LinearLayout para el equipo A,
  • 0:23 - 0:25
    pero no se pueden tener dos vistas raíz.
  • 0:26 - 0:29
    Además, estas están envueltas
    en un LinearLayout,
  • 0:30 - 0:33
    que es horizontal,
    por lo que estos dos LinearLayouts hijos
  • 0:33 - 0:35
    pueden estar uno junto a otro.
  • 0:35 - 0:38
    Queremos añadir un botón
    de Reset por aquí abajo.
  • 0:38 - 0:42
    Para que tu cerebro no explote
    pensando en tantos layouts,
  • 0:42 - 0:46
    quiero que pienses en todo lo que hay en
    este LinearLayout horizontal
  • 0:46 - 0:48
    como si fuera una vista sencilla.
  • 0:48 - 0:53
    Ahora, intenta presentar
    este LinearLayout horizontal de aquí
  • 0:53 - 0:54
    y también el botón Reset.
  • 0:55 - 0:56
    Intentas presentar dos vistas.
  • 0:57 - 1:01
    Una vista está arriba y la otra está
    en la parte de abajo de la pantalla.
  • 1:02 - 1:05
    Y la pregunta ahora es:
    "¿Qué ViewGroup te permite tener
  • 1:06 - 1:09
    una vista arriba del todo y una vista
    en la parte de abajo de la pantalla?
  • 1:10 - 1:13
    Pues un RelativeLayout es
    un buen candidato para esto,
  • 1:13 - 1:18
    Puedo poner un LinearLayout
    aquí, con match_parent en ancho
  • 1:18 - 1:20
    y con wrap_content en alto,
  • 1:21 - 1:25
    y puedo poner el Reset aquí, alineado
    con el centro y con las dos partes.
  • 1:26 - 1:28
    Bueno, tenemos un RelativeLayout
  • 1:28 - 1:33
    y ese RelativeLayout tiene
    un Button hijo y un LinearLayout hijo.
  • 1:33 - 1:36
    El Button hijo es el botón Reset
  • 1:36 - 1:40
    y el LinearLayout es el LinearLayout
    de aquí, el horizontal.
  • 1:40 - 1:43
    Además, este LinearLayout horizontal
    tiene dos hijos
  • 1:44 - 1:46
    y esos hijos son también LinearLayouts.
  • 1:47 - 1:49
    Son el LinearLayout del equipo A
  • 1:49 - 1:51
    y el LinearLayout del equipo B
    que ves aquí.
  • 1:52 - 1:57
    El LinearLayout del equipo A tiene
    dos TextViews y tres Buttons,
  • 1:57 - 1:59
    exactamente igual
    que el LinearLayout del equipo B.
  • 2:00 - 2:02
    Cinco hijos, dos TextViews y tres Buttons.
  • 2:03 - 2:05
    Esta parte del layout, ya la has hecho.
  • 2:05 - 2:08
    Solo necesitas añadir esto.
    Vamos a hacerlo.
  • 2:09 - 2:11
    Estoy en mi código XML
  • 2:11 - 2:16
    y lo primero que voy a hacer es
    el RelativeLayout raíz
  • 2:16 - 2:17
    que vimos en el diagrama.
  • 2:18 - 2:21
    Así que voy a escribir RelativeLayout.
  • 2:23 - 2:26
    Y quiero cortar y pegar estas dos líneas,
  • 2:27 - 2:31
    porque necesitan estar en el layout raíz,
    así que las corto y las pego aquí,
  • 2:32 - 2:37
    en mi layout raíz. Ahora voy
    a cerrar mi RelativeLayout de aquí.
  • 2:37 - 2:40
    Voy a mover esta etiqueta de cierre
  • 2:41 - 2:44
    hasta abajo del todo.
  • 2:46 - 2:50
    Básicamente, lo que tengo ahora es
    esta parte del diagrama.
  • 2:50 - 2:52
    Parece que tengo algunos errores también.
  • 2:53 - 2:57
    Veamos... Sí. No he definido ni la altura
    ni la anchura, así que vamos a hacerlo.
  • 2:59 - 3:02
    My RelativeLayout tenía el botón en medio
    de la parte inferior de la pantalla.
  • 3:02 - 3:05
    Para hacer eso, probablemente tenga
    que llenar la pantalla entera.
  • 3:05 - 3:07
    Así que voy a poner
    match_parent para ambos.
  • 3:09 - 3:11
    Ahora necesito añadir el Button.
  • 3:12 - 3:14
    Voy a bajar, hasta aquí,
  • 3:15 - 3:18
    hasta donde el LinearLayout se cierra.
  • 3:19 - 3:23
    Pero estoy aún dentro del RelativeLayout
    y voy a añadir un Button.
  • 3:23 - 3:26
    Ahora voy a ponerle
    wrap_content a ese Button,
  • 3:27 - 3:30
    porque no es un botón
    que se expanda para llenar
  • 3:30 - 3:33
    toda la parte de abajo de la pantalla
    ni toda la pantalla entera.
  • 3:34 - 3:37
    El padre de este botón
    es el RelativeLayout
  • 3:37 - 3:41
    y vamos a poner como texto
    en este Button Reset.
  • 3:42 - 3:43
    Echemos un vistazo.
  • 3:43 - 3:47
    Mi botón Reset está aquí arriba,
    que no es donde lo quiero,
  • 3:48 - 3:51
    pero su padre es un RelativeLayout
    que llena la pantalla entera.
  • 3:52 - 3:53
    Así que puedo alinearlo con el padre.
  • 3:54 - 3:56
    Quiero alinerlo con la parte
    de abajo del padre
  • 3:57 - 4:01
    y quiero que esté en el centro del padre,
    horizontalmente, por cierto.
  • 4:01 - 4:03
    Bueno, mi botón parece estar
    en el sitio correcto.
  • 4:04 - 4:06
    Voy a seleccionarlo todo aquí,
  • 4:06 - 4:09
    y voy a pulsar Cmd+Option+L en Mac,
  • 4:10 - 4:13
    que es igual que Control+Alt+L
    en Windows,
  • 4:13 - 4:15
    para reformatear el código
    y que quede bonito.
  • 4:16 - 4:18
    Volvamos al código Java.
  • 4:19 - 4:22
    Ahora tengo mi Button,
    pero no está haciendo nada.
  • 4:23 - 4:25
    Empecemos haciéndole un método.
  • 4:26 - 4:29
    Voy a hacerlo justo por encima
    de los métodos de muestra... aquí...
  • 4:29 - 4:32
    public void.
  • 4:32 - 4:34
    Voy a llamar este método
    resetScore [reset marcador],
  • 4:35 - 4:37
    porque eso es lo que quiero que haga.
  • 4:38 - 4:42
    Subo y hago que se ajuste
    a estos otros métodos,
  • 4:43 - 4:46
    con View v,
    y ahora, llaves.
  • 4:47 - 4:50
    No voy a preocuparme
    por lo que pase aquí de momento.
  • 4:50 - 4:52
    Voy a volver a mi código XML
  • 4:53 - 4:57
    y voy a hacer la segunda parte
    del enganche del botón al código Java,
  • 4:57 - 5:01
    añadiendo un atributo onClick
    para resetScore.
  • 5:02 - 5:05
    Ahora, cuando haga clic en este botón,
    se ejecutará este código,
  • 5:06 - 5:07
    pero aquí no hay ningún código.
  • 5:08 - 5:10
    Vamos a pensar qué necesito añadir.
  • 5:11 - 5:13
    Volvamos al debate de PseudoCódigo.
  • 5:14 - 5:17
    Cuando le doy al Reset,
    ¿qué quiero que pase?
  • 5:17 - 5:21
    Quiero que en estos
    dos marcadores ponga 0.
  • 5:21 - 5:24
    Además, quiero que las variables
    de los marcadores del equipo A
  • 5:24 - 5:26
    y del equipo B vuelvan a 0.
  • 5:27 - 5:29
    Recuerda, cuando hago clic
    en cualquiera de estos botones,
  • 5:29 - 5:32
    añado 2y luego muestro la variable.
  • 5:32 - 5:36
    Si no devuelvo la variable a 0,
    va a mostrar un número incorrecto.
  • 5:36 - 5:39
    Esto es lo que he pensado
    gracias al PseudoCódigo.
  • 5:39 - 5:43
    Lo primero que quiero hacer es poner
    a 0 el marcador del equipo A,
  • 5:43 - 5:46
    luego quiero hacer lo mismo
    para el equipo B.
  • 5:46 - 5:49
    Ambos marcadores están a 0,
    pero aún no se ha mostrado nada.
  • 5:50 - 5:55
    Por eso, en el paso 3 mostraré el marcador
    del equipo A, que se ha puesto a 0.
  • 5:56 - 6:00
    Para ser más precisos, voy a mostrar
    el marcador del equipo A aquí
  • 6:01 - 6:03
    y luego voy a mostrar
    el marcador del equipo B aquí.
  • 6:04 - 6:07
    Como en los pasos 1 y 2
    me he asegurado de ponerlos a 0,
  • 6:08 - 6:10
    mostrarán 0 aquí y aquí.
  • 6:10 - 6:12
    Cuando haga clic
    en cualquiera de estos botones
  • 6:12 - 6:15
    para actualizar ScoreForTeamA
    o ScoreForTeamB,
  • 6:16 - 6:18
    van a actualizarse, pero partiendo
    de un marcador de 0.
  • 6:19 - 6:23
    Entonces, en el marcador de reset
    pondré mi PseudoCódigo en código bueno.
  • 6:24 - 6:29
    Lo primero que voy a hacer es coger
    el marcador A y darle el valor de 0
  • 6:29 - 6:34
    usando este operador
    de asignación y el valor de 0.
  • 6:34 - 6:36
    No nos olvidemos del punto y coma, claro.
  • 6:37 - 6:39
    Haré lo mismo para el marcador B.
  • 6:42 - 6:47
    Después de eso, voy a mostrar donde
    el equipo A, el marcador del equipo A.
  • 6:49 - 6:53
    Y luego, donde el equipo B,
    mostraré el marcador del equipo B.
  • 6:55 - 6:57
    También quiero añadir aquí un comentario.
  • 6:59 - 7:00
    Bueno, todo esto parece razonable
  • 7:00 - 7:02
    y hace mucho que no ejecuto nada
    en mi teléfono,
  • 7:02 - 7:04
    así que voy a darle a Run [ejecutar].
  • 7:05 - 7:08
    Estupendo. Tengo un botón Reset.
  • 7:08 - 7:09
    Veamos si funciona.
  • 7:13 - 7:15
    Bien, se pone a 0.
  • 7:15 - 7:16
    Hagamos clic un poco más,
  • 7:16 - 7:19
    para asegurarnos de que todo
    sigue funcionando.
  • 7:24 - 7:26
    Bien, y tiene el aspecto
    de lo es, impresionante.
  • 7:28 - 7:30
    Esto ha sido complicado.
  • 7:30 - 7:34
    Ahora deja que te muestre qué pasaría
    si quisieras cambiar el orden,
  • 7:34 - 7:35
    hacer algo un poco diferente.
  • 7:36 - 7:38
    ¿Y si intercambiamos estos dos?
  • 7:39 - 7:41
    Vamos a ver qué pasa.
  • 7:42 - 7:45
    Ya está. Vamos a ver qué pasa.
  • 7:46 - 7:48
    Voy a añadir algunos puntos.
  • 7:49 - 7:51
    Ahora, el momento de la verdad.
    Botón Reset.
  • 7:53 - 7:56
    No parece que haga nada.
  • 7:56 - 7:59
    Si hacemos clic... Vaya, qué interesante.
  • 7:59 - 8:01
    No es fácil verlo.
  • 8:01 - 8:05
    El marcador decía antes 9,
    le dí a Reset y nada cambió,
  • 8:05 - 8:08
    pero cuando le di a tiro libre, mostró 1.
  • 8:10 - 8:12
    Ahora la otra parte,
    si le doy a +2 puntos...
  • 8:12 - 8:14
    Vaya, muestra 2.
  • 8:14 - 8:17
    Miremos el código de nuevo
    para ver qué está pasando.
  • 8:18 - 8:21
    Antes intercambié display [mostrar]
    y el ajuste del marcador
  • 8:21 - 8:24
    solo para ver qué tipo de error
    de funcionamiento habría.
  • 8:25 - 8:29
    Digamos que el equipo A tiene un marcador
    de 30 y el equipo B un marcador de 40.
  • 8:30 - 8:33
    Cuando digo displayForTeamA
    va a mostrar 30.
  • 8:33 - 8:36
    Cuando digo displayForTeamB
    va a mostrar 40.
  • 8:37 - 8:41
    Solo después de eso se pondrán
    estos valores a 0,
  • 8:41 - 8:45
    pero como mostró primero
    no vamos a ver los valores de 0.
  • 8:46 - 8:48
    Aunque la variable sea 0.
  • 8:48 - 8:52
    Así, cuando presiono algo como
    addThreeForTeamB,
  • 8:53 - 8:57
    va a tomar el valor de 0, que puse aquí,
  • 8:57 - 9:00
    añadir 3 y luego mostrar 3.
  • 9:00 - 9:05
    Por eso, nos parecería que el equipo B
    pasaría de tener un marcador de 30
  • 9:06 - 9:11
    a, tras hacer clic en Reset, un marcador
    de 3, lo que es un salto curioso.
  • 9:12 - 9:15
    Una manera de arreglar esto,
    además de volverlo a como debe estar,
  • 9:15 - 9:18
    es que podría mostrar0 aquí.
  • 9:19 - 9:22
    Esto lo puedes probar tú solo,
    pero verás que funciona,
  • 9:22 - 9:24
    aunque sea poco intuitivo.
  • 9:25 - 9:27
    Me gusta poner ejemplos como este,
  • 9:27 - 9:30
    porque muestra la belleza
    y la subjetividad del código.
  • 9:31 - 9:34
    En este caso, sin embargo, creo firmemente
  • 9:34 - 9:36
    que el código
    de la primera manera era mejor.
  • 9:36 - 9:40
    Pronto verás situaciones en las que haya
    dos maneras distintas de poner el código,
  • 9:40 - 9:42
    y que ambas sean técnicamente correctas.
  • 9:43 - 9:45
    Como no hay siempre
    una sola respuesta correcta,
  • 9:45 - 9:49
    no deberías sentir la presión
    de hacer las cosas de modo ortodoxo.
  • 9:49 - 9:53
    Intenta hacer a tu manera un código
    que funcione, mira lo que hacen otros
  • 9:53 - 9:57
    y luego decide quién es más eficiente,
    de quién es el código más claro.
  • 9:58 - 10:01
    Este tipo de debates pueden
    ayudarte a aprender mucho.
  • 10:01 - 10:04
    Bueno, voy a devolver él código
    al estado en que estaba antes,
  • 10:04 - 10:05
    que funcionaba bien.
  • 10:05 - 10:10
    Tengo toda la funcionalidad de mi app,
    pero no es muy bonita. Arreglemos eso.
Title:
07-42 Add the Reset Button
Description:

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

Spanish subtitles

Revisions