Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NSC AD 340 5210 - Week 3

Nate Ebel
April 26, 2020
520

NSC AD 340 5210 - Week 3

Nate Ebel

April 26, 2020
Tweet

Transcript

  1. Week 3
    Lecture
    Displaying Lists of Data

    View full-size slide

  2. What are we building
    this week?
    How to display and interactive
    with a dynamic number of UI
    elements?
    02
    Project Demo Displaying Dynamic Data
    01
    How to use a RecyclerView to
    display, and interact with, a
    dynamic number of UI
    elements?
    Implementing A RecyclerView
    04
    Defining A Data Model
    How will we model our weather
    data?
    03

    View full-size slide

  3. Project Demo
    What are we building this
    week?

    View full-size slide

  4. Week 3 Project
    Updates
    ● Rename app
    ● Display scrolling list of daily weather forecast data
    ● Weather data should be psuedo-randomized
    ● Pressing a list item should display touch feedback
    ● Clicking a list item should display a Toast message

    View full-size slide

  5. Displaying
    Dynamic Data
    How to display, and interact,
    with a dynamic number of UI
    elements?

    View full-size slide

  6. Modern apps require
    dynamic data & UI

    View full-size slide

  7. Dynamic UI
    How can we build user interfaces without knowing
    ahead of time how many items will be on the
    screen?

    View full-size slide

  8. ViewPager
    ListView
    ScrollView
    Allows user to scroll a layout too
    big to fit on the screen
    Displays a scrolling collection of
    views
    Enables swiping horizontally
    through collections of data
    Dynamic View Containers

    View full-size slide

  9. RecyclerView
    A flexible container for efficiently
    displaying, and interacting with,
    large sets of data.

    View full-size slide

  10. Why RecyclerView?

    View full-size slide

  11. Why
    RecyclerView?
    ● Efficient recycling of views
    ● Flexible layout system
    ● Support for animations and decorations

    View full-size slide

  12. Efficient Recycling
    ● As user scrolls, views leave the screen and are recycled
    ● This limits the number of new views that must be inflated
    ● Recycled views are then used to bind new items as they
    come onto the screen

    View full-size slide

  13. LinearLayoutManager
    Lays items out
    vertically or
    horizontally
    GridLayoutManager
    Lays items out in a
    grid
    Custom LayoutManager
    Define your own
    LayoutManager
    behavior for custom
    layouts
    Flexible Layout System

    View full-size slide

  14. Animations &
    Decorations
    ● Built in support for animating the addition and removal of items
    ● Add ItemDecorations to customize how individual items are drawn
    to the screen

    View full-size slide

  15. RecyclerView In Action
    How does it work?

    View full-size slide

  16. RecyclerView.LayoutManager
    Controls how individual views are laid out
    on the screen
    RecyclerView.Adapter
    Connects data to individual views
    RecyclerView.ViewHolder
    Effeciently binds pieces of data to
    individual view items
    RecyclerView

    View full-size slide

  17. ITEM 1
    ITEM 2
    ITEM N
    RecyclerView.Adapter
    ViewHolder
    ViewHolder
    ViewHolder
    UI ITEM
    UI ITEM
    UI ITEM
    UI ITEM

    View full-size slide

  18. Defining A
    Data Model
    How will we model our weather
    data?

    View full-size slide

  19. What do we mean by
    “modeling data”?
    How do you model data? Why do we
    model data?

    View full-size slide

  20. ● Represent the real world in code
    ● Manipulate, store, and display real-world information
    as needed
    ● Data can be modeled in a variety of ways
    ○ Object Oriented Programming
    ○ Pure data in functional programming
    Why Do We Model Data?

    View full-size slide

  21. Kotlin Data
    Classes
    A special type of
    class perfect for
    modeling data
    data class DailyForecast(
    val temp: Float,
    val date: Date,
    val humidity: Float
    val precip: Float
    )

    View full-size slide

  22. How do we
    pass data to
    our Activity?

    View full-size slide

  23. Passing Data?
    ● App architectures
    ○ MVVM, MVP
    , MVC, MVI
    ● Model - View - ViewModel
    ● Repositories to load and manipulate data

    View full-size slide

  24. Repository Pattern
    ● Load and provide data from a single class
    ● Data can be loaded from multiple data sources
    ○ Network, Database
    ● UI is updated based on exposed data

    View full-size slide

  25. ITEM 1
    ITEM 2
    ITEM N
    RecyclerView.Adapter
    ViewHold
    er
    ViewHold
    er
    ViewHolder
    UI ITEM
    UI ITEM
    UI ITEM
    UI ITEM
    Repository
    Activity

    View full-size slide

  26. LiveData
    ● An observable data holder
    ● Can provide data to our Activity from our
    repository
    ● LiveData is lifecycle aware

    View full-size slide

  27. Must be observed
    Observe LiveData to
    be notified when
    their value’s change
    MutableLiveData
    A special type of
    LiveData that can be
    modified. Useful for
    providing clean
    separation of
    concerns between UI
    and Repository
    layers of code
    Prevent Common Issues
    Avoid memory leaks
    and crashes by
    properly handling
    lifecycle/configuration
    changes
    LiveData

    View full-size slide

  28. Implementing A
    RecyclerView
    How to use a RecyclerView to
    display, and interact with, a
    dynamic number of UI
    elements?

    View full-size slide

  29. Check Canvas For
    Additional Resources
    & Assignments

    View full-size slide

  30. RESOURCES
    Did you like the resources on this template? Get them for
    free at our other websites.
    ● Pack E-learning
    ● Designer girl concept illustration
    ● Social media
    ● Documents
    ● Statistics
    ● Blogger post
    ● At work
    ● Business landing page
    ● Business landing page
    ● Business landing page
    ● Resume

    View full-size slide