Return to Video

Add the Reset Button

  • 0:00 - 0:04
    Aqui está uma imagem do nosso aplicativo
    de contagem de pontos, ou
  • 0:04 - 0:06
    ao menos como nós queremos
    que ele se pareça.
  • 0:06 - 0:10
    Vou seguir meu próprio conselho
    e começar com o XML primeiro.
  • 0:10 - 0:13
    Pensemos na situação do View agora.
  • 0:13 - 0:18
    Temos ainda todos estes Views, e
    estes Views estão em layouts
  • 0:18 - 0:19
    verticais e lineares.
  • 0:19 - 0:23
    Temos um LinearLayout para o Time B
    e um LinearLayout para o Time A.
  • 0:23 - 0:27
    E não se pode ter dois Views raiz,
    portanto além disso
  • 0:27 - 0:31
    eles estão envolvidos por um outro
    LinearLayout que é horizontal, para que
  • 0:31 - 0:35
    estes dois LinearLayouts filhos
    estejam lado a lado.
  • 0:35 - 0:38
    Agora queremos adicionar um
    botão de reiniciar.
  • 0:38 - 0:41
    Para que seu cérebro não
    exploda de tanto pensar em todos
  • 0:41 - 0:45
    esses diferentes layouts, eu quero que
    você pense em tudo o que está dentro deste
  • 0:45 - 0:48
    LinearLayout horizontal como se
    se fosse um único View.
  • 0:48 - 0:53
    E agora você só está tentando planejar
    este LinearLayout horizontal aqui e
  • 0:53 - 0:54
    este botão de reiniciar.
  • 0:54 - 0:57
    Você está tentando planejar dois Views.
  • 0:57 - 1:02
    Um View está no topo e o outro View
    está na parte de baixo da tela.
  • 1:02 - 1:06
    Então a pergunta é: qual o ViewGroup
    que permitiria a você ter
  • 1:06 - 1:09
    um View aqui em cima e outro
    View lá embaixo na tela?
  • 1:09 - 1:13
    E acontece que um RelativeLayout
    é um candidato muito bom para isso.
  • 1:13 - 1:17
    Posso ter meu LinearLayout horizontal
    aqui, match_parent para a largura
  • 1:17 - 1:20
    e wrap_content para a altura.
  • 1:21 - 1:24
    E posso ter meu botão de reiniciar
    aqui, alinhado com o centro na parte
  • 1:24 - 1:26
    de baixo do par.
  • 1:26 - 1:29
    Muito bem. Então você tem um
    RelativeLayout e
  • 1:29 - 1:33
    este RelativeLayout tem um filho
    Button e um filho LinearLayout.
  • 1:33 - 1:36
    E este filho Button é este
    botão de reiniciar, e
  • 1:36 - 1:40
    o LinearLayout é este LinearLayout
    aqui, o horizontal.
  • 1:40 - 1:44
    Além disso, este LinearLayout horizontal
    tem dois filhos, e
  • 1:44 - 1:47
    estes filhos são também LinearLayouts.
  • 1:47 - 1:50
    Eles são o LinearLayout para o
    Time A e o LinearLayout para
  • 1:50 - 1:52
    o Time B que você vê aqui.
  • 1:52 - 1:57
    O LinearLayout para o Time A tem
    dois TextViews e três Buttons.
  • 1:57 - 2:00
    O mesmo é verdade para este
    LinearLayout para o Time B.
  • 2:00 - 2:03
    Cinco filhos: dois TextViews,
    e três Buttons.
  • 2:03 - 2:05
    Esta porção do layout você já fez.
  • 2:05 - 2:09
    Você só precisa adicionar isso.
    Vamos lá!
  • 2:09 - 2:13
    Estou aqui no meu código XML e a
    primeira coisa que vou fazer é
  • 2:13 - 2:18
    o RelativeLayout raiz que
    você viu no diagrama.
  • 2:18 - 2:24
    Aqui eu vou digitar RelativeLayout,
    e na verdade eu quero
  • 2:24 - 2:28
    cortar e colar estas duas linhas porque
    elas precisam estar no layout raiz.
  • 2:28 - 2:34
    Então estou cortando-as e colando-as
    aqui, no meu layout raiz.
  • 2:34 - 2:37
    Agora vou fechar meu RelativeLayout aqui e
  • 2:37 - 2:44
    Vou mover este tag de fechamento
    lá para baixo.
  • 2:46 - 2:49
    Então, o que tenho agora é
    esta parte do diagrama.
  • 2:49 - 2:53
    Certo, parece que tenho
    alguns erros também.
  • 2:53 - 2:57
    Vejamos. Sim! Eu não defini uma
    altura ou uma largura. Façamos isso.
  • 2:59 - 3:02
    Meu RelativeLayout tinha o botão
    no centro da parte de baixo da tela.
  • 3:02 - 3:05
    Então, para fazer isso, ele provavelmente
    precisará ocupar a tela inteira.
  • 3:05 - 3:07
    Então eu vou usar
    match_parent nos dois.
  • 3:09 - 3:12
    Agora preciso adicionar o botão.
  • 3:12 - 3:18
    Vou rolar para baixo, bem aqui,
    para onde o LinearLayout se fecha.
  • 3:18 - 3:23
    Mas ainda estou dentro do RelativeLayout,
    e vou adicionar um botão.
  • 3:23 - 3:27
    E vou usar o wrap_content para este botão,
  • 3:27 - 3:30
    porque não é um botão que se expande para
    preencher toda a parte de baixo da
  • 3:30 - 3:33
    tela, ou que se expande para
    preencher a tela toda.
  • 3:34 - 3:37
    E o parent deste botão
    é o RelativeLayout, e
  • 3:37 - 3:40
    vamos configurar o texto deste
    botão para Reiniciar.
  • 3:40 - 3:43
    Vamos ver como está.
  • 3:43 - 3:47
    Meu botão de reiniciar está aqui em
    cima. Isto não é exatamente onde eu
  • 3:47 - 3:52
    queria que estivesse, mas seu parent é um
    RelativeLayout que preenche toda a tela.
  • 3:52 - 3:54
    Portanto posso alinhá-lo ao parent.
  • 3:54 - 3:57
    Quero alinhá-lo à parte de baixo
    do parent, e
  • 3:57 - 4:01
    E quero que esteja no centro do
    parent, horizontalmente ao menos.
  • 4:01 - 4:04
    Legal! Meu botão parece estar
    no lugar certo.
  • 4:04 - 4:06
    Vou selecionar tudo aqui.
  • 4:06 - 4:10
    E vou usar Command+Option+L no Mac.
  • 4:10 - 4:14
    O que é o mesmo que Ctrl+Alt_l no
    Windows só para reformatar o código e
  • 4:14 - 4:16
    deixá-lo mais bonito.
  • 4:16 - 4:19
    Voltemos ao nosso código Java.
  • 4:19 - 4:23
    Agora tenho meu botão mas
    ele não faz nada.
  • 4:23 - 4:26
    Comecemos criando um método para ele.
  • 4:26 - 4:32
    Vou fazer isso logo acima dos métodos
    de exibição, aqui. public void.
  • 4:32 - 4:35
    Vou chamar este método de resetScore,
  • 4:35 - 4:38
    porque é isso que pretendo que ele faça.
  • 4:38 - 4:43
    Rolar para cima. Vou fazer com que ele
    combine com estes outros métodos
  • 4:43 - 4:47
    com o View v e então chaves.
  • 4:47 - 4:50
    Não vou me preocupar com o que está
    acontecendo aqui dentro por enquanto.
  • 4:50 - 4:53
    Vou voltar para meu código XML e
  • 4:53 - 4:57
    vou fazer a segunda parte da ancoragem
    do meu botão ao código Java,
  • 4:57 - 5:02
    adicionando um atributo onClick
    aqui para o resetScore.
  • 5:02 - 5:06
    Então, quando eu clicar este botão,
    o código aqui rodará, mas
  • 5:06 - 5:08
    não tem código nenhum aqui.
  • 5:08 - 5:09
    Descubramos o que adicionar.
  • 5:11 - 5:14
    Voltemos a esta discussão sobre
    pseudoCode.
  • 5:14 - 5:17
    Quando eu usar o botão de reiniciar,
    o que vai acontecer?
  • 5:17 - 5:21
    Bem, eu quero que estes
    dois placares mostrem 0.
  • 5:21 - 5:24
    Além disso, quero que as variáveis para
    o scoreTeamA e para
  • 5:24 - 5:27
    o scoreTeamB zerem.
  • 5:27 - 5:30
    Lembre-se: quando eu clico em qualquer
    destes botões, estou adicionando 2 e
  • 5:30 - 5:32
    depois exibindo a variável.
  • 5:32 - 5:34
    Assim, se eu não zerar a variável,
  • 5:34 - 5:36
    ele vai mostrar um número incorreto.
  • 5:36 - 5:39
    Aqui está o que consegui
    com referência ao pseudoCode.
  • 5:39 - 5:43
    A primeira coisa que quero fazer é
    zerar o scoreForTeamA.
  • 5:43 - 5:46
    Daí quero a mesma coisa
    para o Time B.
  • 5:46 - 5:50
    Agora ambos os placares estão zerados,
    mas nada foi exibido ainda, e é
  • 5:50 - 5:55
    por isso que no passo 3 eu vou exibir
    o scoreForTeamA, o qual foi zerado.
  • 5:56 - 6:00
    E para ser um pouco mais específico,
    eu vou exibir o scoreForTeamA
  • 6:00 - 6:04
    aqui, e então exibirei o
    scoreForTeamB aqui.
  • 6:04 - 6:08
    E como nos passos 1 e 2 eu
    garanti que eles foram zerados,
  • 6:08 - 6:10
    eles exibirão zero aqui e aqui.
  • 6:10 - 6:14
    Então, quando eu clicar qualquer destes
    botões para atualizar o scoreForTeamA, ou
  • 6:14 - 6:18
    o scoreForTeamB, ele atualizará,
    mas começando com um placar zerado.
  • 6:20 - 6:24
    Então, no resetScore eu vou digitar
    meu pseudoCode como código de verdade.
  • 6:24 - 6:29
    Então a primeira coisa que vou fazer
    é pegar o placar A e confirgurar seu valor
  • 6:29 - 6:34
    para zero usando um operador de
    atribuição aqui e de valor zero.
  • 6:34 - 6:36
    E não se esqueça do
    ponto-e-vírgula, é claro.
  • 6:37 - 6:39
    Farei o mesmo para o placar B.
  • 6:42 - 6:49
    Depois disso, vou exibir no lugar
    do Time A o placar para o Time A.
  • 6:49 - 6:53
    E daí vou exibir no lugar do Time B
    o placar para o Time B.
  • 6:55 - 6:57
    Também vou adicionar um comentário aqui.
  • 6:59 - 7:00
    Tudo isso parece razoável.
  • 7:00 - 7:04
    E já faz um tempo que não
    rodo nada no meu telefone, então
  • 7:04 - 7:07
    vou apertar o botão Run. Legal!
  • 7:07 - 7:08
    Tenho um botão de reiniciar.
  • 7:08 - 7:10
    Vejamos se funciona.
  • 7:13 - 7:15
    Bom, ele zera.
  • 7:15 - 7:16
    Vamos clicar mais um pouco
  • 7:16 - 7:19
    só para ter certeza de que
    tudo ainda funciona.
  • 7:24 - 7:28
    Legal. Parece que está. Incrível!
  • 7:28 - 7:30
    Este foi um pouco complicado.
  • 7:30 - 7:34
    Deixe-me mostrar o que aconteceria
    se você mudasse a ordem, fizesse algo
  • 7:34 - 7:35
    de um jeito um pouco diferente.
  • 7:36 - 7:39
    E se eu invertesse estes dois?
  • 7:39 - 7:41
    Bem, vejamos o que acontece.
  • 7:42 - 7:46
    Aqui está. Vamos ver o que ele faz.
  • 7:46 - 7:48
    Vou somar alguns pontos.
  • 7:49 - 7:53
    Agora o momento da verdade,
    o botão de reiniciar.
  • 7:53 - 7:56
    Eh, parece que não faz nada.
  • 7:56 - 7:59
    Vamos tentar clicar. Interessante.
  • 7:59 - 8:01
    É meio difícil de ver,
  • 8:01 - 8:05
    mas o placar dizia 19 antes, eu clico
    o botão de reiniciar e nada muda.
  • 8:05 - 8:08
    Mas quando toco o Lance Livre
    ele mostra 1.
  • 8:10 - 8:12
    Vamos tentar o outro lado.
    Se toco em +2 Pontos,
  • 8:12 - 8:14
    Oh, ele mostra 2.
  • 8:14 - 8:18
    Vamos dar uma olhada no código de novo
    para ver o porquê disto acontecer.
  • 8:18 - 8:21
    Eu inverti a exibição e a
    configuração do placar.
  • 8:21 - 8:25
    Só para ver que tipo de comportamento
    errado que eu poderia ter com isso.
  • 8:25 - 8:30
    Digamos que o Time A tem um placar de 30
    e o Time B um placar de 40.
  • 8:30 - 8:33
    Quando digo displayForTeamA,
    ele vai mostrar 30.
  • 8:33 - 8:37
    Quando digo displayForTeamB,
    ele vai mostrar 40.
  • 8:37 - 8:41
    Somente depois disso ele vai
    configurar os valores para zero.
  • 8:41 - 8:46
    Mas como ele exibiu primeiro ele
    não vai mostrar os valores de zero.
  • 8:46 - 8:48
    Mas a variável será zero.
  • 8:48 - 8:53
    Então quando eu aperto algo como
    addThreeForTeamB, ele pega o
  • 8:53 - 9:00
    valor zero que configurei aqui, soma
    três, e então exibe três.
  • 9:00 - 9:06
    Então para nós, pareceria que o
    Time B foi de um placar de 30 para,
  • 9:06 - 9:12
    depois de clicar o botão de reiniciar, um
    placar de 3, o que é um salto estranho.
  • 9:12 - 9:15
    Agora um outro jeito de consertar isso
    sem voltar a como as coisas estavam
  • 9:15 - 9:19
    seria eu colocar um exibir zero aqui.
  • 9:19 - 9:22
    Você pode testar isso por si mesmo,
    mas isso funcionaria de verdade.
  • 9:22 - 9:24
    É só um pouco não-intuitivo.
  • 9:25 - 9:29
    Eu gosto de mostrar exemplos como este
    porque eles mostram a beleza e
  • 9:29 - 9:31
    a subjetividade do código.
  • 9:31 - 9:34
    Neste caso, eu acho mesmo que a
    primeira maneira que fiz
  • 9:34 - 9:36
    o código era melhor.
  • 9:36 - 9:39
    Mas pode ser que você comece a ver
    cenários onde haja duas maneiras
  • 9:39 - 9:43
    diferentes de escrever o código, e
    ambas sejam tecnicamente corretas.
  • 9:43 - 9:45
    Como nem sempre há uma
    resposta correta,
  • 9:45 - 9:49
    você não deve se sentir constrangido
    a fazer do jeito exatamente correto.
  • 9:49 - 9:53
    Tente escrever um código que funcione do
    seu jeito. Veja como outras pessoas fazem,
  • 9:53 - 9:58
    e então compare: o de quem é mais
    eficiente? O código de quem é mais claro?
  • 9:58 - 10:01
    Este tipo de discussão pode ser uma
    experiência de aprendizado muito útil.
  • 10:01 - 10:04
    Certo, mas vou reverter o código
    para o estada em que estava antes,
  • 10:04 - 10:05
    o qual funcionava, e agora
  • 10:05 - 10:09
    tenho toda a funcionalidade do meu
    aplicativo, mas ele não está bonito.
  • 10:09 - 10:10
    Consertemos isso.
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