Appendix
Code Snippets for Common SwiftUI Views
Throughout this book, I show the various SwiftUI views that you can use to build the user interface (UI) of an iPhone application. This appendix provides code snippets to demonstrate their use, so you can easily start using the views.
Content View
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
Using Modifiers
Text("Hello, SwiftUI!")
.font(.largeTitle)
.bold()
.foregroundColor(.red)
Image View
Image("weimenglee")
.resizable()
.frame(width: CGFloat(300.0),
height:CGFloat(300))
.clipShape(Circle())
.overlay(Circle().stroke(
Color.black, lineWidth: 5))
Text View
Text("Hello, world!")
.fontWeight(.bold)
.font(.title)
Button View
Button(action: {
// action to perform
}) {
Text("Submit")
}
VStack View
VStack {
Text("Wei-Meng Lee")
Text("Founder")
}
HStack View
HStack {
Image("weimenglee")
.resizable()
.frame(width: CGFloat(120),
height: CGFloat(120))
.cornerRadius(CGFloat(15),
antialiased: true)
VStack {
Text("Wei-Meng Lee")
Text("Founder")
}
}
ZStack View
ZStack {
Image("pdf")
.resizable()
.frame(width: 256, height: 256.0)
Text("Watermark")
.font(.largeTitle)
.foregroundColor(.gray)
.opacity(0.5)
.rotationEffect(.degrees(-45))
}
TextField View
@State private var firstName: String = ""
TextField("First Name", text: $firstName)
.border(Color.black)
SecureField View
@State private var password: String = ""
SecureField("Password", text: $password)
.border(Color.black)
Toggle View
@State private var showFavorites = true
Toggle(isOn: $showFavorites) {
Text("Show Favorites").bold()
}
.padding()
.background(showFavorites ?
Color.yellow : Color.gray)
Slider View
@State private var sliderTemp = 23.0
Slider(value: $sliderTemp,
in: 20.0…38.0)
Stepper View
@State private var qty = 1
Stepper(value: $qty, in: 0…10,
label: {
Text("Qty: (qty)")
}
)
Picker View
var typesOfCoffee =
["Caffè Americano", "Café Latte", "Cappuccino"]
@State private var selectedCoffee = 0
Picker(selection: $selectedCoffee,
label: Text("Types of Coffee").bold()) {
ForEach(0 ..< typesOfCoffee.count){
Text(self.typesOfCoffee[$0]).tag($0)
}
}
List View
// Adding Rows Statically
//=======================
List {
Text("Australia")
Text("Canada")
Text("United States of America")
}
// Adding Rows Programmatically
//=============================
// Example 1
@State var countries = [
"Australia", "Canada", "United States of America"]
var body: some View {
List {
ForEach(countries, id: .self) { (country) in
Text(country)
}
}
}
// Example 2
var countries = [
country(name: "Australia", flag: "Australia"),
country(name: "Canada", flag: "Canada"),
country(name: "United States of America",
flag: "United States of America"),
]
// images of flags are stored in Assets.xcassets
var body: some View {
List (countries, id:.name) {(country) in
HStack {
Image(country.flag)
Text(country.name)
}
}
}
NavigationView View
NavigationView{
List {
ForEach(countries, id: .self) { (country) in
Text(country)
}
}
.navigationBarTitle("List of Countries")
}
NavigationLink View
NavigationView{
List {
ForEach(countries, id: .self) { (country) in
NavigationLink(destination:
Text(country)
) {
Text(country)
}
}
}
.navigationBarTitle("List of Countries")
}
Section View
List {
Section(header: Text("Section I")) {
Text("Item 1")
Text("Item 2")
}
Section(header: Text("Section II")) {
Text("Item 1")
Text("Item 2")
}
}
TabView View
struct TabView1: View {
var body: some View {
Text("TabView1")
}
}
struct TabView2: View {
var body: some View {
Text("TabView2")
}
}
struct ContentView: View {
var body: some View {
TabView {
TabView1()
.tabItem {
Image(systemName: "doc.richtext")
Text("News")
}
TabView2()
.tabItem {
Image(systemName: "info.circle")
Text("About")
}
}
}
}
Form and Section Views
Form {
Section(header: Text("Sessions")) {
Text("Hello")
Text("World")
}
Section(header: Text("About this App")) {
Text("Hello")
Text("World")
}
}
Rectangle View
Rectangle()
.fill(Color.yellow)
.frame(width: 300, height: 200)
.border(Color.black, width: 3)
RoundedRectangle View
RoundedRectangle(cornerRadius: 25, style: .circular)
.fill(Color.green)
.frame(width: 200, height: 80)
Circle View
Circle()
.fill(Color.yellow)
.frame(width: 150, height: 150)
Capsule View
Capsule()
.fill(Color.green)
.frame(width: 300, height: 100)
Ellipse View
Ellipse()
.fill(Color.yellow)
.frame(width: 200, height: 80)