Return to Video

Add the Reset Button

  • 0:00 - 0:03
    Aqui está uma imagem
    do nosso app Court Counter,
  • 0:03 - 0:06
    ou melhor, de como queremos
    que ele fique.
  • 0:06 - 0:10
    Vou seguir meu próprio conselho
    e começar pelo XML.
  • 0:10 - 0:12
    Reflitamos sobre os Views.
  • 0:12 - 0:14
    Temos todos estes Views...
  • 0:15 - 0:19
    que estão dentro
    de LinearLayouts verticais.
  • 0:19 - 0:23
    Tem o LinearLayout do time B
    e o LinearLayout do time A.
  • 0:23 - 0:25
    E não dá para ter
    dois rootViews,
  • 0:25 - 0:27
    então, além disso,
  • 0:27 - 0:29
    eles estão encapsulados
    em outro LinearLayout,
  • 0:29 - 0:31
    que por acaso é horizontal,
  • 0:31 - 0:33
    de modo que estes dois
    LinearLayouts filhos
  • 0:33 - 0:35
    podem ficar lado a lado.
  • 0:35 - 0:38
    Temos que adicionar
    o botão "reset" embaixo.
  • 0:38 - 0:42
    Para você não endoidar
    pensando em tantos layouts,
  • 0:42 - 0:46
    considere tudo que está
    neste LinearLayout horizontal
  • 0:46 - 0:48
    um View só.
  • 0:48 - 0:53
    Agora você só está lidando
    com este LinearLayout
  • 0:53 - 0:54
    e com este botão "reset".
  • 0:54 - 0:57
    Você está tentando
    dispor dois Views.
  • 0:57 - 1:01
    Um está no topo
    e outro no fim da tela.
  • 1:01 - 1:05
    A pergunta agora é:
    qual viewGroup permitiria
  • 1:06 - 1:09
    um View aqui em cima
    e outro aqui embaixo da tela?
  • 1:09 - 1:13
    Acontece que um RelativeLayout
    é um belo candidato para esse caso.
  • 1:13 - 1:16
    Deixo meu LinearLayout
    horizontal aqui,
  • 1:16 - 1:18
    igualo sua largura à do pai
  • 1:18 - 1:20
    e encapsulo o conteúdo
    para a altura...
  • 1:20 - 1:23
    e posso fazer
    meu botão "reset" aqui,
  • 1:23 - 1:26
    alinhado com o centro
    e com a base do pai.
  • 1:26 - 1:28
    Bom,
    você tem um RelativeLayout...
  • 1:28 - 1:33
    que tem como filhos um botão
    e um LinearLayout.
  • 1:33 - 1:36
    O botão é o "reset",
  • 1:36 - 1:40
    e o LinearLayout
    é este horizontal aqui.
  • 1:40 - 1:44
    Este LinearLayout horizontal,
    por sua vez, tem dois filhos,
  • 1:44 - 1:47
    que também são
    LinearLayouts.
  • 1:47 - 1:49
    São o LinearLayout
    do time A
  • 1:49 - 1:51
    e o LinearLayout do time B,
    vistos aqui.
  • 1:52 - 1:55
    O LinearLayout do time A
    tem dois textViews
  • 1:55 - 1:57
    e 3 botões.
  • 1:57 - 2:00
    A mesma coisa vale
    para o LinearLayout do time B.
  • 2:00 - 2:03
    5 crianças,
    2 textViews e 3 botões.
  • 2:03 - 2:05
    Esta parte do layout
    você já fez,
  • 2:05 - 2:08
    só falta adicionar isto.
    Então vamos lá.
  • 2:08 - 2:11
    Estou no meu código XML...
  • 2:11 - 2:16
    e de cara vou criar
    o RelativeLayout raiz,
  • 2:16 - 2:18
    que você viu no diagrama.
  • 2:18 - 2:22
    Aqui eu digito
    "RelativeLayout"...
  • 2:22 - 2:27
    e recorto e colo
    estas duas linhas
  • 2:27 - 2:28
    para ficarem
    no layout da raiz.
  • 2:28 - 2:34
    Recortei e colei ambas
    no meu layout raiz.
  • 2:34 - 2:37
    Agora eu fecho
    meu RelativeLayout
  • 2:37 - 2:40
    e ponho esta tag
    de fechamento...
  • 2:41 - 2:44
    lá no final.
  • 2:45 - 2:48
    O que tenho agora,
    basicamente,
  • 2:48 - 2:50
    é esta parte do diagrama.
  • 2:50 - 2:54
    Parece que há erros.
    Vejamos.
  • 2:54 - 2:58
    Certo, temos que definir
    uma altura e uma largura. Vamos lá.
  • 2:58 - 3:02
    Meu RelativeLayout tinha
    um botão centralizado na base.
  • 3:02 - 3:05
    Então provavelmente
    será preciso encher a tela.
  • 3:05 - 3:07
    Vou usar "match_parent"
    nos dois.
  • 3:09 - 3:11
    Certo. Agora tenho
    que adicionar o botão.
  • 3:11 - 3:15
    Vou descer até aqui,
  • 3:15 - 3:19
    onde o LinearLayout acaba
  • 3:19 - 3:21
    e o RelativeLayout
    continua,
  • 3:21 - 3:23
    e vou adicionar um botão.
  • 3:23 - 3:26
    Vou encapsular
    o conteúdo dele,
  • 3:26 - 3:31
    pois não é para o botão
    tomar toda a base da tela
  • 3:31 - 3:34
    ou toda a tela.
  • 3:34 - 3:37
    O pai deste botão
    é o RelativeLayout,
  • 3:37 - 3:41
    e o texto dele é "reset".
  • 3:42 - 3:43
    Vejamos como fica.
  • 3:43 - 3:45
    Meu botão de zerar
    está aqui.
  • 3:45 - 3:48
    Não é bem onde eu queria.
  • 3:48 - 3:50
    Mas como o pai dele
    é o RelativeLayout
  • 3:50 - 3:54
    que toma a tela toda,
    posso alinhá-lo ao pai.
  • 3:54 - 3:57
    Quero alinhá-lo
    à base do pai...
  • 3:57 - 4:01
    e que fique centralizado
    no sentido horizontal.
  • 4:01 - 4:04
    Legal, meu botão
    parece estar onde devia.
  • 4:04 - 4:06
    Vou selecionar tudo...
  • 4:06 - 4:09
    e dar um Command + Option + L,
    no Mac,
  • 4:09 - 4:13
    o mesmo que Control + Alt + L
    no Windows,
  • 4:13 - 4:16
    para reformatar o código.
  • 4:16 - 4:18
    Vamos voltar
    para nosso código Java.
  • 4:18 - 4:23
    Eu fiz o botão,
    mas ele não faz nada.
  • 4:23 - 4:26
    Vamos começar
    criando um método para ele.
  • 4:26 - 4:29
    Vou fazê-lo logo antes
    dos métodos de display.
  • 4:29 - 4:32
    "public void"...
  • 4:32 - 4:35
    Vou chamar o método
    de "resetScore",
  • 4:35 - 4:38
    pois quero
    que ele zere o placar.
  • 4:38 - 4:43
    Eu subo, coloco-o no padrão
    dos demais métodos,
  • 4:43 - 4:46
    com o "View v",
    e abro chaves.
  • 4:46 - 4:50
    Não vou me preocupar
    com o que vem após a chave.
  • 4:50 - 4:53
    Vou voltar
    para o código XML...
  • 4:53 - 4:57
    e fazer a segunda parte
    da ligação do botão ao Java
  • 4:57 - 5:02
    adicionando um atributo onClick
    para resetScore.
  • 5:02 - 5:04
    Agora,
    quando clico neste botão,
  • 5:04 - 5:06
    este código será acionado.
  • 5:06 - 5:08
    Mas não tem
    nenhum código aqui.
  • 5:08 - 5:10
    Vejamos
    o que falta adicionar.
  • 5:10 - 5:14
    Vamos voltar à discussão
    do pseudocódigo.
  • 5:14 - 5:17
    Quando aperto em "reset",
    o que quero que aconteça?
  • 5:17 - 5:21
    Quero que o placar
    mostre 0x0.
  • 5:21 - 5:23
    E quero que as variáveis
    da pontuação do time A
  • 5:24 - 5:27
    e da pontuação do time B
    voltem para 0.
  • 5:27 - 5:29
    Lembre-se,
    quando clico nestes botões,
  • 5:29 - 5:32
    estou somando 2
    e exibindo a variável.
  • 5:32 - 5:34
    Então, se a variável
    não voltar a 0,
  • 5:34 - 5:36
    exibirei um número errado.
  • 5:36 - 5:39
    Então fiz o seguinte
    em relação ao pseudocódigo:
  • 5:39 - 5:43
    primeiro é preciso definir
    a pontuação de A como 0.
  • 5:43 - 5:46
    Depois, faço o mesmo
    com o time B.
  • 5:46 - 5:50
    Agora, o placar está 0 x 0,
    mas não está sendo exibido,
  • 5:50 - 5:52
    razão pela qual,
    no 3º passo,
  • 5:52 - 5:55
    eu exibo a pontuação de A,
    que foi definida como 0.
  • 5:56 - 5:57
    E, para ser mais específico,
  • 5:57 - 6:01
    vou exibir a pontuação de A
    aqui...
  • 6:01 - 6:04
    e a pontuação de B
    aqui.
  • 6:04 - 6:07
    E, por nos primeiros passos
    eu ter garantido que os zerei,
  • 6:07 - 6:10
    será exibido 0 x 0 aqui.
  • 6:10 - 6:12
    Agora, quando eu clicar
    em qualquer botão
  • 6:12 - 6:15
    que atualize ScoreForTeamA
    ou ScoreForTeamB,
  • 6:15 - 6:19
    a atualização partirá
    de 0 de pontuação.
  • 6:19 - 6:24
    Em resetScore eu digitarei
    meu pseudocódigo como código.
  • 6:24 - 6:27
    A primeira coisa a fazer
    é escolher "scoreTeamA"
  • 6:27 - 6:29
    e definir seu valor como 0
  • 6:29 - 6:34
    usando um operador de atribuição
    e o valor de 0.
  • 6:34 - 6:36
    E não esqueça
    do ponto e vírgula.
  • 6:37 - 6:39
    Farei o mesmo com "scoreB".
  • 6:42 - 6:46
    Depois, vou exibir
    no lugar do time A
  • 6:46 - 6:48
    a pontuação de A...
  • 6:48 - 6:52
    e vou exibir
    no lugar do time B
  • 6:52 - 6:54
    a pontuação de B.
  • 6:54 - 6:58
    Também vou adicionar
    um comentário.
  • 6:58 - 7:00
    Parece fazer sentido.
  • 7:00 - 7:02
    Como faz tempo
    que não rodo no meu celular,
  • 7:02 - 7:04
    vou clicar em "run".
  • 7:05 - 7:08
    Legal,
    tenho um botão de "reset".
  • 7:08 - 7:09
    Vamos ver se funciona.
  • 7:13 - 7:16
    Ótimo, define como 0.
    Vamos clicar em outros botões
  • 7:16 - 7:20
    só para ver se tudo
    continua funcionando.
  • 7:24 - 7:27
    Bom. Parece que sim.
    Maravilha.
  • 7:28 - 7:32
    Isso foi mais complicado.
    Agora vou mostrar o que acontece
  • 7:32 - 7:35
    se fizer em outra ordem
    ou se fizer algo diferente.
  • 7:36 - 7:39
    E se eu inverter
    estes dois?
  • 7:39 - 7:41
    Vamos ver no que dá.
  • 7:42 - 7:45
    Aqui está.
    Vejamos o que acontece.
  • 7:45 - 7:48
    Vou adicionar uns pontos...
  • 7:49 - 7:51
    Hora da verdade: "reset".
  • 7:54 - 7:57
    Não parece fazer nada.
    Vamos tentar clicar.
  • 7:58 - 8:00
    Interessante.
    É difícil de ver,
  • 8:00 - 8:03
    mas antes o placar
    indicava "19".
  • 8:03 - 8:05
    Eu apertei "reset"
    e nada aconteceu.
  • 8:05 - 8:08
    Daí eu cliquei em lance livre
    e o placar foi para 1.
  • 8:09 - 8:12
    Vamos somar 2 pontos
    do outro lado.
  • 8:12 - 8:14
    Mostra 2!
  • 8:14 - 8:17
    Vamos analisar o código
    para entender o porquê.
  • 8:17 - 8:21
    Eu inverti a exibição
    e a definição do placar
  • 8:21 - 8:25
    só para ver que tipo de erro
    eu poderia observar.
  • 8:25 - 8:30
    Digamos que o time A tenha 30
    e o time B tenha 40 pontos.
  • 8:30 - 8:33
    Quando digo "displayForTeamA",
    o placar mostrará 30,
  • 8:33 - 8:35
    e, quando digo
    "displayForTeamB",
  • 8:35 - 8:37
    mostrará 40.
  • 8:37 - 8:41
    Só então o placar será
    definido como 0.
  • 8:41 - 8:45
    Como a exibição vem antes,
    o valor 0 não vai aparecer.
  • 8:46 - 8:48
    Mas a variável será, sim, 0.
  • 8:48 - 8:53
    Então, quando eu aperto
    "addThreeForTeamB",
  • 8:53 - 8:57
    parte-se do placar de 0,
    definido aqui,
  • 8:57 - 9:00
    soma-se 3 e mostra-se 3.
  • 9:00 - 9:06
    Para nós, parecerá que o time B
    foi de 30 pontos no placar
  • 9:06 - 9:11
    para, após clicar em "reset",
    ir para 3 pontos, o que é esquisito.
  • 9:11 - 9:15
    Um jeito de consertar isso,
    fora retornar à ordem certa,
  • 9:15 - 9:19
    é digitar "display(0)" aqui.
  • 9:19 - 9:22
    Pode testar.
    Funcionaria mesmo,
  • 9:22 - 9:25
    só é meio ilógico.
  • 9:25 - 9:28
    Gosto de exemplos assim
    porque eles mostram
  • 9:28 - 9:31
    a beleza e a subjetividade
    da programação.
  • 9:31 - 9:33
    Contudo, neste caso,
    tenho convicção
  • 9:33 - 9:36
    de que o código
    estava melhor antes.
  • 9:36 - 9:38
    Mas você verá situações
  • 9:38 - 9:43
    em que há duas formas certas
    de escrever um mesmo código.
  • 9:43 - 9:45
    Como nem sempre há
    uma resposta correta,
  • 9:45 - 9:49
    não se limite a fazer
    estritamente do modo certo.
  • 9:49 - 9:51
    Tente programar algo
    do seu jeito,
  • 9:51 - 9:53
    veja como outros fazem
  • 9:53 - 9:57
    e depois compare
    a eficiência e a coesão.
  • 9:57 - 10:01
    Esse tipo de discussão
    pode ensinar muito.
  • 10:01 - 10:04
    Bom, vou reverter o código
    ao estado anterior,
  • 10:04 - 10:05
    quando funcionava,
  • 10:05 - 10:08
    e agora meu app
    já funciona plenamente.
  • 10:08 - 10:10
    Mas está feio.
    Vamos dar um jeito nisso.
Cím:
Add the Reset Button
Leírás:

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

Portuguese, Brazilian subtitles

Felülvizsgálatok Compare revisions