Categories
SwiftUI

Introduction To SwiftUI

Functional Programming

SwiftUI is a functional programming language that uses the View protocol to create reusable UI components. Views are value types, which means you don’t define classes for them. Struck is read only, you can’t inherit from them. Views are rectangular areas on screens that are used for drawing and multi touches.


Create SwiftUI Project

Create a new project and change your User Interface to be SwiftUI.

When you create a new xCode project that uses SwiftUi instead of Storyboard, you will find a file created called ContentView.swift. This file contains a View called ContentView.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}
  • ContentView: functions like a view (behaves like a view) because it is a View type.
  • body: All struct views require the body variable.
  • some View: means any struct that behaves like a view. For example, shapes & colors can behave as a view.
  • Text : a View type that displays one or more lines of read-only text.
import SwiftUI

struct ContentView: View {
    var body: some View {
        Color.red
    }
}
  • Color : is a struct that behaves as a View
import SwiftUI

struct ContentView: View {
    var body: some View {
        Rectangle()
    }
}
  • Rectangle : shape aligned inside a frame of a view and can behaves as a View.

Modifiers

SwiftUI has a range of built-in modifiers, such as frame()background(), and font(). Modifiers are functions that you can use to modify your view. You can create your own modifiers, but for now let’s look at some built-in modifiers.

import SwiftUI

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(Color.green)
    }
}
  • RoundedRectangle: is a shape that has a cornerRadius parameter.
  • fill : is a shapes modifier. that fills a shape with a color or gradient.

Order

In SwiftUI, the order of modifiers matter . For example, if you want to have a rounded background for your text, then you need to use the background modifier before the cornerRadius modifier

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
            .background(Color.blue)
            .cornerRadius(10)
    }
}

For structs that are of a type other than View, such as Shape, you need to use the modifiers of that type before the regular built-in view modifiers. you can’t have a frame() modifier before fill(). The modifier frame() will make the view behave like a view. You can’t add fill() after frame() because it is behaving like a view and not a shape.

import SwiftUI

struct ContentView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(Color.green)
            .frame(width: 100, height: 100, alignment: .center)
    }
}
  • frame : a modifier that positions the view within an invisible frame with the specified width and height.

Revision