English subtitles

← View Groups

Get Embed Code
14 Languages

Showing Revision 4 created 07/18/2016 by Udacity Robot.

  1. Remember the coffee bean trail,
    Katherine?
  2. >> How can I forget?
  3. >> I know.
    >> You spilled it all over me.
  4. [LAUGH]
    >> [LAUGH] So
  5. we talked about how there would
    be three big parts to Lesson one.
  6. >> Mm-hm.
    >> And we spoke about image and
  7. TextView.
  8. And then we learned how
    to style those views.
  9. >> Yes.
    >> Where are we going next?
  10. >> Well, I was thinking.
  11. Since we only have one view
    on the screen right now.
  12. >> Yeah.
  13. >> It's a little boring, so
    we should add more than one view.
  14. >> Right.
  15. And if you think about it,
    all of the fun apps that we use,
  16. YouTube, OkCupid,
    what's another one that comes to mind?
  17. >> Gmail.
    >> Gmail,
  18. they all seem to have more
    than one views packed in
  19. very neatly on the screen together.
  20. >> Yeah.
    And the way they do
  21. that is through view groups.
  22. >> Mm-hm.
  23. >> So we'll learn about that next.
  24. And that gives us the power to
    also position views on the screen
  25. where we want them.
  26. >> Right.
  27. So lets talk about view groups next.
  28. >> So
    far we've only had a single TextView or
  29. a single ImageView on screen.
  30. If we want to add another view below
    it we could try to just copy this and
  31. paste it below it.
  32. But then we get an error.
  33. It says the XML document has
    more than one root view.
  34. There can only be one root view, and it
    should enclose all of your other views.
  35. If we want both of these
    TextViews to appear on screen and
  36. not be lonely anymore, then we
    need to put them in a View Group.
  37. The View Group will then be
    the single root view for the layout.
  38. View Groups are also views and
    they are rectangles on the screen.
  39. For example the red and orange
    rectangles here are all View Groups.
  40. They can have a width, a height or
    a background color, or other attributes.
  41. Background color here is orange.
  42. Orange.
    But it could also be transparent so
  43. the View Group isn't
    even visible to the user.
  44. Instead of holding some content like
    text for TextView or an image for
  45. an ImageView, the content that
    a View Group holds is other views.
  46. You can think of a view group
    as being a container for views.
  47. When a view contains other views,
    we call it the parent of these views.
  48. So this is the parent.
  49. This is the parent.
  50. And this is the parent.
  51. When a view is inside of a View Group,
    we call it the child of that View Group.
  52. So this is a child, and
    this is a child, and this is a child.
  53. Same here, there are two children here,
    and two children here.
  54. Continuing with the family language,
    if there are multiple children,
  55. then each of those children
    are siblings to each other.
  56. These are sibling views, and
    these are sibling views.
  57. Okay, that was a lot.
  58. To help you remember all the terminology
    around parent and child and view and
  59. View Group, I want you to meet
    a very nice family called the Views.
  60. You've already met Tommy TextView.
  61. He's pretty great at displaying text.
  62. You also know his sister, Ivy ImageView,
    who displayed very beautiful images.
  63. And now we're meeting their parents.
  64. It's always nerve racking
    to meet the parents.
  65. So we have Laura the LinearLayout and
    Ray the RelativeLayout.
  66. These are both View Groups,
  67. which we mentioned before
    are called Parent Views.
  68. Then the Children Views
    are positioned based on their parent.
  69. Let's look at an example of one parent.
  70. A parent may tell their child to sit or
  71. stand in a specific place and
    not to move.
  72. Let's ignore the possibility that
    the child might want to get up
  73. and run around.
  74. Because that's just an edge case.
  75. On a device this means that a parent
    has control over where to position
  76. its children.
  77. For example, one child Text View
    can be at the top of the screen and
  78. then a second child
    ImageView can be below that.
  79. Or, if the parent wishes,
  80. they can rearrange the children
    in a different way.
  81. The child ImageView can be on the left,
    and
  82. then the child TextView
    can be on the right.
  83. We're going to talk about view groups
    in more detail in this lesson, but
  84. to make sure that you've
    understood what we've covered so
  85. far, please answer these questions.
  86. For the screenshot on this device, can
    you tell me how many views there are?
  87. Number 2.
    For the mountain image, is it a child or
  88. a parent of the red view group.
  89. Number 3, is the red view group a child
    or a parent of the hiking text view.
  90. Number 4, which of these views
    are siblings of each other.
  91. And you can just list them here.