YouTube

Got a YouTube account?

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

Japanese subtitles

← 09-40 Build 2-Pane Tablet UI

09-40 Build 2-Pane Tablet UI

Get Embed Code
6 Languages

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

  1. 他のフォルダのリソースを
    オーバーライドすることについて学んだので
  2. 次はタブレット用の2ペインUIの
    構築についてプログラムを見てみましょう
  3. 幅が820dpよりも大きいデバイスに
    対応する必要がないので
  4. まずvalues-w820dpフォルダを削除したあと
  5. レイアウトのXMLファイルを変更します
  6. そしてlayout-sw600dpフォルダを作り
  7. activity_main.xmlというファイルを加えます
  8. 基底レイアウトフォルダの
    activity_mainと同じファイル名を使います
  9. それによりこのファイルが
    タブレットでの振る舞いをオーバーライドします
  10. このファイルのプログラムは下のGistで得られます
  11. 基本的に水平方向のLinearLayoutで
    左側にForecastFragmentを
  12. 右側にDetailFragmentを表示します
  13. ここで静的フラグメントと
    動的フラグメントを説明します
  14. 実装ではForecastFragmentは
    XMLレイアウトで定義しているので
  15. 静的フラグメントになります
  16. デバイスの向きやサイズに関係なく
    MainActivityにはForecastFragmentが必要です
  17. 一方DetailFragmentには実際の
    Fragmentではなくコンテナの宣言だけを行います
  18. DetailFragmentは動的フラグメントとして
    毎回異なる引数で初期化されます
  19. 従ってDetailFragmentは
    MainActivityのJavaコードの
  20. フラグメントトランザクションの中で
    動的に生成し追加するほうがいいのです
  21. こうすればFragmentManagerは
    これらの初期化の引数を記録し
  22. デバイスが回転したあとで
    これらの値を戻すことができます
  23. それから2ペインUIレイアウトと一貫させるために
  24. 1ペインUIレイアウトの変更が必要になります
  25. 基底レイアウトフォルダの
    activity_mainファイルの中のここは
  26. 以前はFrameLayoutでしたが
    ForecastFragmentとして宣言します
  27. こうするとXMLの中でFragmentとして
    宣言されている2ペインUIと一致します
  28. これでMainActivityは
    ForecastFragmentを
  29. 動的に追加する必要はありません
  30. MainActivityの実際のメソッド名は
    onCreateViewメソッドです
  31. Fragmentはすでに
    このレイアウトの中にあるので
  32. 再びFragmentを動的に加えないよう
    if文を削除します
  33. 同様に基底レイアウトフォルダの
    activity_detail.xmlを変更します
  34. FrameLayoutのIDを
    weather_detail_containerに
  35. 変更することにより
    2ペインUIのコンテナView IDと一致します
  36. この形態では 2ペインと1ペインの両方において
  37. DetailFragmentは常に
    weather_detail_containerに追加されます
  38. コンテナ名を変更したので
    DetailActivityをアップデートしましょう
  39. これは1ペインモードのみに使用され
    ここがコンテナ名を変更した行です
  40. 1ペインモードではDetailActivityは
    DetailFragmentを動的にこのコンテナに追加します
  41. レイアウトを変更したあと
    DetailFragmentを動的に加える変更を
  42. MainActivityに加えます
  43. MainActivityのonCreateメソッドで
    weather_detail_containerの存在をチェックして
  44. 2ペインUIかどうか確認します
  45. この情報をブール型変数のmTwoPaneに記録します
  46. メンバ変数だからmで始まるのを覚えていますか
  47. この場合ブール型変数はtrueになります
  48. DetailFragmentを作成し
    weather_detail_containerに追加します
  49. レトが説明したように
    フラグメントトランザクションを使って
  50. 変更をコミットします
  51. weather_detail_containerが
    レイアウトに存在しない場合は
  52. ブール型変数はfalseとなり
    スマートフォン用の1ペインUIであると分かります
  53. この場合DetailActivityが
    DetailFragmentを表示します
  54. 2ペインUIの場合は
    savedInstanceStateがnullかどうかを調べます
  55. savedInstanceStateがnullでない場合は
    新しいDetailFragmentを作りません
  56. 理由を説明します
  57. デバイスの向きを変えるとします
  58. ActivityとFragmentが崩れる前に
  59. 情報をsavedStateBundleに格納します
  60. デバイスの向きが変わったあとに
    そのBundleを返すことによって
  61. システムはActivityとFragmentを復元し
  62. 前と同じ状態を再構築できます
  63. Bundleが存在する場合は
    システムがDetailFragmentを復元するので
  64. この部分のコードは飛ばします
  65. DetailFragmentを動的に追加したら
  66. テスト用のプレースホルダデータを
    表示させてみてください
  67. 右側の日付の情報が左側に表示されるように
  68. 右側のロジックをあとで詳しく見ていきます
  69. intentがデータURIを持っていることを
    当てにしないように
  70. DetailFragmentを変更してください
  71. この場合DetailFragmentは
  72. XMLにあるプレースホルダデータを
    表示することになります
  73. intentがnullになるのは
  74. DetailFragmentがMainActivityの中に
    存在する場合です
  75. DetailActivityは通常
    1つの日付のURIと一緒に起動されますが
  76. MainActivityは違います
  77. ワイヤーフレームに沿った変更ができたら
    画面にはこのように表示されます
  78. 右上にアイコンが表示されないのは
  79. レイアウトにハードコーディングしたものを
    削除したからです
  80. このあとデータが動的に埋め込まれるように
    変更すれば再び表示されます