Views and 3rd Party Library

Views and 3rd Party Library

Views

New SwiftUI View
  • To create a new view in SwiftUI, you start by importing the SwiftUI package and then defining a new struct that conforms to the View protocol.
  • Inside the struct, you’ll implement the body computed property, which describes the view’s content and layout.
  • Here’s a basic example to demonstrate creating a new view in SwiftUI:


1
2
3
4
5
6
7

 
import SwiftUI
struct MyNewView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}
Breakdown of New SwiftUI View
  • Define a New Struct: Create a new Swift struct and make it conform to the View protocol.


1
2

 
import SwiftUI
struct MyNewView: View {
  • Implement the Body: Within the struct, you’ll need to implement a body computed property. This is where you define what your view looks like.


1
2
3
4

 
var body: some View {
    Text("Hello, world!")
        .padding()
}
  • To use MyNewView inside another view, you would do the followings:


1
2
3
4
5

 
struct ContentView: View {
    var body: some View {
        MyNewView()
    }
}
Structuring Views
  • In SwiftUI, it’s a good practice to structure your views by breaking them down into smaller, reusable components.
  • For example, suppose you have a view that displays user information. This view could consist of smaller views:
    • one for the user’s avatar,
    • one for the username,
    • and one for the user’s bio.
  • Create a new project called views that implements the above example with the following contents.
    • viewsApp
    

    1
2
3
4
5
6
7
8
9
10

    		 
      import SwiftUI

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

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    		 
      import SwiftUI

  struct ContentView: View {
      @State private var showProfile = false

      var body: some View {
          if showProfile {
              UserProfileView()
              Button("Back") {
                  showProfile = false
              }
          } else {
              Button("Profile") {
                  showProfile = true
              }
          }
      }
  }
  #Preview {
      ContentView()
  }
    • Views
    

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    		 
      import SwiftUI

  struct UserProfileView: View {
      var body: some View {
          VStack {
              UserAvatarView()
              UserNameView()
              UserBioView()
          }
      }
  }

  struct UserAvatarView: View {
      var body: some View {
          Image(systemName: "person.circle.fill")
              .resizable()
              .frame(width: 100, height: 100)
      }
  }

  struct UserNameView: View {
      var body: some View {
          Text("Golden Rams")
              .font(.title)
      }
  }

  struct UserBioView: View {
      var body: some View {
          Text("I love SwiftUI!")
              .font(.subheadline)
      }
  }
NavigationView
  • You can wrap your views in other framework, for example, NavigationView.
  • Try modifying ContentView with the following:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 
struct ContentView: View {
    @State private var showProfile = false

    var body: some View {
        NavigationView {
            if showProfile {
                UserProfileView()
                    .navigationBarTitle("User Profile", displayMode: .inline)
                    .navigationBarItems(trailing: Button("Back") {
                        showProfile = false
                    })
            } else {
                Button("Profile") {
                    showProfile = true
                }
            }
        }
    }
}

Third Party Library

Adding third party packages
  • Enter the GitHub URL of the 3rd party library into the search box
  • Press Add Package
Example: Kingfisher 


1
2
3
4
5
6
7
8
9

 
import Kingfisher

struct UserAvatarView: View {
    var body: some View {
        KFImage(URL(string: "https://www.wcupa.edu/communications/images/goldenRamLogo.png"))
            .resizable()
            .frame(width: 100, height: 100)
    }
}
Example: ConfettiSwiftUI 


1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
import ConfettiSwiftUI

struct UserAvatarView: View {
    @State private var trigger: Int = 0
    var body: some View {
        KFImage(URL(string: "https://www.wcupa.edu/communications/images/goldenRamLogo.png"))
            .resizable()
            .frame(width: 100, height: 100)
        Button("Cheers!!!") {
            trigger += 1
        }
        .confettiCannon(trigger: $trigger)
    }
}
Hands-on: Subsonic