#View Controller

#Views and Controls

#Text

A view that displays one or more lines of text

Text("Hello World")

You can set text as title or caption.

Text("Hello World")
    .font(.title)

You can also apply stylying text as following:

Text("Hello World")
    .bold()
    .italic()

Further more, we can limit line of 1 results in truncation for text.

Text("Hello World")
    .lineLimit(1)

Text alignment

Text("Hello World")
    .multilineTextAlignment(.center)

#Label

A label is a user interface component with combination of image and text.

Label("Lightning", systemImage: "bolt.fill")

You can also set your image.

Label("Weather", image: "weather")

You can set label style to display only icon or only text.

Label("Weather", image: "weather")
    .labelStyle(.titleOnly)

Label("Weather", image: "weather")
    .labelStyle(.iconOnly)

#TextField

A view that displays and can be editable.

@State private var name: String = ""

var body: some View {
    TextField("Name", $name)
}

#SecureField

A control that gives user ability to securely enter private text.

@State private var password: String = ""

var body: some View {
    SecureField("Password", text: $password)
}

#TextEditor

A view that can display and edit multiline, scrollable text.

@State private var fullText: String = ""

var body: some View {
    TextEditor(text: $fullText)
}

#Image

A view that displays an image.

We can use images that stored on the disk, using an Image view.

Image("Tiger")

We can also use images using SF Symbols

Image(systemName: "house.fill")

We can style images as following:

Image("Tiger")
    .resizable() // scales the image to fit the current view
    .aspectRatio(contentMode: .fit)
    .padding(20)
    .frame(width: geometry.size.width/3, height: 65)
    .foregroundColor(Color.orange)

#Button

A control that perform an action.

Button(action: {
    
    }) {
        Text("Cancel")
    }

We can style images as following:

Button(action: {
    
    }) {
        Text("Cancel")
    }
    .font(.headline)
    .foregroundColor(Color.white)
    .background(Color.orange)
    .cornerRadius(20)

#Link

A control for navigating to a URL.

You can create a link by providing title and URL.

Link("Swift tutorials",
      destination: URL(string: "https://www.gurjit.co/")!)

#Slider

A control for selecting a value from bounded linear range of value.

@State private var rate = 50.0
@State private var isChanging = false
    Slider(
        value: $rate,
        in: 0...100,
        onEditingChanged: { change in
            isChanging = change
        }
    )

#Stepper

A control that performs increment and decrement actions.

@State private var weight = 0
Stepper {
    Text("Weight: \(weight)")
    } onIncrement: {
        incrementWeight()
    } onDecrement: {
        decrementWeight()
    }

#Toggle

A control that toggles between on and off states.

@State private var isReminderSet = false
Toggle(isOn: $isReminderSet) {
        Text("Reminder is set")
    }

In case of text-only labels:

@State private var isReminderSet = false
Toggle("Reminder is set", isOn: $isReminderSet)

#Picker

A control for selecting from a set of values.

Picker("Pizza", selection: $selectedPizza) {
        Text("Greek Pizza").tag(0)
        Text("Neapolitan Pizza").tag(1)
        Text("Chicago Pizza").tag(2)
    }

Styling pickers

Picker("Pizza", selection: $selectedPizza) {
        Text("Greek Pizza").tag(0)
        Text("Neapolitan Pizza").tag(1)
        Text("Chicago Pizza").tag(2)
    }
    .pickerStyle(.segmented) // segmented or menu

#DatePicker

A control for selecting date.

@State private var date = Date()
DatePicker(
    "Date",
    selection: $date,
    displayedComponents: [.date]
)

Styling date pickers

DatePicker(
    "Date",
    selection: $date,
    displayedComponents: [.date]
)
.datePickerStyle(.graphical)

#ProgressView

A view that shows the progress toward completion of a task.

@State private var progress = 0.5
ProgressView(value: progress)

Styling progress view

ProgressView(value: progress)
    .progressViewStyle(.circular) //linear or circular

#HStack

A view that arranges its subviews in a horizontal line.

HStack(alignment: .top, spacing: 10) {
    Text("Greek Pizza")
    Divider()
    Text("Neapolitan Pizza")
    Divider()
    Text("Chicago Pizza")
}

#LazyHStack

A view that arranges its children in a horizontal line, creating items only as needed.

LazyHStack(alignment: .top, spacing: 10) {
    ForEach(1...50, id: \.self) {
        Text("Column \($0)")
    }
}

#VStack

A view that arranges its subviews in a vertical line.

VStack(alignment: .leading, spacing: 10) {
    Text("Greek Pizza")
    Divider()
    Text("Neapolitan Pizza")
    Divider()
    Text("Chicago Pizza")
}

#LazyVStack

A view that arranges its children in a vertical line, creating items only as needed.

LazyVStack(alignment: .leading) {
    ForEach(1...50, id: \.self) {
        Text("Row \($0)")
    }
}

#ZStack

A view that overlays its subviews in a both axis.

ZStack {
   Image("background")
   Text("Chicago Pizza")
}

#Grid

A container view that displays other views in two dimensional layout.

Grid {
    GridRow {
        Text("Circle")
        Image(systemName: "circle")
    }
    Divider()
    GridRow {
        Image(systemName: "square")
        Text("Square")
    }
}

#Spacer

A view that overlays its subviews in a both axis.

HStack {
   Spacer()
   Image("systemName: "circle")
   Text("Circle")
}

#Divider

A visual element used to seprate from other elements.

VStack {
   Text("Square")
   Divider()
   Text("Circle")
}

#List

A container that presents rows of data in single column.

List {
    Text("Greek Pizza")
    Text("Neapolitan Pizza")
    Text("Chicago Pizza")
}

Add navigation to existing list using NavigationView.

NavigationView {
    List {
        Text("Greek Pizza")
        Text("Neapolitan Pizza")
        Text("Chicago Pizza")
    }
}

Add title and style for list.

NavigationView {
    List {
        Text("Greek Pizza")
        Text("Neapolitan Pizza")
        Text("Chicago Pizza")
    }.listStyle(.grouped)
}.navigationTitle("Pizza")

#ScrollView

A view that displays its content in scrollable view.

ScrollView {
        VStack(alignment: .leading) {
            ForEach(0..<50) {
                Text("Number \($0)")
            }
        }
}