YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← Build 2-Pane Tablet UI

Get Embed Code
6 Languages

Showing Revision 8 created 06/20/2016 by Udacity Robot.

  1. Aproveitando o conhecimento que
    adquirimos sobre substituição de recursos
  2. em outras pastas,
  3. vamos percorrer o código juntos sobre
    como desenvolver a interface de tablet de dois painéis.
  4. Primeiro, remova a pasta Valores W820dp
    porque não precisamos fornecer
  5. lógica específica quando a orientação atual
    é superior a 820dp.
  6. Prossiga e
    faça as alterações no layout XML do menu.
  7. Depois crie uma nova
    pasta de layout SW 600dp.
  8. Em seguida, adicione um novo arquivo
    chamado activity_main.
  9. Usamos o mesmo nome de arquivo que o da
    pasta de layout base activity_main, para que
  10. este substitua o comportamento
    especificamente em tablets.
  11. Para ver o código desse arquivo
    verifique o gist abaixo.
  12. Essencialmente é um layout linear horizontal
    que pode reter um fragmento de previsão
  13. à esquerda e
    um fragmento detail à direita.
  14. Agora é um bom momento para falar sobre
    fragmentos estáticos versus fragmentos dinâmicos.
  15. Em nossa implementação, o fragmento de previsão
    é o fragmento estático porque
  16. o estamos definindo no layout XML do menu,
    independentemente da orientação ou do tamanho do dispositivo;
  17. sabemos que vamos precisar de um
    fragmento de previsão na atividade principal.
  18. Por outro lado, declaramos apenas
    um contêiner para o fragmento detail, mas
  19. mas não o fragmento real.
  20. É inicializado com diferentes
    argumentos, cada vez como um fragmento
  21. dinâmico, então é melhor
    criar e adicionar dinamicamente esse
  22. fragmento em uma transação de fragmento
    no código java da atividade pai.
  23. Dessa forma, o gerenciador de fragmentos pode manter
    o controle dos argumentos de inicialização
  24. e retorná-los para nós
    após a rotação do dispositivo.
  25. Depois precisamos atualizar
    os layouts de IU do painel para que
  26. fiquem consistentes
    com a caixa de dois painéis.
  27. Então, no arquivo activity_main
    na pasta de layout base, isso é usado como
  28. um frame layout que vamos
    declarar como um ForecastFragment.
  29. Dessa forma, ele corresponderá à UI de dois painéis,
  30. onde isso também será declarado
    como um fragmento na XML.
  31. Assim, a atividade principal nunca precisa
    se preocupar sobre a adição dinâmica do
  32. fragmento de previsão.
  33. Na atividade principal,
    no método de exibição onCreate,
  34. como o fragmento já está dentro
    desse layout, podemos simplesmente remover isso
  35. para que não seja necessário adicioná-lo dinamicamente de novo.
  36. Da mesma forma, modificamos o layout da atividade detail
    na pasta de layout base
  37. e modificamos a ID do frame layout
    para ser o contêiner detail de previsão do tempo.
  38. Para que corresponda à exibição do
    recipiente na UI de dois painéis.
  39. O padrão aqui é que
    o fragmento detail será sempre adicionado
  40. ao recipiente chamado
    weather_detail_container,
  41. ambos na caixa de dois painéis ou um painel.
  42. Como alteramos o nome
    do contêiner,
  43. devemos também atualizar
    a atividade detail.
  44. Isso só é usado no modo de um painel.
  45. Aqui mudamos o
    nome do recipiente.
  46. No modo de um painel, a atividade
    detalhada adicionará o fragmento detail
  47. dinamicamente a esse recipiente.
  48. Depois de modificar o layout, devemos
    atualizar a atividade principal para
  49. adicionar dinamicamente o fragmento detail.
  50. No método onCreate da atividade principal
    verificamos a presença do
  51. contêiner detail de previsão do tempo no layout para saber
    se essa é uma UI de dois painéis ou não.
  52. Acompanhamos essa informação
    em um booleano chamado mTwoPane.
  53. Lembre-se que começamos com a letra
    m, porque é uma variável de membro.
  54. Nesse caso,
    o booleano deve ser verdadeiro.
  55. Então, prosseguimos e
    criamos um novo fragmento detail, e o
  56. adicionamos a weather_detail_container.
  57. Confirmamos a alteração usando
    uma transação de fragmento,
  58. introduzida pelo Rado anteriormente.
  59. Se o contêiner detail
    não estiver presente no layout, então
  60. o booleano será falso, o que significa que é uma
    UI de um painel para telefones.
  61. Nesse caso, a atividade detail será
    processada mostrando o fragmento detail.
  62. Observe que, no caso de dois painéis
    verificamos se o pacote savedInstantState
  63. é null.
  64. Se o pacote
    savedInstantState não for null,
  65. então não criaremos um novo,
    e aqui está o motivo.
  66. Digamos que você queira girar o dispositivo.
  67. Antes que a atividade e os
  68. fragmentos sejam eliminados, armazenamos as
    informações em pacotes de estado salvos.
  69. Depois que a orientação é alterada,
    o sistema restaura a atividade e
  70. os fragmentos,
    devolvendo o mesmo pacote para que ele
  71. possa ser recriado
    com o mesmo estado.
  72. Isso significa que, se o pacote existir,
    devemos deixar o sistema
  73. processar a restauração do fragmento detail,
    e podemos ignorar esse código.
  74. Quando um fragmento detail
    for adicionado dinamicamente,
  75. faça com que ele mostre alguns dados fictícios
    apenas para fins de teste.
  76. Mais tarde sondaremos a lógica correta,
    para que as informações certas sejam exibidas
  77. para a data
    selecionada à esquerda.
  78. Modifique o fragmento detail para que ele
  79. não espere a intenção futura
    de ter uma URI de dados.
  80. Nesse caso,
    o fragmento detail incidirá
  81. sobre alguns dados fictícios
    que temos em nossa XML.
  82. O motivo de a intenção estar em branco
    é porque o fragmento detail
  83. pode agora existir na atividade principal.
  84. E a atividade principal não é
    iniciada com uma URI para apenas
  85. uma data como
    a atividade detail é geralmente iniciada.
  86. Quando você fizer as alterações nos
  87. wireframes, esta será a aparência do
    aplicativo.
  88. O motivo de um ícone não ser mostrado
    aqui é porque
  89. não fixamos um valor no código do ícone
    no layout.
  90. Mas quando os dados forem preenchidos
    dinamicamente em uma seção posterior,
  91. ele será exibido novamente.