• Stars
    star
    112
  • Rank 312,240 (Top 7 %)
  • Language
    Swift
  • Created over 5 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Learn to Code While Building Apps - The Complete iOS Development Bootcamp

App Brewery Banner

Auto Layout

Our Goal

At the moment, our app only looks good on the canvas dimension that we’ve selected. If you run the app on screens with different aspect ratios or try to turn it to landscape, the designs will look broken.

Auto Layout allows us to set rules as to how we want our views to be displayed. Because mobile screens have different resolutions and sizes, we need these rules to tell the iPhone/iPad how it should layout all the elements in the storyboard onto the display. These rules allow our UI elements to be resized and positioned so that no matter which screen they are displayed on, they always look as the designer intended.

What you will create

Although Dicee is already pretty dicey, we get into problems when we try to rotate the screen to landscape or if we have a screen size that is not the same as the canvas. In this module, we’ll learn how to fix this and make our apps look exactly the way we want.

What you will learn

  • How to add constraints and understanding how Auto Layout works.
  • How to Pin and Align elements.
  • How to create containers to configure advanced layouts.
  • How to debug auto layout errors.
  • Understanding what Xcode needs in order to correctly layout a design.
  • How to use Stack Views to create complex interfaces.

This is a companion project to The App Brewery's Complete App Development Bootcamp, check out the full course at www.appbrewery.co

End Banner

More Repositories

1

100-days-of-python

100 Days of Code - The Complete Python Pro Bootcamp
1,643
star
2

Dicee-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
609
star
3

webdev

242
star
4

Xylophone-iOS13

Learn Autolayout by Building a Musical Instrument - The Complete iOS Development Bootcamp
Swift
101
star
5

Magic-8-Ball-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
93
star
6

EggTimer-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
82
star
7

Calculator-Layout-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
75
star
8

Clima-iOS13

Learn to Build a Weather App with Alamofire and OpenWeatherMap. The Complete iOS Development Bootcamp
Swift
68
star
9

BMI-Calculator-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
63
star
10

Flash-Chat-iOS13

Starter code for the Flash Chat project in the Complete iOS Development Bootcamp
Swift
60
star
11

Quizzler-iOS13

Learn about Classes and Objects by building a Quiz App - The Complete iOS Development Bootcamp
Swift
54
star
12

Clima-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
52
star
13

Todoey-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
34
star
14

just-add-css

HTML
34
star
15

Dicee-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
34
star
16

Destini-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
29
star
17

Flash-Chat-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
27
star
18

Destini-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
25
star
19

ByteCoin-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
23
star
20

Tipsy-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
22
star
21

api-example-secrets-api

JavaScript
22
star
22

Tipsy-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
22
star
23

Calculator-Layout-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
20
star
24

BMI-Calculator-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
19
star
25

Xylophone-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
19
star
26

Magic-8-Ball-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
19
star
27

Quizzler-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
18
star
28

H4X0R-News-iOS13-SwiftUI-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
18
star
29

Todoey-Realm-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
18
star
30

EggTimer-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
17
star
31

capstone-todolist

CSS
16
star
32

ByteCoin-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
16
star
33

Quizzler-MultipleChoice-iOS13-Completed

Solution to the Multiple Choice Quizzler Challenge
Swift
14
star
34

AutoLayout-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
14
star
35

WhatFlower-Completed-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
14
star
36

SeeFood-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
13
star
37

Quizzler-LayoutPractice-iOS13

Swift
12
star
38

diagrams

12
star
39

AppLifecycle

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
12
star
40

Calculator-Advanced-Swift-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
11
star
41

bootstrap-layout

HTML
11
star
42

Destini-LayoutPractice-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
11
star
43

flex-layout

HTML
11
star
44

Todoey-CoreData-iOS13-Completed

Swift
10
star
45

api-example-bored-api

JavaScript
10
star
46

box-model

HTML
10
star
47

css-positioning

HTML
10
star
48

grid-placement

10
star
49

css-inspection

HTML
10
star
50

capstone-2-example

HTML
9
star
51

flexbox-sizing-exercise

HTML
9
star
52

MiCard-iOS13-SwiftUI-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
9
star
53

LifecycleDemo

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
9
star
54

MagicPaper-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
9
star
55

Calculator-Advanced-Swift-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
8
star
56

Twittermenti-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
8
star
57

Dicee-iOS13-SwiftUI-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
8
star
58

grid-vs-flexbox

HTML
8
star
59

tindog

HTML
8
star
60

Poke3D-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
8
star
61

python-day14-demo

JavaScript
8
star
62

InspoQuotes-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
7
star
63

I-Am-Rich-iOS13-SwiftUI-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
7
star
64

python-day8-demo

Ceasar Cipher
JavaScript
7
star
65

flag-of-laos

HTML
6
star
66

bootstrap-components

HTML
6
star
67

InspoQuotes-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
6
star
68

grid-sizing

HTML
6
star
69

python-day11-demo

Blackjack
JavaScript
6
star
70

BMI-Calculator-iOS13-LayoutPractice

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
5
star
71

Tipsy-iOS13-LayoutPractice

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
5
star
72

css-display

HTML
5
star
73

AR-Ruler-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
4
star
74

Real-Dicee-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
4
star
75

python-day12-demo

JavaScript
4
star
76

Twittermenti-iOS13

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
3
star
77

I-Am-Rich-iOS13-Completed

Learn to Code While Building Apps - The Complete iOS Development Bootcamp
Swift
3
star
78

html-portfolio

HTML
3
star
79

python-day10-demo

Calculator
JavaScript
3
star
80

I-Am-Poor-iOS11

Swift
2
star
81

python-day1-demo

JavaScript
2
star
82

exercise-test

Python
1
star
83

quiz-game-start

1
star
84

test

HTML
1
star
85

python-day7-demo

Hangman
JavaScript
1
star
86

python-day5-demo

Password Generator
JavaScript
1
star