name: inverse layout: true class: center, middle, inverse --- # Practice Quiz 2 Review & Questions Lauren Bricker CSE 340 Spring 2021 --- name: normal layout: true class: --- # Animation .left-column[  ] .right-column[ The Zoom app has incorporated Animation in the interface as seen on the left. What pacing function do you think they are using? ] -- count: false .right-column[ Pacing functions seen: - Bounce (at the end of the scroll) or Overshoots - Slow in (transition from Meetings to Schedule a meeting screen)/Slow out ] --- # Animation Design Tips .left-column[  ] .right-column[ Pick an Animation Design Tip and justify whether the interface programmer for this app met or violated that tip. 1. Used sparingly and understandingly, animation can enhance the interface … otherwise can distract! 2. Need to mimic real world 3. Observing motion tells us about size, weight, rigidity 4. No abrupt changes in velocity! 5. Think about accessibility. ] --- .left-column[  ] .right-column[ Pick an Animation Design Tip and justify whether the interface programmer for this app met or violated that tip. 1. Used sparingly and understandingly, animation can enhance the interface … otherwise can distract! - Met: if justified: The animations do not distract from the function of the app - Violated: if justified: some might say the animation is superfluous 2. Need to mimic real world - Met: things bouncing back when they hit a wall with the scrolling 3. Observing motion tells us about size, weight, rigidity - Not obvious 4. No abrupt changes in velocity! - Met: On the Schedule screen the screen rises up from the top with the slow in slow out. 5. Think about accessibility. - Violated: These animations would not likely help a disabled user]] ] --- # What is the interactor hierarchy? .left-column50[  ] --- # What is the interactor hierarchy? .left-column50[  ] .right-column50[ root (LinearLayout, Vertical) - Search Bar - ImageView - Edit Box - ImageView - ImageView (or Menu) - Tab Bar - Button - Button - Button - ImageView - TextView - TextView (with link) - Button ] ??? Important: use multi-level tree --- # Adding Views... We learned that there are two methods of adding views - programmatically, or by inflating the object from an XML file and then adding that to the parent view. When is it better to add Views, Layouts, and ViewGroups to a component hierarchy dynamically and when is it better to add them statically? -- count: false - You should always add views from static resources to save space - **Inflate views from XML if you know they will always be the same each time you run the app.** - You should always instantiate views as objects in your code to save time. - **Add views programmatically when you don't know (when you are coding how many there will be needed when the app is run** --- # Layout Lab .left-column50[  ] .right-column50[ Which layout parameters were used to create this image? ] -- .right-column50[ Width: `wrap_content` Height: `match_parent` ] --- # Layout XML .left-column30[ Which of the items in the image does this code correspond to? ``` android:layout_width="0dp" android:layout_height="0dp" android:text="@string/sample_text" app:layout_constraintBottom_toTopOf="@+id/linearLayout" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" ``` ] .right-column50[  ] -- .right-column50[ The Yellow Box (Text) ] --- # Measure, Layout, Draw We learned about 3 recursive methods that help to place and show views on the screen. - Measure: _______________ and is a _______________ algorithm - Layout: _______________ and is a _______________ algorithm - Draw: Draws the interactor hierarchy and is a _______________ algorithm --- # Measure, Layout, Draw We learned about 3 recursive methods that help to place and show views on the screen. - Measure: **calculates and stores a views measured dimensions** and is a **depth-first post-order** algorithm - Layout: **decides the location of children** and is a **depth-first post-order** algorithm - Draw: Draws the interactor hierarchy and is a **depth-first pre-order** algorithm
