Make Me Code Again — Day Six

This weekend, we are babysitting the cat, and got interrupted by her constantly — She wants to cuddle with me!

This is how it started…

Today I am learning how to create the “complex interfaces”, which is aptly defined in the following image.

The core is to create the vertical and horizontal stack with scrolling featured enabled into it.

The best part of this tutorial was to learn how to build a pretty standard UI. And the core of this UI is the “VStack and HStack.” Once you setup the base of your UI, and then you render it multiple times in a for-each-loop. The code creates the following base:

Once your base is setup, then creating the main screen with various rows out of it in your main view:

It was my favorite tutorial. I always have a curiosity about how these types of UI are coded, creating them into Principle for Mac or ProtoPie is easy, drag and drop and done — but doing it in code is kind of like a challenge.

Until next time,

Cheers,

Mudassir
www.mazeemi.com

Resources:

  1. Composing Complex Interface — shttps://developer.apple.com/tutorials/swiftui/composing-complex-interfaces

Finding patterns in chaos. Pioneer of Urdu language on Apple devices! UX/UI Instructor | Speaker | Design Governance Head at Ring Central | Curious

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store