Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Master iOS Auto Layout (Swift/Xcode)
Rating: 4.5 out of 5(246 ratings)
1,079 students

Master iOS Auto Layout (Swift/Xcode)

Master Auto Layout for Swift iOS Development with Xcode Storyboard and Programmatic approach
Created byAndi Setiyadi
Last updated 4/2020
English

What you'll learn

  • Properly laying out UI components that will adjust to devices sizes and orientation.
  • Get comfortable with auto layout UI using Storyboards.
  • Learn auto layout programmatically

Course content

2 sections19 lectures4h 24m total length
  • Why Auto Layout?5:10

    discover how auto layout adapts to various screen sizes and orientations with storyboard, using safe area guides to accommodate iPhone X and newer devices.

  • Introduction to Auto Layout21:57

    Learn iOS auto layout basics with storyboard, from creating a single view app to applying constraints and safe areas across devices, including navigation controllers and tab bars.

  • Identify Auto Layout Common Issue8:32
  • Constraints Priority20:15

    Master iOS auto layout by understanding how constraint priority governs UI behavior. Create buttons, set equal widths, adjust spacing with lower priority constraints, and animate layout changes to fill space.

  • Orientation Based Layout14:34

    Design an orientation based layout to maintain consistency across devices and orientations, building a login screen with username and password fields and sign in options in a new Xcode project.

  • Proportional Constraints8:45

    Learn to design a login view with proportional constraints by using height multipliers and width multipliers, removing fixed sizes so the image and text fields adapt to screen size.

  • Size Classes: Key Concept8:17

    Master size classes to design layouts that adapt to portrait and landscape on iPhone and iPad. Learn how compact and regular width and height guide UI placement in Xcode.

  • Designing Layout with Size Classes16:53

    Learn to adapt iOS layouts to portrait and landscape using size classes, adjusting constraints for image views and login views, including proportional height, width, and spacing.

  • Content Hugging and Compression19:44
  • Constraints Runtime Update12:32
  • Programmatic Constraints21:20

    Learn to create auto layout programmatically for dynamic UI components, including buttons and views, using safe area constraints and translatesAutoresizingMaskIntoConstraints in Xcode.

  • Layout Anchor18:10
  • Visual Format Language - Key Concept5:01

    Utilize the visual format language to declare auto layout constraints by referencing UI components in a dictionary. Describe horizontal and vertical relationships, including widths, heights, insets, spacings, and priorities.

  • Constraint with Visual Format Language21:08
  • Dynamic Tableview Cell15:26

    Create a dynamic table view cell that auto-resizes to the summary content using auto layout, with a custom book cell showing title, author, and summary.

  • Stackview15:17

    Explore how to build layouts with stack views in iOS, including horizontal and vertical stacks, alignment, distribution, spacing, and content hugging to manage intrinsic sizes and dynamic sizing.

  • More Stackview14:28

    Explore building a calculator layout using stack views in a single view app, combining horizontal and vertical stacks with proportional constraints and equal widths to adapt to device orientation.

  • Scrollview16:22

Requirements

  • Basic iOS development
  • Latest Xcode

Description

Auto Layout allows us to design and laying out UI components within our app that will be responsive to users' devices form factor and orientation. It will dynamically calculate the positions and sizes of the UI components automatically to deliver a consistent users experience in iOS app across devices, and with more and more devices form factors being introduced, mastering auto layout is critical and as developer we have to be really comfortable dealing with this.

Auto layout in iOS uses a constraint-based approach, which means we are setting constraints for each of the UI components that will adapt to both external (ie device size, rotation) and internal (ie internationalization) changes. In this course we will be using the Xcode storyboard approach as well as programmatic way using Swift to set our layout constraints. In some cases programmatic way might be the only way especially if we want to change the constraints at runtime.

There are a lot to cover on this course:

  • Orientation based layout

  • Size classes

  • Constraint priority

  • Proportional constraints

  • Content hugging and compression

  • Runtime update

  • Layout anchor

  • NSLayoutConstraint

  • Visual Format Language

  • Dynamic tableview cell

  • Stackview

  • Scrollview

By the time we are done, you should be comfortable dealing with auto layout in your project.

Who this course is for:

  • Beginner and Intermediate iOS Developer