Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    Bom trabalho até agora.
  • 0:02 - 0:04
    Você está indo bem em direção
    à construção de ótimos layouts.
  • 0:04 - 0:09
    No entanto, vejo um problema com quase
    todos os layouts construídos até agora.
  • 0:09 - 0:13
    As views estão bem juntas
    da borda do ViewGroup
  • 0:13 - 0:14
    ou lá em cima contra o dispositivo.
  • 0:14 - 0:17
    Para todos os layouts que contruímos
    neste curso até agora,
  • 0:17 - 0:20
    podíamos dar uma melhorada
    no visual deles,
  • 0:20 - 0:23
    para ficarem mais bonitos adicionando
    um pouco mais de espaço branco.
  • 0:23 - 0:26
    Faremos isso usando os conceitos
    de padding [espaçamento interno]
  • 0:26 - 0:29
    e de margin [espaçamento externo],
    que abordaremos neste vídeo.
  • 0:29 - 0:31
    Por exemplo, podíamos pôr um pouco
    mais de espaço branco aqui, aqui,
  • 0:31 - 0:34
    ou até no topo, para que as views
    não fiquem tão cheias
  • 0:34 - 0:38
    contra o canto do parent
    ou contra o canto do dispositivo.
  • 0:38 - 0:39
    É realmente uma decisão de design,
  • 0:39 - 0:42
    porque, às vezes, queremos mesmo
    que vá de uma ponta à outra,
  • 0:42 - 0:45
    como para a imagem sangrada completa
    da qual falei antes.
  • 0:45 - 0:47
    Mas, em todo caso,
    podemos usar espaço branco,
  • 0:47 - 0:49
    para adicionar um pouco mais
    de espaço para respirar,
  • 0:49 - 0:53
    Para que o conteúdo fique mais fácil
    de ser lido e explorado.
  • 0:53 - 0:56
    Vou mostrar o efeito ao adicionar
    padding ou margin em uma view.
  • 0:56 - 0:59
    Vamos começar com uma TextView
    que diz "Olá".
  • 0:59 - 1:02
    Se adicionarmos oito camadas
    de padding à view,
  • 1:02 - 1:05
    então, se torna maior em oito dips
    em cada direção aqui.
  • 1:05 - 1:08
    Se adicionarmos margin de layout
    de oito dips na TextView,
  • 1:08 - 1:11
    então é assim que ficaria.
  • 1:11 - 1:13
    Para adicionar um margin,
    é preciso colocá-lo em um ViewGroup,
  • 1:13 - 1:16
    então é por isso que tenho isto
    neste layot linear aqui.
  • 1:16 - 1:19
    O layout linear é o que pega
    a TextView original
  • 1:19 - 1:21
    e a empurra em oito dips.
  • 1:21 - 1:23
    Da esquerda e do topo.
  • 1:23 - 1:25
    E também dos lados.
  • 1:25 - 1:28
    Então, apesar de você declarar
    padding ou margin
  • 1:28 - 1:33
    na TextView filha, o padding
    é manipulado pela TextView.
  • 1:33 - 1:36
    Enquanto que o margin é manipulado
    pelo parent ViewGroup.
  • 1:36 - 1:40
    Se você usa ambos em um dispositivo real,
    e não tem um fundo para a TextView,
  • 1:40 - 1:43
    então, tecnicamente,
    ambos teriam o mesmo visual.
  • 1:43 - 1:46
    O texto começaria a oito dips,
    a partir da esquerda,
  • 1:46 - 1:48
    e oito dips abaixo do topo do dispositivo.
  • 1:48 - 1:52
    Mas, se você tiver uma cor de fundo
    para a TextView,
  • 1:52 - 1:55
    então o usuário poderia ver
    que a TextView tem este tamanho.
  • 1:55 - 1:59
    Ao passo que, no outro dispositivo,
    a TextView teria apenas este tamanho.
  • 1:59 - 2:01
    Aqui está um código para exibição
    de padding numa view.
  • 2:02 - 2:06
    No Elemento de XML TextView,
    você declararia um novo atributo que diz:
  • 2:06 - 2:10
    android : padding = "8 dp"
  • 2:10 - 2:13
    Você pode escolher qualquer tamanho
    que quiser para o padding,
  • 2:13 - 2:15
    contanto que seja um valor dip.
  • 2:15 - 2:18
    Quando especificamos oito dips
    de padding, ele adiciona 8 dips
  • 2:18 - 2:22
    na esquerda, no topo, na parte inferior,
    e nas bordas direitas da TextView.
  • 2:22 - 2:25
    Ao invés de usar o atributo geral
    de padding do android,
  • 2:25 - 2:29
    pode-se ainda dividir para a esquerda,
    direita, topo ou parte inferior.
  • 2:29 - 2:32
    Essencialmente, estas quatro linhas
    de código fazem o mesmo que esta linha.
  • 2:32 - 2:35
    Mas, estes controles refinados de ajuste
    permitem que você tenha
  • 2:35 - 2:39
    valores de padding diferentes
    à esquerda ou direita, no topo ou abaixo.
  • 2:39 - 2:41
    Não é preciso ter um valor
    de padding igual
  • 2:41 - 2:43
    para todas as quatro direções.
  • 2:43 - 2:47
    O valor padrão para padding é zero,
    e se especificar padding de esquerda,
  • 2:47 - 2:49
    de direita e de topo,
    mas não de parte inferior,
  • 2:49 - 2:52
    então terá padding-bottom de zero dips.
  • 2:52 - 2:56
    Para especificar margin, você adiciona
    um atributo à TextView, novamente.
  • 2:56 - 2:59
    O nome do atributo é
    android : layout_margin = "8 dp"
  • 2:59 - 3:02
    podemos determinar o mesmo para,
    por exemplo, oito dips.
  • 3:02 - 3:07
    Isto move a TextView filha em 8 dips
    do parent em todas as margens.
  • 3:07 - 3:12
    Se houvesse outra TextView filha,
    no topo aqui, ter um margin
  • 3:12 - 3:15
    empurraria esta TextView oitos dips
    abaixo daquela TextView.
  • 3:16 - 3:19
    Pense que ter um margin é como
    ter um pequeno campo de força
  • 3:19 - 3:20
    ao redor desta view.
  • 3:20 - 3:24
    Nenhuma outra view pode entrar
    nesta região de oito dips ao redor.
  • 3:24 - 3:28
    Ou você pode dividir o margin de layout
    em cada uma das quatro direções,
  • 3:28 - 3:32
    layout marginLeft, layout marginRight,
    topo e parte inferior.
  • 3:32 - 3:36
    Se não especificar nenhum desses valores,
    então vai padronizar para zero.
  • 3:36 - 3:39
    Para lembrar que o ViewGroup
    é o que posiciona essas filhas
  • 3:39 - 3:42
    baseadas na margem,
    você pode consultar atributos.
  • 3:42 - 3:45
    Todos começam com layout_
    para margin.
  • 3:45 - 3:48
    Assim, você sabe que o ViewGroup
    é o que está manipulando
  • 3:48 - 3:49
    a posição destas views.
  • 3:50 - 3:53
    Padding e margin podem
    se aplicados a todas as views.
  • 3:53 - 3:56
    Vamos praticar os atributos
    que acabamos de conhecer.
  • 3:56 - 3:58
    Aqui tenho três TextViews
    em um layout linear.
  • 3:58 - 4:01
    Elas estão todas esmagadas
    contra a borda esquerda da tela,
  • 4:01 - 4:02
    então quero pôr um pouco mais de espaço.
  • 4:03 - 4:05
    Vamos iniciar tentando
    pôr um pouco mais de margin.
  • 4:06 - 4:08
    Ótimo! Agora, temos mais espaço
    ao redor desta TextView.
  • 4:09 - 4:11
    Farei o mesmo para as outras duas
    TextViews.
  • 4:12 - 4:17
    Interessante. Então, temos 16 dips aqui,
    mas é, na verdade, 32 dips,
  • 4:17 - 4:20
    porque está pegando oito dips do margin
    inferior da primeira TextView
  • 4:20 - 4:23
    e oito dips do margin superior
    da segunda TextView.
  • 4:23 - 4:25
    Se quisermos que o espaçamento
    seja consistente,
  • 4:25 - 4:30
    então é sempre 16 dips entre cada view,
    temos que mudar o margin aqui.
  • 4:30 - 4:33
    Posso quebrar em dois valores
    individuais de margin.
  • 4:33 - 4:38
    Com este código, tenho um margin esquerdo
    de 16 dips e um superior de 16 dips.
  • 4:38 - 4:40
    Não há margin inferior desta TextView,
  • 4:40 - 4:44
    então este espaço no centro
    está correto em 16 dips, agora.
  • 4:44 - 4:47
    O mesmo acontecerá com a última TextView.
  • 4:47 - 4:49
    Legal. Agora todo o espaçamento
    vertical está igual.
  • 4:50 - 4:53
    Quando disse antes que estamos pondo
    espaço branco nas bordas destas views,
  • 4:53 - 4:56
    tecnicamente, o espaço é transparente.
  • 4:56 - 4:59
    Dá pra ver através dele
    o que está por trás.
  • 4:59 - 5:02
    Neste caso, temos um fundo cinza
    no ViewGroup.
  • 5:02 - 5:06
    O layout seria o mesmo no dispositivo
    se usássemos margin ou padding,
  • 5:06 - 5:09
    porque, neste caso, não temos
    cor de fundo na TextView.
  • 5:10 - 5:12
    Vamos pôr isso e ver onde estão
    os limites de cada view.
  • 5:13 - 5:16
    Ok. Agora temos uma cor de fundo
    nesta primeira TextView.
  • 5:16 - 5:19
    Quando pomos o margin esquerdo
    e superior, vimos que ViewGroup
  • 5:19 - 5:23
    empurra TextView para fora em oito
    e para baixo em oito.
  • 5:23 - 5:27
    Podemos mudar isto para padding,
    e vemos então que TextView é maior
  • 5:27 - 5:30
    e toma 8 dips de espaço à esquerda
    e na parte superior.
  • 5:30 - 5:33
    Então, visualmente, as coisas seriam
    diferentes no dispositivo,
  • 5:33 - 5:35
    quer você tenha padding ou margin.
  • 5:35 - 5:38
    Se há uma cor de fundo nesta TextView.
  • 5:38 - 5:41
    Podemos fazer o mesmo para as outras
    views, então você vê isso também.
  • 5:42 - 5:44
    Adicionar valores de padding e de margin
    não se restringe apenas
  • 5:44 - 5:48
    a essas Views filhas, você também pode
    adicioná-los ao ViewGroup.
  • 5:48 - 5:50
    Se eu pôr um valor de padding
    para o layout linear,
  • 5:50 - 5:55
    então você vê que ele muda as views
    em 16 dips, em todas as direções.
  • 5:55 - 5:59
    Eu falei que você podia determinar
    qualquer valor para um padding ou margin.
  • 5:59 - 6:01
    Mas como saber que valor escolher?
  • 6:01 - 6:04
    Bem, as diretrizes de design de material
    recomendam que você utilize
  • 6:04 - 6:06
    incrementos de oito dips.
  • 6:06 - 6:09
    Este é um conhecimento um pouco
    mais avançado, mas, essencialmente,
  • 6:09 - 6:11
    queremos que nossos componentes
    se alinhem na tela,
  • 6:11 - 6:13
    ao longo desta grade quadrada
    de oito dips.
  • 6:13 - 6:15
    Agora, os quadrados
    não aparecem muito na tela,
  • 6:15 - 6:19
    mas, se quiser posicionar texto aqui,
    você terá que mover isto
  • 6:19 - 6:21
    uns quatro quadrados para a esquerda.
  • 6:21 - 6:25
    Dois quadrados, nesta Grade,
    seriam igual a 16 dips.
  • 6:25 - 6:29
    Nesta tela de e-mail, todos os ícones
    estão alinhados para esta linha.
  • 6:29 - 6:33
    Eles estão posicionados a 16 dips
    da borda esquerda desta tela,
  • 6:33 - 6:38
    todo este texto aqui está posicionado
    a 72 dips da borda esquerda desta tela.
  • 6:38 - 6:41
    Assim, você pode imaginar que o conteúdo
    está começando a seguir
  • 6:41 - 6:42
    certas linhas aqui.
  • 6:42 - 6:44
    Aqui está outra forma de visualizar isso.
  • 6:44 - 6:47
    Nesta imagem de tela
    do aplicativo I/O do Google,
  • 6:47 - 6:54
    temos o conteúdo alinhado para esta linha
    de 16 dip, além desta linha de 72 dip.
  • 6:54 - 6:57
    Está essencialmente a 72 dips
    da borda esquerda da tela.
  • 6:57 - 6:59
    E nesta borda,
  • 6:59 - 7:03
    o conteúdo para a 16 dips,
    antes da borda direita da tela.
  • 7:03 - 7:05
    No tablet,
    você tem mais espaço de tela,
  • 7:05 - 7:07
    então você pode ter
    um pouco mais de padding.
  • 7:07 - 7:10
    Ele pode ficar a 24 dips
    da borda esquerda da tela,
  • 7:10 - 7:12
    e assim por diante para os outros valores.
  • 7:12 - 7:16
    Recomendamos estes valores para tornar
    seu conteúdo mais fácil de ler.
  • 7:16 - 7:20
    Por exemplo, se este título fosse alterado
    por mais alguns pixels,
  • 7:20 - 7:24
    e o Subtext movido para a esquerda
    usando alguns pixels,
  • 7:24 - 7:26
    haveria uma borda irregular aqui.
  • 7:26 - 7:30
    E isso tiraria a atenção do leitor
    da leitura do conteúdo real.
  • 7:30 - 7:34
    Então, ao alinhar tudo, você torna
    seu aplicativo mais fácil de ler e usar.
  • 7:34 - 7:38
    Aqui estão alguns exemplos reais
    do uso do padding em margin.
  • 7:38 - 7:40
    Nesta imagem de tela do aplicativo
    Calendar do Google,
  • 7:40 - 7:44
    vemos um texto que foi deslocado
    um pouco aqui.
  • 7:44 - 7:47
    Há ainda um pouco de espaço
    entre estes eventos do calendário.
  • 7:47 - 7:48
    Se fizermos isto usando padding,
  • 7:48 - 7:52
    então, esta imagem de fundo se estenderá
    para dentro deste espaço branco.
  • 7:52 - 7:56
    Se usarmos margin, ela põe
    uma zona de proteção ao redor da view,
  • 7:56 - 7:58
    então, isto é provavelmente margin.
  • 7:58 - 8:02
    Aqui está outra imagem de tela da página
    de detalhe para um evento de calendário.
  • 8:02 - 8:06
    Há muito texto aqui e parece ter
    lacunas maiores do que outras.
  • 8:06 - 8:09
    Podemos criar estas lacunas maiores
    adicionando padding.
  • 8:09 - 8:13
    Para pôr esta lacuna aqui, você pode
    adicionar padding inferior nesta TextView,
  • 8:13 - 8:15
    ou pôr padding superior nesta view.
  • 8:16 - 8:18
    As duas formas funcionariam.
  • 8:18 - 8:21
    Ou poderia fazer isto usando
    margin de layout.
  • 8:21 - 8:24
    Não dá para ver a diferença entre usar
    margin ou padding de layout,
  • 8:24 - 8:27
    neste caso, porque o fundo do texto usado
    é transparente.
  • 8:27 - 8:31
    Agora é sua vez de praticar e pôr valores
    diferentes de padding e de margin.
  • 8:32 - 8:35
    Fornecemos algum código inicial
    para você iniciar usando o link abaixo.
  • 8:35 - 8:38
    Quando sentir-se seguro com os valores
    de padding e de margin,
  • 8:38 - 8:41
    siga em frente e tente construir
    este layout.
  • 8:41 - 8:46
    A propósito, este texto está localizado
    a 16 dips das bordas aqui.
  • 8:46 - 8:49
    Mas está apenas oito dips
    entre as duas TextViews.
  • 8:49 - 8:51
    Quando concluir, assinale esta caixa.
Title:
02-20 Padding vs. Margin
Description:

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

Portuguese, Brazilian subtitles

Revisions Compare revisions