Return to Video

07-23 The Stages - Solution

  • 0:01 - 0:05
    Voy a responder a estas preguntas
    antes de pasar al XML.
  • 0:05 - 0:07
    Lo primero que tenemos que hacer
    es seleccionar las vistas.
  • 0:07 - 0:09
    He dibujado un rectángulo a su alrededor.
  • 0:10 - 0:15
    Hay cinco vistas sin contar la ViewGroup,
    que también se considera una vista.
  • 0:15 - 0:18
    Estas cinco vistas
    son dos TextViews que tenemos aquí arriba
  • 0:18 - 0:19
    y estos tres botones de abajo.
  • 0:19 - 0:24
    Aquí no tenemos ImageViews,
    así que ponemos un cero.
  • 0:25 - 0:28
    Igual os preguntáis por qué he decidido
    que esto sean dos TextViews diferentes.
  • 0:28 - 0:34
    El estilo de Team A y de Score
    son muy diferentes en el producto final.
  • 0:34 - 0:37
    Por eso he decidido
    que sean dos TextViews diferentes.
  • 0:38 - 0:40
    Vamos con el paso dos,
    que es posicionar las vistas.
  • 0:40 - 0:42
    Voy a seleccionar la ViewGroup
    que quiero utilizar aquí.
  • 0:43 - 0:46
    Las dos que me vienen a la cabeza son
    la LinearLayout y la RelativeLayout.
  • 0:47 - 0:53
    Tenemos una columna vertical de vistas,
    así que lo mejor es una LinearLayout.
  • 0:54 - 0:57
    Y, por último, el tercer paso,
    que es el estilo de las vistas.
  • 0:57 - 1:00
    Con eso me pondré
    cuando esté trabajando con el XML.
  • 1:00 - 1:04
    Bueno, vamos ya con el XML.
    Primero quiero ir a la pestaña Text.
  • 1:05 - 1:08
    Lo primero que voy a hacer aquí
  • 1:08 - 1:10
    es borrar unas cosas que no necesito.
  • 1:10 - 1:13
    Voy a empezar borrando esta TextView.
  • 1:13 - 1:17
    También el paddingLeft [rellenoIzquierda]
    el paddingRight [rellenoDerecha],
  • 1:17 - 1:19
    el paddingTop [rellenoArriba]
    y el paddingBottom [rellenoAbajo].
  • 1:20 - 1:23
    Cuidado con no borrar nada importante.
    Muy bien.
  • 1:25 - 1:28
    Ya he dicho que la ViewGroup que usaremos
    no es una RelativeLayout.
  • 1:28 - 1:30
    Es una LinearLayout,
    así que la voy a cambiar ahora mismo.
  • 1:31 - 1:36
    Y dentro de la LinearLayout
    tendremos dos TextViews con tres botones.
  • 1:36 - 1:37
    Voy a empezar a ponerlos.
  • 1:38 - 1:42
    No quiero detallar ahora mismo
    el ancho y la altura de la TextView.
  • 1:43 - 1:45
    De momento, lo dejamos como wrap_content,
  • 1:45 - 1:48
    lo que permitirá que tengamos
    la caja de la TextView rodeando el texto.
  • 1:49 - 1:55
    Establecemos el texto de esta TextView,
    que va a ser Team A.
  • 1:56 - 2:02
    Bueno, vamos a ver cómo ha quedado.
    Aquí está la pequeña TextView Team A.
  • 2:02 - 2:04
    Ahora vamos a hacer un par más.
  • 2:04 - 2:07
    La que vamos a poner debajo será Score
    y también es una TextView.
  • 2:07 - 2:12
    Empezamos escribiendo Text.
    Veo la palabra TextView y le doy a Enter.
  • 2:13 - 2:18
    Aquí también voy a poner wrap_content
    y le voy a añadir el texto.
  • 2:18 - 2:21
    La puntuación suele empezar en cero,
    así que lo vamos a poner aquí.
  • 2:22 - 2:25
    Bien, ahora los botones.
    Empiezo escribiendo la palabra Button.
  • 2:26 - 2:27
    Aquí también vamos a poner wrap_content.
  • 2:28 - 2:32
    El primer botón se va a llamar +3 Points.
  • 2:32 - 2:34
    Ahora copio esto.
  • 2:35 - 2:39
    Lo pego una vez
    y otra vez porque quiero dos botones más.
  • 2:40 - 2:45
    Quiero un botón que se llame +2 Points
    y otro que se llame Free Throw.
  • 2:45 - 2:47
    Vamos a ver cómo ha quedado.
  • 2:48 - 2:54
    Parece que sí tenemos tres botones.
    Veo Team A y el cero.
  • 2:54 - 2:59
    Ya tengo las vistas, pero no se parece
    al resultado final que queremos.
  • 2:59 - 3:01
    Recordad que es una columna vertical.
  • 3:01 - 3:03
    Tengo que cambiar
    la orientación del diseño,
  • 3:03 - 3:05
    así que me voy a poner a ello.
  • 3:05 - 3:09
    Tengo que cambiar la orientación
    porque la quiero vertical.
  • 3:10 - 3:11
    Vale, así está un poco mejor.
  • 3:12 - 3:17
    Estos botones se han expandido
    para rellenar el ancho de la ventana.
  • 3:17 - 3:23
    Así que no voy a utilizar el wrap_content,
    sino el match_parent.
  • 3:23 - 3:24
    Voy a cambiarlo.
  • 3:26 - 3:29
    Ahora tengo puesto match_parent
    en el ancho de todos los botones.
  • 3:29 - 3:33
    A ver qué tal queda.
    Parece que mejor, son más grandes.
  • 3:33 - 3:39
    Vale, aunque parece que el texto
    sigue estando arrinconado en una esquina.
  • 3:40 - 3:43
    Para arreglarlo voy a utilizar un atributo
    que se llama gravity.
  • 3:44 - 3:49
    He abierto Google Drawing
    y voy a crear una caja de texto.
  • 3:50 - 3:54
    Esto es el límite de la vista.
    Voy a escribir Team A
  • 3:55 - 3:57
    y aparecerá por defecto
    en la esquina superior izquierda.
  • 3:58 - 4:01
    Con las TextViews pasa lo mismo
    cuando se escribe un texto.
  • 4:01 - 4:03
    Aparece por defecto
    en la esquina superior izquierda.
  • 4:03 - 4:10
    Con Google Drawing selecciono este texto
    y utilizo el equivalente del atributo.
  • 4:11 - 4:14
    Es una línea que sirve para centrarlo
    dentro de la caja de texto
  • 4:14 - 4:18
    tanto de forma horizontal
    como de forma vertical.
  • 4:19 - 4:20
    Genial.
  • 4:20 - 4:24
    Gravity sirve precisamente
    para coger el contenido de la vista
  • 4:24 - 4:27
    y moverlo dónde sea necesario
    dentro de la propia vista.
  • 4:27 - 4:30
    Puede que os parezca
    similar a algunos métodos de alineamiento
  • 4:30 - 4:34
    de los que usamos con las RelativeLayouts.
    Es cierto, pero el atributo gravity
  • 4:34 - 4:37
    también lo usamos con las LinearLayouts
    y eso lo hace muy potente.
  • 4:37 - 4:39
    Vamos a echarle un vistazo al código.
  • 4:40 - 4:44
    Voy a coger la primera TextView
    y voy a empezar a escribir gravity.
  • 4:45 - 4:49
    Vale, ahora tengo dos opciones:
    layout_gravity y gravity.
  • 4:49 - 4:52
    Ya os he hablado de sus características
    y voy a utilizar esta.
  • 4:53 - 4:58
    Aquí tengo muchas opciones
    y creo que lo voy centrar horizontalmente.
  • 4:58 - 5:00
    Así que voy a seleccionar esta.
  • 5:00 - 5:03
    Vamos a ver una vista previa
    de lo que acabamos de hacer.
  • 5:04 - 5:08
    Parece que no ha cambiado mucho,
    pero todo tiene una explicación.
  • 5:09 - 5:13
    Lo vemos pinchando aquí,
    pero voy a acercarlo para verlo mejor.
  • 5:15 - 5:20
    Aquí pone Team A
    y se ve una especie de límite alrededor.
  • 5:21 - 5:26
    Si os dijera que esto está centrado,
    no me lo podríais discutir.
  • 5:27 - 5:31
    Parece que sí está centrado en la vista,
    aunque es muy pequeña.
  • 5:32 - 5:33
    Vamos a volver a Google Drawing.
  • 5:33 - 5:38
    Es como si hubiese reducido el tamaño
    para ajustarlo al texto.
  • 5:39 - 5:44
    Está centrado, pero no parece diferente
    a cuando estaba a la izquierda.
  • 5:45 - 5:50
    Si quiero centrarlo en el móvil,
    tengo que ajustar la vista a su longitud.
  • 5:50 - 5:52
    Y para eso es necesario
    que modifiquemos la anchura.
  • 5:54 - 5:56
    Bueno, voy a cerrar la vista previa
  • 5:57 - 5:59
    y voy a modificar la anchura.
  • 6:00 - 6:04
    En lugar de poner wrap_content,
    voy a poner match_parent.
  • 6:05 - 6:08
    Vamos de nuevo con la vista previa.
    Fuera el zoom.
  • 6:09 - 6:12
    Ahora está mucho mejor
    y más centrado.
  • 6:12 - 6:14
    Vamos a hacer lo mismo con score.
  • 6:16 - 6:20
    Voy a añadirle a esto gravity también,
    pero no layout_gravity.
  • 6:21 - 6:26
    center_horizontal
    y voy a cambiar el ancho a match_parent.
  • 6:27 - 6:31
    Vamos a comprobarlo de nuevo.
    Vale, ahora está todo centrado.
  • 6:31 - 6:32
    Está quedando genial.
  • 6:32 - 6:36
    Pero parece que está todo apretujado
    y que no hay espacio entre los elementos.
  • 6:37 - 6:40
    Voy a ponerle a cada TextView
    un relleno de 4.
  • 6:42 - 6:46
    Escribimos padding y ponemos 4dp.
  • 6:47 - 6:48
    ¿Os acordáis de eso?
  • 6:48 - 6:52
    He utilizado simplemente padding
    y no padding-bottom o algo por el estilo.
  • 6:52 - 6:55
    Así le hemos proporcionado 4dp
    a toda la TextView.
  • 6:56 - 6:57
    A ver cómo ha quedado en la vista previa.
  • 6:58 - 7:01
    Vale, ya tenemos un poco más de espacio.
  • 7:01 - 7:04
    Ahora voy a hacer lo mismo
    con la TextView de Score.
  • 7:08 - 7:11
    Ahora voy a intentar
    hacer lo mismo con los botones.
  • 7:16 - 7:19
    Parece que no ha servido de mucho.
  • 7:19 - 7:22
    ¿Y si le pongo mejor ocho?
  • 7:24 - 7:25
    ¿20?
  • 7:26 - 7:30
    Qué interesante.
    Parece que ha ensanchado el botón.
  • 7:30 - 7:34
    No quiero que sea más grande el botón,
    sino el espacio que hay a su alrededor.
  • 7:34 - 7:37
    Creo que sería mejor
    utilizar layout_margin [margen].
  • 7:38 - 7:41
    Recordad que padding
    es para añadir relleno dentro de la vista
  • 7:41 - 7:43
    y margin añade espacio
    alrededor de la vista.
  • 7:44 - 7:47
    Vamos a cambiar esto a layout_margin.
    Voy a probar con 8dp.
  • 7:48 - 7:49
    Ahora mucho mejor.
  • 7:50 - 7:53
    Hay más espacio alrededor de la vista
    y entre estas dos vistas.
  • 7:53 - 7:55
    Vamos a hacer lo mismo
    con el resto de botones.
  • 7:56 - 7:58
    Ponemos margen, no relleno.
    Es layout_margin.
  • 8:00 - 8:01
    Ahora está mucho mejor.
  • 8:01 - 8:04
    Si habéis elegido atributos diferentes,
    no pasa nada.
  • 8:04 - 8:08
    Como poner un relleno de cinco
    en lugar de cuatro.
  • 8:08 - 8:11
    Recordad que ahora mismo
    sólo queremos que se pueda leer.
  • 8:12 - 8:15
    Nos encargaremos del tamaño de la letra
    y de los colores más adelante.
  • 8:17 - 8:19
    Bien, buen trabajo.
  • 8:19 - 8:20
    Hemos terminado con este paso.
タイトル:
07-23 The Stages - Solution
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Spanish subtitles

改訂