3
3
.
.
4
4
.
.
2
2
C
C
u
u
s
s
t
t
o
o
m
m
V
V
i
i
e
e
w
w
-
-
C
C
a
a
l
l
l
l
I
I
n
n
f
f
o
o
[
[
R
R
]
]
This tutorial shows how to call Custom View.
We will use Name & Image View from the previous tutorial but we will implement it as a separate Structure.
We will the use it either by
● Call View using multiple Variables
● Call View using single Structure
Custom View
C
C
a
a
l
l
l
l
V
V
i
i
e
e
w
w
-
-
U
U
s
s
i
i
n
n
g
g
V
V
a
a
r
r
i
i
a
a
b
b
l
l
e
e
s
s
[
[
R
R
]
]
In this example parameters are given to the View through multiple Variables.
ContentView.swift
//================================================================================
// STRUCTURE: ContentView
//================================================================================
struct ContentView: View {
var body: some View {
UserDetails(firstName: "John", lastName: "Carpenter", imageName: "Person")
}
}
//================================================================================
// CSUTOM VIEW: UserDetails
//================================================================================
struct UserDetails : View {
//PARAMETERS
var firstName : String
var lastName : String
var imageName : String
//VIEW LAYOUT
var body: some View {
VStack {
HStack {
VStack(alignment: .leading) {
Text("First Name:").bold().padding(.bottom)
Text("Last Name:").bold()
}
VStack(alignment: .leading) {
Text(firstName).padding(.bottom)
Text(lastName)
}
}.frame(maxWidth: .infinity, alignment: .topLeading).padding()
Image(imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.border(Color.gray, width: 2)
.padding(.leading)
.padding(.trailing)
.frame(maxWidth: .infinity, alignment: .topLeading)
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
}
}
C
C
a
a
l
l
l
l
V
V
i
i
e
e
w
w
-
-
U
U
s
s
i
i
n
n
g
g
S
S
t
t
r
r
u
u
c
c
t
t
u
u
r
r
e
e
[
[
R
R
]
]
In this example parameters are given to View through a single Structure Variable that contains all Variables for the View.
This way View is called with a single parameter (Structure) instead with a multiple parameters (separate Variables) as was
the case in the previous example.
ContentView.swift
//================================================================================
// STRUCTURE: User
//================================================================================
struct User {
var firstName : String
var lastName : String
var imageName : String
}
//================================================================================
// STRUCTURE: ContentView
//================================================================================
struct ContentView: View {
let user = User(firstName: "John", lastName: "Carpenter", imageName: "Person")
var body: some View {
UserDetails(user: user)
}
}
//================================================================================
// CSUTOM VIEW: UserDetails
//================================================================================
struct UserDetails: View {
//PARAMETERS
var user: User
//VIEW LAYOUT
var body: some View {
VStack {
HStack {
VStack(alignment: .leading) {
Text("First Name:").bold().padding(.bottom)
Text("Last Name:").bold()
}
VStack(alignment: .leading) {
Text(user.firstName).padding(.bottom)
Text(user.lastName)
}
}.frame(maxWidth: .infinity, alignment: .topLeading).padding()
Image(user.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
.border(Color.gray, width: 2)
.padding(.leading)
.padding(.trailing)
.frame(maxWidth: .infinity, alignment: .topLeading)
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
}
}
