English 字幕

← Tablet UX Mocks - Developing Android Apps


Showing Revision 15 created 05/25/2016 by Udacity Robot.

  1. When we were learning
    that responsive design,
  2. we saw that a common pattern
    was to use the MasterDetailFlow,
  3. which is what were going
    to use for Sunshine.
  4. Here are the tablet mocks.
  5. We have a list of forecasts on the left,
    and then for the selected item,
  6. we see the detail pane on the right.
  7. This applies for 7-inch
    and 10-inch tablets,
  8. both portrait and landscape orientations.
  9. In portrait mode, the columns
    are just a little bit narrower,
  10. but it's still a two-pane UI.
  11. In terms of implementation, all of this
    will be under the MainActivity.
  12. Then on the left we have
    the ForecastFragment.
  13. And then on the right,
    we have the DetailFragment.
  14. On the phone, we would still have the
    MainActivity with the list of forecast.
  15. And then selecting an item
    would still launch the DetailActivity.
  16. Here's another way to visualize it.
  17. On the tablet, we have two fragments
    side by side under one activity.
  18. And then on the phone,
    we have the first activity
  19. containing the first fragment.
  20. Selecting an item will launch
    the second activity
  21. containing the second fragment.
  22. We're going to break this up
    into multiple coding tasks
  23. until we build up the final layout.
  24. First we'll build up
    the two-pane UI for tablets.
  25. Then we'll hook up the communication
    between the two fragments
  26. so that's selecting an item
    replaces the detail pane on the right.
  27. Then we'll learn how to show
    and activated state
  28. on the currently selected item,
    so we know what the details pane
  29. corresponds to.
  30. We'll also need to make sure
    that the scroll position
  31. is maintained across orientation changes.
  32. After that, we'll update the DetailLayout
    so it's optimized for these wider screens.
  33. And then we'll modify the adapter
    so that the today layout
  34. looks like the other days.
  35. There's no special
    today layout on the tablet.
  36. So hopefully it's clear
    how we're going to approach
  37. implementing this tablet behavior
  38. and we're going to step
    through it slowly, one by one.