Swift UI

Views, body, Scene,

Basic Elements

text,image,spacer,sf symbol,divider,label

Text And Image

import SwiftUI

struct ContentView: View {
    var body: some View{
        Text("Welcome User")
        Spacer()
        Image("name.png")
        Divider()
        Image(systemName: "square.and.arrow.up")
    }
}

Other Elements

buttons, picker,

Layout Elements

Vstack, hstack, zstack, scroll container, layered stack, vertical grid, horizontal grid

import SwiftUI

struct ContentView: View{
    var body: some View{
        ZStack{
            Image("").resizeable().scaledToFit()
            VStack{
                Text("Welcome User").font(.largeTitle)
                Text("Hello")
            }.foregroundColor(.white)
        }
    }
}

Shapes

rectangle, circle, rounded rectangle, capsule, gradient

Methods & Properties

alignment spacing color width & height font scaling

State

bindings

App Example

MyApp.swift

import SwiftUI

@main
struct  MyApp: App{
    var body: some Scene{
        WindowGroup{
            ContentView()
        }
    }
}

ContentView.swift

import SwiftUI

struct ContentView: View{
    var body: some View{
        HeroView(sandwich: Sandwich)
    }
}

HeroView.swift

import SwiftUI

struct Sandwich: Identifiable{
    var id = UUID()
    var name: String
    var rating: Int
    var heroImage: Image
}

struct HeroView: View{
    var sandwich: Sandwich
    var body: some View{
        sandwich.heroImage
            .resizeable()
            .aspectRatio(contentMode: .fit)
            .overlay(BannerView(sandwich: sandwich))
    }
}

Profile Page

Profile Page Code

//
//  Untitled.swift
//  MyProject
//
//  Designed in DetailsPro
//  Copyright © (My Organization). All rights reserved.
//

import SwiftUI

struct Untitled: View {
    var body: some View {
		ScrollView {
			VStack {
				HStack {
					Text("leahfields")
					Image(systemName: "globe.europe.africa.fill")
				}
				.font(.system(.headline, weight: .medium))
				Image("myImage")
					.renderingMode(.original)
					.resizable()
					.aspectRatio(contentMode: .fit)
					.frame(width: 100, height: 100)
					.clipped()
					.mask { RoundedRectangle(cornerRadius: 67, style: .continuous) }
				HStack(spacing: 4) {
					ForEach(0..<5) { _ in // Replace with your data model here
						VStack {
							Text("100")
								.font(.system(.headline, weight: .semibold))
							Text("Posts")
								.font(.footnote)
						}
						.frame(width: 80)
						.clipped()
					}
				}
				.padding()
				VStack(spacing: 4) {
					Text("Leah Fields")
						.font(.headline)
					Text("Photographing the world through an environmental lens 🌿")
						.font(.subheadline)
						.multilineTextAlignment(.center)
					Text("leahphoto.com")
						.underline()
						.foregroundStyle(.blue)
						.font(.subheadline)
				}
				.frame(width: 250)
				.clipped()
				HStack {
					LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]) {
						Image(systemName: "photo")
							.foregroundStyle(.blue)
						Image(systemName: "play.rectangle")
						Image(systemName: "info.circle")
					}
				}
				.foregroundStyle(.secondary)
				.font(.title2)
				.padding(.top, 40)
				.padding(.bottom, 8)
				.padding(.horizontal, 4)
				LazyVGrid(columns: [GridItem(.flexible(), spacing: 1), GridItem(.flexible(), spacing: 1), GridItem(.flexible(), spacing: 1)], spacing: 1) {
					ForEach(0..<5) { _ in // Replace with your data model here
						Image("myImage")
							.renderingMode(.original)
							.resizable()
							.aspectRatio(contentMode: .fill)
							.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
							.aspectRatio(1/1, contentMode: .fit)
							.clipped()
					}
				}
			}
			.frame(maxWidth: .infinity)
			.clipped()
			.padding(.top, 78)
			.padding(.bottom, 150)
		}
		.overlay(alignment: .top) {
			// Status Bar
			HStack {
				Text("9:41")
					.frame(width: 109)
					.clipped()
					.font(.system(.body, weight: .semibold))
				Spacer()
				HStack(spacing: 5) {
					Image(systemName: "cellularbars")
						.imageScale(.small)
					Image(systemName: "wifi")
						.imageScale(.small)
					Image(systemName: "battery.100")
						.symbolRenderingMode(.hierarchical)
						.font(.system(.body, weight: .light))
				}
				.frame(width: 109)
				.clipped()
				.font(.system(.body, weight: .semibold))
			}
			.padding(.horizontal)
			.padding(.top, 5)
			.frame(maxWidth: .infinity)
			.clipped()
			.frame(height: 53)
			.clipped()
			.background(Color(.systemBackground))
		}
    }
}

struct Untitled_Previews: PreviewProvider {
    static var previews: some View {
        Untitled()
    }
}

Art Gallery

Art Gallery Code

//
//  ArtGallery.swift
//  MyProject
//
//  Designed in DetailsPro
//  Copyright © (My Organization). All rights reserved.
//

import SwiftUI

struct ArtGallery: View {
    var body: some View {
		ScrollView {
			VStack(spacing: 0) {
				Group {
					Text("Art Gallery")
						.font(.system(.largeTitle, weight: .semibold))
						.frame(maxWidth: .infinity, alignment: .leading)
						.clipped()
						.padding(.leading)
					Divider()
						.padding(.top, 11)
					// Row Horizontal Stack
					HStack(spacing: 0) {
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Sky Song")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$79.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
						Divider()
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Home Blossom")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$79.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
					}
					Divider()
					// Row Horizontal Stack
					HStack(spacing: 0) {
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("M*a*l*l*")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$129.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
						Divider()
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Weekend Drive")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$79.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
					}
					Divider()
					// Row Horizontal Stack
					HStack(spacing: 0) {
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Looking Up From")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$59.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
						Divider()
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Red Bloom")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$79.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
					}
					Divider()
					// Row Horizontal Stack
					HStack(spacing: 0) {
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Mount Hope")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$69.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
						Divider()
						// Artwork Item
						VStack(spacing: 0) {
							// Top Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Thumbnail
							Image("myImage")
								.renderingMode(.original)
								.resizable()
								.aspectRatio(contentMode: .fit)
								.frame(width: 120, height: 120)
								.clipped()
							// Middle Spacer
							Spacer()
								.frame(height: 15)
								.clipped()
							// Title
							Text("Mount Snow")
								.font(.system(.subheadline, design: .serif, weight: .medium))
							// Artist
							Text("Anonymous Artist")
								.font(.system(.footnote, design: .serif, weight: .regular))
								.foregroundStyle(.secondary)
							// Price
							Text("$79.00")
								.font(.footnote)
								.padding(.top, 8)
							// Bottom Spacer
							Spacer()
								.frame(height: 10)
								.clipped()
						}
						.frame(maxWidth: .infinity)
						.clipped()
					}
					Divider()
				}
				Group {
					Text("Load more")
						.font(.system(.subheadline, design: .serif))
						.padding()
						.foregroundStyle(.secondary)
					Divider()
					Spacer()
						.frame(height: 40)
						.clipped()
				}
			}
			.frame(maxWidth: .infinity)
			.clipped()
			.padding(.top, 80)
		}
    }
}

struct ArtGallery_Previews: PreviewProvider {
    static var previews: some View {
        ArtGallery()
    }
}

Resources

• Swift UI Bootcamp
• SwiftUI Course
• SwiftUI Tutorials (Apple)
• https://developer.apple.com/tutorials/swiftui-concepts
• Swift UI Essentials