Recreating the iOS App Store home screen with SwiftUI

This is a really simple layout tutorial that will help you recreate the iOS App Store Home Screen in less than 5 minutes using SwiftUI.

To begin, let’s divide the layout into two sections, the top header, and the App cards. Let us look closely at each section.

Header

HStack {
    VStack (alignment: .leading) {
        Text("TUESDAY, MAY 12").foregroundColor(.secondary).bold().font(.footnote)
        Text("Today").font(.largeTitle).bold()
    }
    Spacer()
    Image(uiImage: #imageLiteral(resourceName: "0E764E06-6B02-456A-88D3-983CA788E7F7.jpg")).resizable().aspectRatio(contentMode: .fill).frame(width: 40, height: 40, alignment: .trailing).cornerRadius(200)
}.padding([.horizontal, .top])

App Cards

VStack {
    ZStack {
        Image(uiImage: #imageLiteral(resourceName: "0E764E06-6B02-456A-88D3-983CA788E7F7.jpg")).resizable().frame(height: 450)
        VStack (alignment: .leading) {
            Text("LIFE AT HOME")
              .foregroundColor(Color.white.opacity(0.5))
              .bold()
              .font(.footnote)
            Text("3 Quick and Easy Recipes")…