Return to Video

07-23 The Stages - Solution

  • 0:01 - 0:05
    Eu vou responder a estas perguntas
    antes de entrar no XML.
  • 0:05 - 0:07
    A primeira coisa é selecionar os views.
  • 0:07 - 0:09
    Vou desenhar caixas em
    volta das que eu vejo.
  • 0:10 - 0:11
    Certo, há cinco diferentes views,
  • 0:11 - 0:14
    sem contar o view group,
    que é tecnicamente considerado um view.
  • 0:14 - 0:18
    De todo modo, estes cinco views
    são dois TextViews aqui em cima,
  • 0:18 - 0:19
    seguidos de três Botões.
  • 0:19 - 0:24
    E não há ImageViews aqui em
    lugar algum, assim eu diria sem ImageViews
  • 0:24 - 0:28
    Você deve estar imaginando por que eu
    decidi que estes dois TextViews distintos.
  • 0:28 - 0:32
    Bem, no produto final, o
    estilo do time A e
  • 0:32 - 0:34
    o placar são bem diferentes.
  • 0:34 - 0:38
    Então eu resolvi manter estes
    dois como TextViews separados.
  • 0:38 - 0:40
    Seguindo ao passo dois, que
    é posicionar os views.
  • 0:40 - 0:43
    Eu vou selecionar qual
    ViewGroup eu quero usar aqui.
  • 0:43 - 0:47
    E os dois que estão na minha mente
    são LinearLayout e RelativeLayout.
  • 0:47 - 0:49
    Esta é uma coluna vertical de views.
  • 0:49 - 0:53
    Então fica bem claro para mim o
    que eu quero, e isso é um LinearLayout.
  • 0:54 - 0:57
    Finalmente, o passo três, que é
    dar estilo aos views.
  • 0:57 - 1:00
    E eu vou abordar este enquanto
    eu trabalho no XML.
  • 1:00 - 1:03
    Certo. Vamos ao XML.
  • 1:03 - 1:05
    Vamos prestar atenção
    à aba texto.
  • 1:05 - 1:08
    A primeira coisa que vou fazer aqui é só
  • 1:08 - 1:10
    apagar algumas coisas de que não preciso.
  • 1:10 - 1:12
    Vou seguir adiante e começar
    apagando este TextView.
  • 1:13 - 1:17
    E apagarei também todos esses
    paddingLeft,paddingRight,
  • 1:17 - 1:20
    paddingTop e paddingBottom.
  • 1:20 - 1:23
    Tomando muito cuidado para não
    apagar coisas que você não quer.
  • 1:23 - 1:25
  • 1:25 - 1:28
    Dissemos que o ViewGroup que
    vamos usar não é um RelativeLayout
  • 1:28 - 1:30
    mas um LinearLayout,
    assim vou mudar isso agora.
  • 1:31 - 1:35
    E dentro deste LinearLayout eu
    terei dois TextViews
  • 1:35 - 1:36
    seguidos de três Botões.
  • 1:36 - 1:38
    Então vou começar a fazê-los.
  • 1:38 - 1:40
    Agora não serei muito detalhista
    sobre qual será a largura e
  • 1:40 - 1:43
    a altura que deste TextView.
  • 1:43 - 1:45
    Por enquanto só vou deixar isto
    como um wrap_content,
  • 1:45 - 1:48
    o qual porá a caixa do TextView
    bem em volta do texto.
  • 1:49 - 1:52
    Vou configurar o texto para
    este TextView também.
  • 1:52 - 1:55
    E este primeiro TextView
    só vai dizer Time A.
  • 1:56 - 1:59
    Vejamos como isso se
    parece no Preview.
  • 1:59 - 2:02
    Certo. Eu vejo um pequeno
    TextView aqui que diz Time A.
  • 2:02 - 2:04
    Agora façamos mais dois.
  • 2:04 - 2:07
    O próximo abaixo deste é o placar,
    e isso é um TextView também.
  • 2:07 - 2:10
    Começaremos digitando Text.
  • 2:10 - 2:12
    Eu vejo a palavra TextView,
    então eu aperto Enter.
  • 2:12 - 2:16
    E eu também vou fazer
    disso um wrap_content.
  • 2:16 - 2:18
    E vou adicionar o texto.
  • 2:18 - 2:22
    Bem, o placar geralmente começa em zero,
    então vamos fazê-lo começar em zero.
  • 2:22 - 2:23
  • 2:23 - 2:23
    E agora meus Botões.
  • 2:23 - 2:26
    Vou começar digitando a
    palavra Button
  • 2:26 - 2:28
    Vá em frente e use o wrap_content
    para estes também.
  • 2:28 - 2:32
    O primeiro Button vai dizer +3 Pontos.
  • 2:32 - 2:35
    Eu vou copiar isso e
  • 2:35 - 2:40
    colar uma vez, colar duas vezes
    para ter mais dois Botões.
  • 2:40 - 2:43
    E teremos um Button que
    diz +2 Pontos e
  • 2:43 - 2:45
    um Button que diz Lance Livre.
  • 2:45 - 2:47
    Vejamos como isso se parece no Preview.
  • 2:48 - 2:51
    Bem, parece que tenho três Botões.
  • 2:51 - 2:54
    Consigo ver Time A e 0.
  • 2:54 - 2:56
    Portanto tenho todos os meus views,
  • 2:56 - 2:59
    Mas isto não se parece muito com o que
    nosso objetivo final deveria se parecer.
  • 2:59 - 3:01
    Lembre-se, eles estão
    numa coluna vertical.
  • 3:01 - 3:03
    Acho que devo mudar a orientação
    do meu layout, assim
  • 3:03 - 3:05
    Vou fazer isso.
  • 3:05 - 3:10
    Começarei digitando orientation
    e eu quero que seja vertical.
  • 3:10 - 3:12
    Assim está um pouco melhor.
  • 3:12 - 3:17
    Estes botões eram expandidos para
    preencher a largura da janela.
  • 3:17 - 3:20
    Então eu provavelmente não queira
    usar o wrap_content para
  • 3:20 - 3:23
    os Botões. Ao invés disso,
    vou usar o match_parent.
  • 3:23 - 3:24
    Então vou mudar isso já.
  • 3:26 - 3:29
    Então as larguras de todos os
    meus Botões agora estão match_parent.
  • 3:29 - 3:30
    Vamos ao Preview.
  • 3:31 - 3:33
    Parece bem melhor,
    eles se expandiram.
  • 3:33 - 3:34
    Legal.
  • 3:34 - 3:39
    Bem, meu texto ainda está
    meio espremido no canto,
  • 3:39 - 3:44
    e para consertar isso vou usar
    uma coisa chamada gravity.
  • 3:44 - 3:46
    Estou aqui com um Google Drawing.
  • 3:46 - 3:49
    Façamos uma caixa de texto
    no Google Drawing.
  • 3:50 - 3:52
    Isto é bastante como os bounds de um view.
  • 3:52 - 3:54
    Posso digitar a palavra Time A,
  • 3:54 - 3:58
    e por padrão ela estará no
    canto superior esquerdo.
  • 3:58 - 4:01
    E isto é o mesmo para TextViews.
    Quando você põe texto num TextView,
  • 4:01 - 4:03
    ele estará no canto superior
    esquerdo por padrão.
  • 4:03 - 4:09
    Agora, no Google Drawings, eu posso
    selecionar este texto e usar basicamente
  • 4:09 - 4:14
    o equivalente de um atributo, chamado
    Align para centralizá-lo
  • 4:14 - 4:19
    horizontalmente dentro da caixa de texto
    e centralizá-lo verticalmente também.
  • 4:19 - 4:20
    Bem legal.
  • 4:20 - 4:24
    Pegar o conteúdo do view e movê-lo
    dentro dos limites do view
  • 4:24 - 4:27
    é exatamente o que o layout
    gravity faz.
  • 4:27 - 4:30
    E se você pensa que isso se assemelha
    a alguns métodos de alinhamento
  • 4:30 - 4:34
    que você pode usar com RelativeLayout,
    é mesmo, mas você pode usar o atributo
  • 4:34 - 4:37
    gravity com LinearLayout, que
    é o que o torna poderoso.
  • 4:37 - 4:39
    Daremos uma olhada nele no código.
  • 4:40 - 4:44
    Vou pegar meu primeiro TextView
    e vou começar a digitar gravity.
  • 4:45 - 4:47
    Com gravity tenho duas opções,
  • 4:47 - 4:49
    layout_gravity e gravity.
  • 4:49 - 4:51
    Eu acabei de falar sobre o
    atributo gravity.
  • 4:51 - 4:53
    Assim é este que vou usar.
  • 4:53 - 4:56
    E agora tenho um monte de opções aqui,
  • 4:56 - 4:58
    e acho que quero que seja
    centralizado horizontalmente.
  • 4:58 - 5:00
    Então é isso que vou usar.
  • 5:00 - 5:03
    E eu vou ver no Preview o que isso fez.
  • 5:04 - 5:08
    Não parece ter feito muito, mas de
    fato há um motivo para isso.
  • 5:09 - 5:13
    Se eu clicar aqui, e vamos aumentar o zoom
    já que pode ser difícil que você veja...
  • 5:15 - 5:16
  • 5:16 - 5:21
    Aqui temos Time A, e você pode ver
    o limite do view em volta dele.
  • 5:21 - 5:25
    Bem, se eu dissesse que isto está
    centralizado dentro do view,
  • 5:25 - 5:27
    você não poderia discutir comigo.
  • 5:27 - 5:32
    Ele realmente parece centralizado no
    view. É só que o view é bem pequeno
  • 5:32 - 5:33
    Voltando ao nosso Google Drawing,
  • 5:33 - 5:39
    é mais ou menos como se eu diminuísse
    até ficar do tamanho do texto.
  • 5:39 - 5:40
    Está centralizado, mas
  • 5:40 - 5:45
    não ficaria muito diferente se ele
    fosse empurrado para a esquerda.
  • 5:45 - 5:47
    Se eu quisesse centralizar no telefone,
  • 5:47 - 5:50
    Eu preciso fazer com que o view
    se estique até a largura do telefone.
  • 5:50 - 5:52
    O que requer que mudemos a largura.
  • 5:54 - 5:56
    Aqui de volta eu vou fechar meu Preview,
  • 5:57 - 5:59
    e eu vou ao width aqui.
  • 6:00 - 6:05
    Ao invés de usar wrap_content,
    vou usar match_parent.
  • 6:05 - 6:06
    Vamos ver nosso Preview de novo.
  • 6:07 - 6:09
    Menos zoom.
  • 6:09 - 6:11
    Está bem melhor.
  • 6:11 - 6:12
    Parece estar centralizado.
  • 6:12 - 6:14
    Façamos o mesmo com o placar aqui.
  • 6:16 - 6:19
    Vou adicionar o gravity a isso também,
  • 6:19 - 6:20
    gravity e não layout_gravity.
  • 6:20 - 6:26
    center_horizontal e vou mudar
    as larguras para match_parent.
  • 6:27 - 6:29
    Vamos ver de novo.
  • 6:29 - 6:31
    Legal!
    Tudo está centralizado.
  • 6:31 - 6:32
    Parece muito bom.
  • 6:32 - 6:34
    Só que está tudo muito apertado junto.
  • 6:34 - 6:37
    Não há muito espaço para respirar
    entre estes elementos.
  • 6:37 - 6:41
    Vou dar a cada um dos
    TextViews 4 de padding .
  • 6:41 - 6:46
    Vou começar a digitar padding,
    vou fazer 4dp.
  • 6:47 - 6:48
    Lembra-se do dp?
  • 6:48 - 6:52
    E estou usando só padding, não
    padding_bottom ou coisas assim.
  • 6:52 - 6:54
    E isto dará 4dp ao redor
    de todo o TextView.
  • 6:54 - 6:57
    Vejamos como isso está no Preview.
  • 6:58 - 7:01
    Isto me dá um pouco mais de espaço.
  • 7:01 - 7:04
    Farei o mesmo com o TextView do placar.
  • 7:08 - 7:11
    Agora vou tentar fazer o mesmo com Button.
  • 7:16 - 7:19
    Bem, isso não parece ter
    feito muita coisa.
  • 7:19 - 7:24
    E se eu o deixasse um pouco maior, tipo 8?
  • 7:24 - 7:26
    20?
  • 7:26 - 7:30
    Interessante. Parece que isso está
    tornando o próprio botão maior.
  • 7:30 - 7:32
    Eu não quero que o botão seja maior.
  • 7:32 - 7:34
    Quero que o espaço ao redor do
    botão seja maior.
  • 7:34 - 7:38
    E de fato, isso é um trabalho melhor
    para o layout_margin.
  • 7:38 - 7:41
    Lembre-se: padding acrescenta
    padding dentro do view,
  • 7:41 - 7:43
    ao passo que margin põe
    espaço ao redor do view.
  • 7:44 - 7:45
    Assim, mudaremos isso para layout_margin.
  • 7:45 - 7:47
    Vou colocar 8dp.
  • 7:47 - 7:49
    Parece melhor.
  • 7:49 - 7:53
    Agora há espaço em volta do view
    entre estes dois views.
  • 7:53 - 7:55
    Façamos isso com os outros Buttons.
  • 7:56 - 8:00
    Margin, não padding, layout_margin.
  • 8:00 - 8:01
    Isso parece muito bom!
  • 8:01 - 8:04
    Agora, se você escolhesse atributos
    diferentes dos que eu escolhi,
  • 8:04 - 8:08
    como talvez padding 5
    ao invés de 4, tudo bem.
  • 8:08 - 8:12
    Lembre-se, neste ponto só estou
    tentando deixar as coisas legíveis.
  • 8:12 - 8:15
    Nos preocuparemos com tamanhos
    de fonte e cores bonitas mais tarde.
  • 8:17 - 8:18
  • 8:18 - 8:21
    Ótimo trabalho!
    Você terminou este passo.
タイトル:
07-23 The Stages - Solution
概説:

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

Portuguese, Brazilian subtitles

改訂