YouTube

Got a YouTube account?

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

Portuguese, Brazilian subtitles

← Coding the Details Screen - Developing Android Apps

Get Embed Code
6 Languages

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

  1. Então como você divide a IU
    em componentes menores?
  2. Bom, você poderia pensar que
    estas poderiam ser duas colunas.
  3. Mas então seria difícil
    posicionar os elementos aqui.
  4. Você poderia centralizá-los verticalmente
    dentro da altura da tela.
  5. Mas eles não necessariamente se alinhariam
    com as exibições de temperatura
  6. no lado esquerdo.
  7. Em vez disso, isto se parece mais com
    layout linear horizontal.
  8. Então, os outros elementos poderiam
    ser colocados usando um layout
  9. linear vertical.
  10. O layout linear vertical
    teria seis filhos.
  11. O terceiro elemento seria um layout linear
    horizontal composto por dois filhos.
  12. O primeiro seria outro layout linear
    vertical com estas duas textViews
  13. e o segundo elemento seria outro
    layout linear vertical composto.
  14. estes dois elementos.
  15. Para fazer com o conteúdo de toda
    a tela tenha rolagem vertical,
  16. colocamos ele em uma scroll view.
  17. Usar uma listView aqui seria muito,
    porque não precisamos dimensionar
  18. para um número infinito de itens
    nem precisamos de reciclagem.
  19. Há um número fixo de
    campos na tela, então
  20. a scroll view é perfeita.
  21. Posso mostrar a você a implementação para
    o layout XML do menu do fragmento detail.
  22. Fixamos um valor no código de alguns dados no layout.
  23. para que eles aparecessem como
    uma pré-visualização no painel Design.
  24. Na raiz da hierarquia de exibição
    temos uma ScrollView.
  25. ScrollViews podem ter no máximo um filho.
  26. então definimos para que seja
    o layout linear vertical.
  27. Dentro desse layout, temos
    uma textView para o dia da semana,
  28. a data do calendário e
    um layout linear horizontal.
  29. Em seguida temos
    a textView da umidade,
  30. a textView do vento e a da pressão.
  31. No código XMO, vemos a scroll
    view com o layout linear filho.
  32. Damos a ele um preenchimento de 16 DPIs para
  33. que o conteúdo não seja espremido
    contra a borda da tela.
  34. Depois vemos as textViews seguidas
    pelo layout linear horizontal.
  35. Especificamos layout_marginTop como 16 DIPs
  36. para dar a ele mais espaço da
    parte inferior desta textView.
  37. Dentro deste layout linear horizontal
    temos um layout linear vertical.
  38. que tem largura 0 e
    peso 1, e
  39. outro layout linear com
    largura 0 e peso 1.
  40. Isso significa que estes dois
    filhos têm largura igual.
  41. Para este layout linear, especificamos
    que a gravidade será center_horizontal.
  42. Isso significa que o conteúdo nele
    será centralizado horizontalmente,
  43. o que inclui o ícone e
    a textView da previsão.
  44. Por fim, temos as textViews
    restantes para os outros detalhes de previsão do tempo.
  45. Quando o layout estiver bom,
    atualizamos o fragmento detail.
  46. Neste ponto,
    também o movemos para seu próprio arquivo.
  47. No método onLoadFinish,
  48. costumávamos ter uma exibição de localização por
    ID de chamadas para localizar a textView.
  49. Agora que o fragmento detail
    tem muito mais exibições,
  50. não queremos continuar adicionando
    ainda mais ID de chamadas aqui.
  51. porque elas teriam que passar pela
    hierarquia de exibição sempre que
  52. o carregador atualizar.
  53. Em vez disso, modificamos o método onCreateView.
  54. Com o fragmento
    preenchido, prosseguimos e
  55. localizamos uma referência para todas as exibições
    de que precisaremos mais tarde.
  56. Armazenamos essas exibições como variáveis
    de membro da classe,
  57. motivo pelo qual o nome
    começa com a letra m.
  58. No método onCreateLoader,
    verificamos se a projeção da
  59. consulta do provedor de conteúdo contém
    todas as informações de que precisamos.
  60. Isso é mostrado no topo do arquivo.
  61. Antes isso era chamado de
    colunas de previsão, mas
  62. renomeamos para colunas de detalhes.
  63. E também adicionamos mais algumas colunas
    porque agora estamos exibindo mais
  64. informações na tela.
  65. Em seguida, no método onLoadFinished, temos um
    cursor com os dados de que precisamos.
  66. Lemos o ID de condição da
    previsão do tempo do cursor
  67. porque precisaremos dele para
    determinar que imagem será exibida, mas por
  68. enquanto podemos usar um ícone de placeholder.
  69. Continuamos a ler do cursor
    para obter a data, a descrição e
  70. os outros campos.
  71. Para formatar corretamente os dados para o usuário,
    também copiamos as strings e
  72. o método de utilitário do gist.