Return to Video

09-40 Build 2-Pane Tablet UI

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

09-40 Build 2-Pane Tablet UI
more » « less
Video Language:
English
Team:
Udacity
Project:
UD853 - Developing Android Apps
Duration:
04:36
There has been no activity on this language so far.

Japanese subtitles

Revisions

Our website uses cookies for analysis purposes.