Building an App with only code using Auto Layout |

Learn how to make your iOS app’s UI in code using Auto Layout without using Storyboards or XIBs, and how it can make working in a team easier.

This is a companion discussion topic for the original entry at
1 Like

This was fun, but the final results don’t look right on the iPhone 11 Pro simulator when it’s in the portrait orientation. The words on the top two cards get covered up. it all looks fine in the iPhone 8 simultor, but not the ones with the notches. What is missing to make it play well on the the 11 pro?

One question I was wondering about is the proper place to install the window we create manually in a project that utilizes a SceneDelegate. When using Storyboards, iOS seed this into the SceneDelegate automagically, but I’m not sure where I’d do this using this technique.

TIA for any insights

Hi @pumasalad! Nice catch! All the constraints should use the view.safeAreaLayoutGuide, and it has been reflected in the tutorial. It works perfectly on all devices :].

When the project includes a SceneDelegate, you would do that in the scene(_:willConnectTo:) method.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScene = (scene as? UIWindowScene) else { return }
let window = UIWindow(windowScene: windowScene)
window.rootViewController = GalleryController()
self.window = window

Also, be sure to delete the reference to “main” for the “Storyboard Name” value in the info.plist file. It’s under “Application Scene Manifest”->“Scene Configuration”->“Application Session Role”->“Item 0”->“Storyboard” when you click on it in the project navigator.

Hope that helps you. I ran into the same thing a week or so ago on a project I was trying to build without storyboards.

Thanks, Gradyv! I appreciate it.

Hi @stevekellogg! A very nice spot! As of iOS 13, by default all projects come with a SceneDelegate file, and those changes have been reflected in the tutorial. Be sure to check them and out and let me know if you find anything else ;].

Thanks for the great tutorial,

This is another approach to achieve the same result:

  cardView1.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor),
  cardView1.topAnchor.constraint(equalTo: safeArea.topAnchor),

  cardView2.leadingAnchor.constraint(equalTo: cardView1.trailingAnchor),
  cardView2.topAnchor.constraint(equalTo: safeArea.topAnchor),
  cardView2.widthAnchor.constraint(equalTo: cardView1.widthAnchor),
  cardView2.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor),

  cardView3.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor),
  cardView3.topAnchor.constraint(equalTo: cardView1.bottomAnchor),
  cardView3.heightAnchor.constraint(equalTo: cardView1.heightAnchor),
  cardView3.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor),

  cardView4.topAnchor.constraint(equalTo: cardView2.bottomAnchor),
  cardView4.leadingAnchor.constraint(equalTo: cardView3.trailingAnchor),
  cardView4.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor),
  cardView4.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor),
  cardView4.heightAnchor.constraint(equalTo: cardView2.heightAnchor),
  cardView4.widthAnchor.constraint(equalTo: cardView3.widthAnchor)
1 Like

Tell me please where did the files (CardModel.swift, CardView.swift, GalleryController.swift) come from ??
Did you make them yourself or its type of project when we create in Xcode?

@corlovito Thanks very much for your question!

Those files you mention are not provided by default in any Xcode template. They are provided as part of the project.

I hope this helps!

All the best. :slight_smile:

1 Like

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!