Return to Video

02-20 Relleno vs. Margen

  • 0:00 - 0:02
    Buen trabajo hasta ahora.
  • 0:02 - 0:05
    Vas bien en el camino
    de construir diseños geniales.
  • 0:05 - 0:09
    Pero veo un problema con casi todos
    los diseños creados hasta ahora.
  • 0:09 - 0:12
    Las vistas están contra el borde
    del ViewGroup
  • 0:12 - 0:14
    o arriba contra el dispositivo.
  • 0:14 - 0:17
    Para los diseños construidos
    en esta lección hasta ahora
  • 0:17 - 0:20
    podríamos añadirles
    un poco más de pulimento visual,
  • 0:20 - 0:24
    así serán más bonitos añadiéndoles
    un poco más de espacio en blanco.
  • 0:24 - 0:26
    Lo haremos usando
    los conceptos de relleno y margen,
  • 0:26 - 0:28
    que abarcaremos en este video.
  • 0:28 - 0:31
    Por ejemplo, podríamos añadir un poco
    más de espacio blanco aquí, aquí
  • 0:31 - 0:34
    o incluso arriba,
    para que las vistas no se amontonen
  • 0:34 - 0:38
    contra el borde del grupo padre
    ni contra el borde del dispositivo.
  • 0:38 - 0:39
    Es una decisión de diseño,
  • 0:39 - 0:42
    porque a veces quieres que vaya
    de borde a borde,
  • 0:42 - 0:45
    para dar el efecto de imagen sin bordes
    del que hablé antes.
  • 0:45 - 0:49
    Pero puedes usar espacio en blanco
    para añadir espacio vital,
  • 0:49 - 0:53
    para que el contenido sea
    un poco más fácil de leer y escanear.
  • 0:53 - 0:57
    Te mostraré el efecto de añadir
    relleno o margen a tu vista.
  • 0:57 - 0:59
    Empecemos con una TextView
    que diga ¡Hola!.
  • 0:59 - 1:02
    Si añadimos 8 dips
    de relleno a la vista,
  • 1:02 - 1:05
    se hace 8 dips más grande
    en cada dirección.
  • 1:05 - 1:09
    Si añadimos 8 dips de margen
    al diseño de la TextView,
  • 1:09 - 1:11
    se vería así.
  • 1:11 - 1:13
    Para añadir un margen,
    necesitas ponerlo dentro un ViewGroup
  • 1:13 - 1:16
    por eso lo tengo dentro de
    este LinearLayout aquí.
  • 1:16 - 1:19
    El LinearLayout
    toma la vista de texto original
  • 1:19 - 1:21
    y le pone un margen de 8 dips.
  • 1:21 - 1:23
    A la izquierda y arriba.
  • 1:23 - 1:26
    Y también a los lados.
  • 1:26 - 1:28
    Aunque declares relleno o margen,
  • 1:28 - 1:30
    en una TextView hija,
  • 1:30 - 1:33
    el relleno es manejado
    por la propia TextView,
  • 1:33 - 1:36
    mientras que el margen es manejado
    por el ViewGroup padre.
  • 1:36 - 1:38
    Si ejecutaras ambos en
    un dispositivo real,
  • 1:38 - 1:40
    y no tuvieras un fondo
    para la TextView
  • 1:40 - 1:43
    técnicamente los dos lucirían igual.
  • 1:43 - 1:46
    El texto empezaría a 8 dips
    desde la izquierda,
  • 1:46 - 1:48
    y 8 dips por debajo
    del tope del dispositivo.
  • 1:48 - 1:52
    Sin embargo, si tienes un color de fondo
    para la TextView,
  • 1:52 - 1:55
    el usuario podría ver
    que la TextView es así de grande,
  • 1:55 - 1:59
    mientras que en el otro dispositivo
    solo se vería de este tamaño.
  • 1:59 - 2:01
    Aquí hay un código para visualizar
    relleno en una vista.
  • 2:02 - 2:06
    En el elemento XML TextView,
    declaras un nuevo atributo que diga,
  • 2:06 - 2:11
    android:padding = "8 dp"
  • 2:11 - 2:13
    Puedes elegir el tamaño
    que quieras para el relleno
  • 2:13 - 2:15
    siempre que sea un valor dip.
  • 2:15 - 2:19
    Cuando especificamos 8 dips de relleno,
    añade 8 dips a los bordes
  • 2:19 - 2:22
    superior, inferior, izquierdo y derecho
    de la TextView.
  • 2:22 - 2:25
    En vez de usar el atributo de relleno
    general de android,
  • 2:25 - 2:29
    puedes también separarlo en
    izquierda, derecha, arriba o abajo.
  • 2:29 - 2:33
    En esencia, estas cuatro líneas de código
    hacen lo mismo que esta línea.
  • 2:33 - 2:34
    Pero estos controles más específicos
  • 2:34 - 2:37
    te permiten tener diferentes
    valores de relleno
  • 2:37 - 2:39
    para la izquierda, la derecha,
    arriba o abajo.
  • 2:39 - 2:41
    No es necesario tener
    un mismo valor de relleno
  • 2:41 - 2:43
    para las cuatro direcciones.
  • 2:43 - 2:46
    El valor por defecto del relleno es 0,
  • 2:46 - 2:48
    así que si especificas relleno
    a izquierda, derecha y arriba
  • 2:48 - 2:52
    pero no abajo, el relleno será
    de cero dips en la parte inferior.
  • 2:52 - 2:56
    Para especificar el margen,
    añades un atributo de nuevo a la TextView.
  • 2:56 - 2:59
    El nombre del atributo es
    android:layout_margin,
  • 2:59 - 3:03
    podemos hacerlo igual,
    por ejemplo, a 8 dips.
  • 3:03 - 3:07
    Esto coloca a la TextView hija
    a 8 dips desde todos los bordes del padre.
  • 3:07 - 3:12
    Si hubiese otra TextView hija aquí arriba,
    dejar un margen podría ponerla
  • 3:12 - 3:15
    a 8 dips por debajo
    de la primera TextView.
  • 3:16 - 3:19
    Puedes pensar del margen
    como un pequeño campo de fuerza
  • 3:19 - 3:20
    alrededor de esta vista.
  • 3:20 - 3:24
    Ninguna otra vista puede penetrar
    esta región de 8 dips alrededor.
  • 3:24 - 3:26
    O puedes también diferenciar
    el margen del diseño
  • 3:26 - 3:28
    en cualquiera de las cuatro direcciones,
  • 3:28 - 3:32
    margen izquierdo del diseño,
    margen derecho del diseño, arriba y abajo.
  • 3:32 - 3:34
    Si no especificas
    ninguno de estos valores,
  • 3:34 - 3:36
    serán cero por defecto.
  • 3:36 - 3:39
    Para recordar que el ViewGroup
    posiciona a estos hijos
  • 3:39 - 3:42
    en base a los márgenes,
    puedes mirar los atributos.
  • 3:42 - 3:45
    Todos empiezan con layout_margin.
  • 3:45 - 3:48
    De ese modo sabes que el ViewGroup
    es el que maneja la posición
  • 3:48 - 3:49
    de estas vistas.
  • 3:50 - 3:53
    El relleno y el margen
    se pueden aplicar a todas las vistas.
  • 3:53 - 3:56
    Pongamos en práctica
    los atributos que hemos aprendido.
  • 3:56 - 3:58
    Aquí tenemos tres TextView
    en un LinearLayout.
  • 3:58 - 4:01
    Todas están apretadas
    hacia el borde izquierdo de la pantalla,
  • 4:01 - 4:03
    así que quiero añadir
    un poco más de espacio.
  • 4:03 - 4:05
    Probemos de añadir algo de margen.
  • 4:06 - 4:08
    Genial, ahora hay más espacio
    alrededor de esta TextView.
  • 4:09 - 4:11
    Haré lo mismo con las otras dos TextView.
  • 4:12 - 4:17
    Interesante, entonces aquí hay 16 dips,
    pero en realidad son 32 dips
  • 4:17 - 4:20
    porque hay 8 dips en el margen inferior
    de la primera TextView
  • 4:20 - 4:23
    y 8 dips en el margen superior
    de la segunda TextView.
  • 4:23 - 4:25
    Si queremos que el espaciado
    sea consistente,
  • 4:25 - 4:27
    para que siempre haya
    16 dips entre cada vista,
  • 4:27 - 4:30
    tenemos que cambiar el margen aquí.
  • 4:30 - 4:33
    Puedo diferenciar
    los valores individuales de margen.
  • 4:33 - 4:36
    Con este código, tengo
    un margen izquierdo de 16 dips
  • 4:36 - 4:38
    y un margen superior de 16 dips.
  • 4:38 - 4:41
    No hay margen inferior
    para esta primera TextView,
  • 4:41 - 4:44
    así que este espacio intermedio
    ahora es de 16 dips.
  • 4:44 - 4:47
    Lo mismo para la última TextView.
  • 4:47 - 4:50
    Genial, ahora todo
    el espaciado vertical es igual.
  • 4:50 - 4:51
    Antes cuando dije que añadiríamos
  • 4:51 - 4:53
    espacio blanco a los bordes
    de estas vistas,
  • 4:53 - 4:56
    técnicamente ese espacio es trasparente.
  • 4:56 - 4:59
    Puedes ver qué hay detrás.
  • 4:59 - 5:02
    En este caso tenemos
    un fondo gris del ViewGroup.
  • 5:02 - 5:05
    El diseño se verá igual en el dispositivo
    tanto si usamos margen o relleno
  • 5:05 - 5:09
    porque en este caso no tenemos
    color de fondo en la TextView.
  • 5:10 - 5:12
    Añadámoslo y veamos donde están
    los límites de cada vista.
  • 5:13 - 5:16
    Bien, ahora hay un color de fondo
    en la primera TextView.
  • 5:16 - 5:18
    Cuando añadimos los márgenes
    izquierdo y superior,
  • 5:18 - 5:19
    vemos que el ViewGroup
  • 5:19 - 5:23
    empuja a la TextView
    a 8 por encima y 8 por debajo.
  • 5:23 - 5:24
    Podemos cambiar esto al relleno,
  • 5:24 - 5:27
    y ahora vemos que la TextView
    es más grande
  • 5:27 - 5:30
    y ocupa esos 8 dips de espacio
    a la izquierda y arriba.
  • 5:30 - 5:33
    Visualmente, las cosas podrían
    aparecer distintas en el dispositivo,
  • 5:33 - 5:35
    ya sea que tengas relleno o margen.
  • 5:35 - 5:38
    si hay un color de fondo en la TextView.
  • 5:38 - 5:40
    Podemos hacer lo mismo
    con las otras vistas
  • 5:40 - 5:41
    para que veas que está bien.
  • 5:42 - 5:45
    Añadir valores de relleno y margen
    no está restringido a estas vistas hijas,
  • 5:45 - 5:48
    también puedes añadirlo al ViewGroup.
  • 5:48 - 5:51
    Si añado un valor de relleno
    al LinearLayout.
  • 5:51 - 5:55
    Puedes ver que desplaza las vistas
    en 16 dips en todas direcciones.
  • 5:55 - 5:57
    Mencioné que podrías establecer
  • 5:57 - 5:59
    cualquier valor
    para un relleno o margen.
  • 5:59 - 6:01
    Pero, ¿cómo saber qué valor escoger?
  • 6:01 - 6:06
    Las normas de diseño recomiendan
    que uses incrementos de 8 dips.
  • 6:06 - 6:08
    Esto es conocimiento un poco más avanzado,
  • 6:08 - 6:10
    pero en esencia queremos
    que los componentes
  • 6:10 - 6:13
    se alineen en la pantalla
    a lo largo de esta cuadrícula de 8 dips.
  • 6:13 - 6:16
    Los cuadrados no aparecen
    en realidad en la pantalla,
  • 6:16 - 6:18
    pero si quieres posicionar el texto aquí,
  • 6:18 - 6:21
    podrías moverlo
    dos cuadrados a la izquierda.
  • 6:21 - 6:25
    Dos cuadrados en esta cuadrícula
    es igual a 16 dips.
  • 6:25 - 6:26
    En esta pantalla de email,
  • 6:26 - 6:29
    todos los iconos están
    alineados en esta columna.
  • 6:29 - 6:33
    Están posicionados a 16 dips
    del borde izquierdo de la pantalla,
  • 6:33 - 6:35
    y todo el texto de aquí está posicionado
  • 6:35 - 6:38
    a 72 dips del borde
    izquierdo de la pantalla.
  • 6:38 - 6:42
    Puedes imaginarte que el contenido
    sigue ciertas líneas aquí.
  • 6:42 - 6:44
    Este es otro modo de visualizarlo.
  • 6:44 - 6:47
    En esta captura de pantalla
    de la aplicación Google I/O,
  • 6:47 - 6:51
    tenemos el contenido
    alineado con esta columna a 16 dips,
  • 6:51 - 6:54
    así como con esta columna a 72 dips.
  • 6:54 - 6:57
    Son 72 dips desde
    el borde izquierdo de la pantalla.
  • 6:57 - 6:59
    Y en este borde,
  • 6:59 - 7:03
    el contenido termina a 16 dips
    antes del borde derecho de la pantalla.
  • 7:03 - 7:05
    En la tablet, tienes
    más espacio en pantalla,
  • 7:05 - 7:07
    así que puedes tener
    un poco más de relleno.
  • 7:07 - 7:10
    Podrías tener 24 dips
    desde el borde izquierdo de la pantalla,
  • 7:10 - 7:12
    y así para los otros valores.
  • 7:12 - 7:14
    La razón por la que
    recomendamos esos valores
  • 7:14 - 7:17
    es que el contenido sea fácil de leer.
  • 7:17 - 7:20
    Por ejemplo, si este título
    se desplazara un par de píxeles,
  • 7:20 - 7:24
    y el subtexto se moviera a la derecha
    un par de píxeles,
  • 7:24 - 7:26
    habría un borde dentado aquí.
  • 7:26 - 7:30
    Y distraería al usuario
    de leer el contenido.
  • 7:30 - 7:35
    Así, alinear todo hace que tu aplicación
    sea más fácil de leer y usar.
  • 7:35 - 7:38
    He aquí un par de ejemplos de la vida real
    sobre el uso de relleno y margen.
  • 7:38 - 7:40
    En esta captura de pantalla
    de la aplicación Google Calendar
  • 7:40 - 7:44
    vemos texto que está desplazado
    un poco desde aquí.
  • 7:44 - 7:47
    Hay también un poco de espacio
    entre los eventos de ese calendario.
  • 7:47 - 7:48
    Si lo implementamos usando el relleno,
  • 7:48 - 7:52
    esta imagen de fondo probablemente
    se extendería sobre el espacio blanco.
  • 7:52 - 7:54
    En vez si usamos márgenes,
  • 7:54 - 7:56
    hay una pequeña zona
    alrededor de la vista.
  • 7:56 - 7:58
    Así que probablemente sea margen.
  • 7:58 - 7:59
    Aquí hay otra captura de pantalla
  • 7:59 - 8:02
    de la página detallada
    para un evento del calendario.
  • 8:02 - 8:06
    Hay mucho texto aquí y parece
    haber espaciados mayores que otros.
  • 8:06 - 8:09
    Podemos crear ese espaciado mayor
    añadiendo relleno.
  • 8:09 - 8:10
    Para espaciar esto,
  • 8:10 - 8:13
    puedes añadir relleno
    abajo de esta TextView,
  • 8:13 - 8:15
    o puedes añadir relleno
    arriba de esta vista.
  • 8:16 - 8:18
    Ambos podrían funcionar.
  • 8:18 - 8:21
    O podrías incluso implementarlo
    usando diseño de margen.
  • 8:21 - 8:22
    No puedes notar la diferencia
  • 8:22 - 8:25
    entre usar diseño de margen
    o de relleno en este caso
  • 8:25 - 8:28
    porque el fondo del texto usado
    es transparente.
  • 8:28 - 8:29
    Ahora es tu turno de practicar
  • 8:29 - 8:32
    configurando diferentes valores
    de relleno y margen.
  • 8:32 - 8:34
    Hemos proporcionado un código inicial
  • 8:34 - 8:36
    para que empieces,
    usando el enlace debajo.
  • 8:36 - 8:39
    Cuando te familiarices con los valores
    de relleno y margen,
  • 8:39 - 8:40
    avanza y trata de construir este diseño.
  • 8:41 - 8:46
    Por cierto, este texto está situado
    a 16 dips de estas esquinas.
  • 8:46 - 8:49
    Pero hay solo 8 dips
    entre las dos TextViews.
  • 8:49 - 8:51
    Cuando termines, marca esta casilla
Title:
02-20 Relleno vs. Margen
Description:

02-20 Relleno vs. Margen

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

Spanish subtitles

Revisions Compare revisions