YouTube

Got a YouTube account?

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

Japanese subtitles

← 09-18 Coding the Details Screen

09-18 Coding the Details Screen

Get Embed Code
6 Languages

Showing Revision 1 created 04/26/2015 by Udacity.

  1. このUIはどのように分割できるでしょうか
  2. 縦に2列に分割できると思うかもしれませんが
  3. それではこの要素の配置が難しくなります
  4. 垂直方向の画面中央に配置したとしても
  5. 気温のViewの横には並ばないからです
  6. この部分には横方向のLinearLayoutを使い
  7. 残りの要素は縦方向のLinearLayoutで配置します
  8. 縦方向のLinearLayoutでは子の要素が6つ並びます
  9. 3つ目の要素は2つの子要素で構成される
    横方向のLinearLayoutになっています
  10. その左側の要素はさらに縦に2つに分けられ
  11. 右側の要素も同様に
    縦に2つに分けることができます
  12. 縦スクロールできるコンテンツを作るには
    ScrollViewの内側に収めればいいのです
  13. ここでListViewを使う必要はありません
  14. 項目数が限られており
    Viewの再利用も不要だからです
  15. 画面上のフィールド数が固定されているので
  16. ScrollViewを利用するのが一番いいでしょう
  17. fragment_detail_xmlのレイアウトの実装は
    いくつかのデータをハードコードしたので
  18. Designペインで
    プレビューとして見ることができます
  19. View階層のルートにScrollViewがあります
  20. ScrollViewは子を1つしか持てないので
  21. 縦方向のLinearLayoutになるよう設定します
  22. このレイアウトには曜日や日付のTextViewの他に
  23. 横方向のLinearLayoutが含まれています
  24. さらに湿度、風、気圧のTextViewが続きます
  25. XMLコードの中にお試しのLinearLayoutと共に
    ScrollViewが確認できます
  26. まずLinearLayoutに16dpのパディングを与えて
  27. コンテンツが端に寄り過ぎないようにします
  28. 次に2つのTextViewが並び
    続いて横方向のLinearLayoutがあります
  29. ここでlayout_marginTopを16dpに指定して
  30. TextViewとの間の距離を広げてください
  31. このレイアウトの中にある
    縦方向のLinearLayoutですが
  32. 最初の方は幅がゼロ、ウェイトが1で
  33. 2つ目も幅がゼロ、ウェイトが1です
  34. つまりこの2つのLinearLayoutは同じ幅になります
  35. またgravityをcenter_horizontalと指定したので
  36. コンテンツは横方向の中央に配置されます
  37. これは予報のTextViewだけでなく
    アイコンにも適応されます
  38. 残るのはその他の気象情報のTextViewです
  39. レイアウトが整ったら
    DetailFragmentをアップデートします
  40. この時点でこれを別のファイルに移動します
  41. onLoadFinishedメソッドでは
    findViewById呼び出しを何度も行っていました
  42. ところがDetailFragmentには
    多くのViewがあるので
  43. 取得するのは一度で十分です
  44. ローダがリフレッシュする度に
    View階層をさかのぼる必要があるからです
  45. その代わりonCreateメソッドを修正します
  46. fragmentがインフレートされたら
    あとで必要になるすべてのビューを参照できます
  47. Viewはクラスのmember変数として保存されるため
  48. 名前が“m”で始まるのです
  49. onCreateLoaderメソッドが
  50. コンテンツプロバイダに要求する射影に必要な
    情報を すべて含むことを確認します
  51. これはファイルの最初に宣言されます
  52. FORECAST_COLUMNSの前に呼び出しましたが
    DETAIL_COLUMNSにリネームしています
  53. 画面にはさらに情報を表示するので
    COLUMNSをいくつか足しています
  54. 次にonLoadFinishedメソッドでは
    Cursorから必要なデータを取得します
  55. あとでアイコンを決定するため
  56. CursorからWEATHER_CONDITION_IDを
    読み取りますが
  57. ひとまず使うのはplaceholderのアイコンです
  58. dateやdescriptionなどの情報を
    Cursorから読み取り続けます
  59. データのプロパティをフォーマットするには
  60. Gistから文字列やUtilityメソッドの
    上書きもしてください