Implementing UI - Animation, Programmatic Views, Autolayout

Objectives

This lesson covers implementing custom UI in code, including animation, setting up view hierarchies programmatically, as doing auto layout using NSLayoutConstraint and related API.

• You will be able to use Auto Layout to place views programmatically
• You will be able to animate View objects using animateWithDuration
• You will be able to animate View objects using Core Animation

Required Preclass Resources

• Apple's Animation Documentation
• UIView Animation Methods
• UIView Animation Methods Contd.
• About Core Animation

Lesson Video

Video Challenges

• Auto Layout Test

  Create a single view application. Add two textfields programmatically. Add these constraints using Visual Format Language.

  • Center Y alignment between the fields
  • Vertical Y alignment between the first field and top layout guide (hint, the editor will give this one to you)
  • First field Trailing with the center x of the superview with a constant of -5 (hint, you will ctrl click to give them the same center x, and then adjust it to trailing in the inspector.)
  • First field Leading with the superview leading and a constant of 10
  • Second field Leading with the center x of the superview with a constant of 5
  • Second field Trailing with the superview trailing and a constant of -10

  Your view should look like these, portrait, landscape.

• Animation Test

  An iOS app with a little blue square going around the screen for 4 seconds

  Animate a small blue square along the edge of the screen. (Hint, You’ll want to use a path animation with the path of the bounds of the view (minus the size of the square.))

Stretch Problem

Fibonacci Number

1. Create a function that finds the closest fibonacci number that is less than or equal to the number that is passed into a function.
2. Don't hesitate to Google what a Fibonacci number is.
3. Test it by passing in the number 2000. We will compare results.
♦ Black Diamond
Create the above using a single line of code in the function body. (Hint: recursion)
Solution

Guided Project

Programmatic Constraints With Animation

ProgrammaticConstraintsWithAnimation lets students practice manually creating constraints using NSLayoutConstraints, as well as use animating views.

Project

• Calculator

  Students will build a Calculator app to practice skills and concepts learned so far, with an emphasis on this week's content: UX/UI design, and the development process.

  Calculator is a mini-capstone project where students are given direction on required and optional features. It is the job of the student to turn that list of requirements into an application by going through market research, prototyping, designing a solution, evaluating different technologies, architecting the application, implementing the features, and submitting the project to TestFlight or the App Store.

  ReadMe

Mastery Review