Awesome
SwiftUI GiSheet - The Smart - Cheatsheet to everything on SwiftUI
<img src="https://img.shields.io/badge/swiftui-cheat--sheet-green" alt="swiftui" />Table of Contents
- Resource
- UIKit equivalent in SwiftUI
- View
- Layout
- Input
- List
- Containers
- Alerts and Action Sheets
- Navigation
- Work with UIKit
Resource
- SwiftUI Tutorials (Official)
- Introducing SwiftUI: Building Your First App (Official)
- SwiftUI: Getting Started Raywenderlich
- SwiftUI Essentials (Official)
- SwiftUI - How to setup a project
- About SwiftUI
UIKit equivalent in SwiftUI
UIKit | SwiftUI |
---|---|
UILabel | Text & Label |
UIImageView | Image |
UITextField | TextField |
UITextView | TextEditor |
UISwitch | Toggle |
UISlider | Slider |
UIButton | Button |
UITableView | List |
UICollectionView | LazyVGrid / LazyHGrid |
UINavigationController | NavigationView |
UITabBarController | TabView |
UIAlertController with style .alert | Alert |
UIAlertController with style .actionSheet | ActionSheet |
UIStackView with horizontal axis | HStack / LazyHStack |
UIStackView with vertical axis | VStack / LazyVStack |
UISegmentedControl | Picker |
UIStepper | Stepper |
UIDatePicker | DatePicker |
NSAttributedString | No equivalent (use Text) |
MapKit | Map |
UIProgressView | ProgressView |
View
Text
To show a text in UI simply write:
Text("Hello World")
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To add style
Text("Hello World")
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(Color.red)
.multilineTextAlignment(.leading)
.lineLimit(1)
.padding(.bottom)
.frame(width: 400.0, height: 200.0)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To format text inside text view
static let dateFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateStyle = .long
return formatter
}()
var now = Date()
var body: some View {
Text("Task due date: \(now, formatter: Self.dateFormatter)")
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Label
Labels are a much-needed addition in the latest SwiftUI iteration. They let you set icons alongside text with the following line of code.
Label("SwiftUI CheatSheet 2.0", systemImage: "up.icloud")
It's possible to set URL, upon clicking which will redirect to browser.
Link("Click me",destination: URL(string: "your_url")!)
TextEditor
Multi-line scrollable UITextViews natively in SwiftUI
TextEditor(text: $currentText)
.onChange(of: clearText) { value in
if clearText {
currentText = ""
}
}
Map
MapKit natively in SwiftUI
Map(mapRect:interactionModes:showsUserLocation: userTrackingMode:
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
Map(coordinateRegion: $region)
Image
To show image
Image("hello_world") //image name is hello_world
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To use system icon
Image(systemName: "cloud.heavyrain.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.padding(.bottom)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 4))
.shadow(radius: 7)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
you can add style to system icon set
Image(systemName: "cloud.heavyrain.fill")
.foregroundColor(.red)
.font(.largeTitle)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Add style to Image
Image("hello_world")
.resizable() //it will sized so that it fills all the available space
.aspectRatio(contentMode: .fill)
.padding(.bottom)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Shape
To create Rectangle
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To create circle
Circle()
.fill(Color.blue)
.frame(width: 50, height: 50)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
ProgressView
To show a ProgressView
ProgressView("Text", value: 10, total: 100)
Layout
Background
To use image as a background
Text("Hello World")
.font(.largeTitle)
.background(
Image("hello_world")
.resizable()
.frame(width: 100, height: 100)
)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Gradient background
Text("Hello World")
.background(
LinearGradient(
gradient: Gradient(colors: [.white, .red, .black]),
startPoint: .leading,
endPoint: .trailing
),
cornerRadius: 0
)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
VStack
Shows child view vertically
VStack {
Text("Hello")
Text("World")
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Styling
VStack(alignment: .leading, spacing: 20) {
Text("Hello")
Divider()
Text("World")
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
HStack
Shows child view horizontally
HStack {
Text("Hello")
Text("World")
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
ZStack
To create overlapping content use ZStack
ZStack() {
Image("hello_world")
Text("Hello World")
.font(.largeTitle)
.background(Color.black)
.foregroundColor(.white)
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
LazyVStack
It loads content as and when it’s needed thus improving performance
ScrollView(.horizontal) {
LazyVStack(spacing: 10) {
ForEach(0..<1000) { index in
Text("\(index)")
.frame(width: 100, height: 200)
.border(Color.gray.opacity(0.5), width: 0.5)
.background(Color.blue)
.cornerRadius(6)
}
}
.padding(.leading, 10)
}
LazyHStack
It loads content as and when it’s needed thus improving performance
ScrollView(.horizontal) {
LazyHStack(spacing: 10) {
ForEach(0..<1000) { index in
Text("\(index)")
.frame(width: 100, height: 200)
.border(Color.gray.opacity(0.5), width: 0.5)
.background(Color.blue)
.cornerRadius(6)
}
}
.padding(.leading, 10)
}
LazyVGrid
A containers for grid-based layouts that let you set child views vertically in LazyVGrid. Each element of a SwiftUI grid is a GridItem. We can set the alignments, spacing, and size of the GridItem
struct ContentView: View {
let colors: [Color] = [.red, .green, .yellow, .blue]
var columns: [GridItem] =
Array(repeating: .init(.flexible(), alignment: .center), count: 3)
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 10) {
ForEach(0...100, id: \.self) { index in
Text("Tab \(index)")
.frame(width: 110, height: 200)
.background(colors[index % colors.count])
.cornerRadius(8)
}
}
}
}
}
LazyHGrid
A containers for grid-based layouts that let you set child views horizontally in LazyHGrid
struct ContentView: View {
let colors: [Color] = [.red, .green, .yellow, .blue]
var columns: [GridItem] =
Array(repeating: .init(.flexible(), alignment: .center), count: 3)
var body: some View {
ScrollView {
LazyHGrid(columns: columns, spacing: 10) {
ForEach(0...100, id: \.self) { index in
Text("Tab \(index)")
.frame(width: 110, height: 200)
.background(colors[index % colors.count])
.cornerRadius(8)
}
}
}
}
}
Input
Toggle
Toggle lets users move between true and false states
@State var isShowing = true //state
Toggle(isOn: $isShowing) {
Text("Hello World")
}.padding()
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Button
To create button
Button(
action: {
// do something
},
label: { Text("Click Me") }
)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To create image Button
Button(
action: {
// do something
},
label: { Image("hello_world") }
)
TextField
It heavily relies in state, simply create a state and pass it as it will bind to it
@State var fullName: String = "Joe" //create State
TextField($fullName) // passing it to bind
.textFieldStyle(.roundedBorder) // adds border
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To create secure TextField
@State var password: String = "" // create State
SecureField($password) // passing it to bind
.textFieldStyle(.roundedBorder) // adds border
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Slider
@State var value: Double = 0 // create State
Slider(value: $value, from: -100, through: 100, by: 1)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Date Picker
@State var selectedDate = Date()
DatePicker(
$selectedDate,
maximumDate: Date(),
displayedComponents: .date
)
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Picker
@State var favoriteColor = 0
var colors = ["Red", "Green", "Blue"]
Picker("Favorite Color", selection: $favoriteColor) {
ForEach(0 ..< colors.count) { index in
Text(self.colors[index])
.tag(index)
}
}
.pickerStyle(SegmentedPickerStyle())
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Stepper
@State var count:Int = 0
Stepper(
onIncrement: { self.count += 1 },
onDecrement: { self.count -= 1 },
label: { Text("Count is \(count)") }
)
or
@State var count:Int = 0
Stepper(value: $count, in: 1...10) {
Text("Count is \(count)")
}
or
@State private var temperature = 0.0
Stepper(value: $temperature, in: 0...100.0, step: 0.5) {
Text("Temperature is \(temperature, specifier:"%g")")
}
Tap
For single tap
Text("Tap me!")
.onTapGesture {
print("Tapped!")
}
For double tap
Text("Tap me!")
.onTapGesture(count: 2) {
print("Tapped!")
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Gesture
Gesture like TapGesture, LongPressGesture, DragGesture
Text("Tap")
.gesture(
TapGesture()
.onEnded { _ in
// do something
}
)
Text("Drag Me")
.gesture(
DragGesture(minimumDistance: 50)
.onEnded { _ in
// do something
}
)
Text("Long Press")
.gesture(
LongPressGesture(minimumDuration: 2)
.onEnded { _ in
// do something
}
)
OnChange
onChange is a new view modifier that’s available across all SwiftUI views. It lets you listen to state changes and perform actions on a view accordingly.
TextEditor(text: $currentText)
.onChange(of: clearText) { value in
if clearText{
currentText = ""
}
}
List
To create static scrollable List
List {
Text("Hello world")
Text("Hello world")
Text("Hello world")
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To create dynamic List
let names = ["Thanos", "Iron man", "Ant man"]
List(names, id: \.self) { name in
Text(name)
}
To add section
List {
Section(header: Text("Good Hero")) {
Text("Thanos")
}
Section(header: Text("Bad Heros")) {
Text("Iron man")
}
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To make it grouped add .listStyle(GroupedListStyle())
List {
Section(header: Text("Good Hero")) {
Text("Thanos")
}
Section(header: Text("Bad Heros")) {
Text("Iron man")
}
}.listStyle(GroupedListStyle())
<details><summary>Screenshot</summary>
<p>
</p>
</details>
To add a footer to a section
List {
Section(header: Text("Good Heros"), footer: Text("Powerful")){
Text("Thanos")
}
Section(header: Text("Bad Heros"), footer: Text("Not as Powerful")){
Text("Iron Man")
}
}.listStyle(GroupedListStyle())
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Containers
NavigationView
NavigationView is more/less like UINavigationController, It handles navigation between views, shows title, places navigation bar on top.
NavigationView {
Text("Hello")
.navigationBarTitle(Text("World"), displayMode: .inline)
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
For large title use .large
Add bar items to NavigationView
NavigationView {
Text("Hello")
.navigationBarTitle(Text("World"), displayMode: .inline)
.navigationBarItems(
trailing:
Button(
action: { print("Going to Setting") },
label: { Text("Setting") }
)
)
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
TabView
TabView creates a container similar to UITabBarController with radio-style selection control which determines which View
is presented.
@State private var selection = 0
TabView(selection: $selection) {
Text("View A")
.font(.title)
.tabItemLabel(Text("View A")
.font(.caption))
.tag(0)
Text("View B")
.font(.title)
.tabItemLabel(Text("View B")
.font(.caption))
.tag(1)
Text("View C")
.font(.title)
.tabItemLabel(Text("View C")
.font(.caption))
.tag(2)
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Group
Group creates several views to act as one, also to avoid Stack's 10 View maximum limit.
VStack {
Group {
Text("Hello")
Text("Hello")
Text("Hello")
}
Group {
Text("Hello")
Text("Hello")
}
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Alerts and Action Sheets
To Show an Alert
Alert(
title: Text("Title"),
message: Text("message"),
dismissButton: .default(Text("Ok!"))
)
To Show Action Sheet
ActionSheet(
title: Text("Title"),
message: Text("Message"),
buttons: [
.default(Text("Ok!"), action: { print("hello") })
]
)
Navigation
Navigate via NavigationLink
NavigationView {
NavigationLink(destination: SecondView()) {
Text("Show")
}.navigationBarTitle(Text("First View"))
}
<details><summary>Screenshot</summary>
<p>
</p>
</details>
Navigate via tap on List Item
let names = ["Thanos", "Iron man", "Ant man"]
List(names, id: \.self) { name in
NavigationLink(destination: HeroView(name: name)) {
Text(name)
}
}
Work with UIKit
Navigate to ViewController
It's possible to work with UIKit components from SwiftUI or call SwiftUI views as View Controllers from UIKit.
Let's say you have a View Controller named SuperVillainViewController and want to call it from a SwiftUI view, to do that ViewController needs to implement UIViewControllerRepresentable:
struct SuperVillainViewController: UIViewControllerRepresentable {
var controllers: [UIViewController]
func makeUIViewcontroller(context: Context) -> SuperVillainViewController {
// you could have a custom constructor here, I'm just keeping it simple
let vc = SuperVillainViewController()
return vc
}
}
Now you can use it like
NavigationLink(destination: SuperVillainViewController()) {
Text("Click")
}
Use UIKit and SwiftUI Views Together
To use UIView subclasses from within SwiftUI, you wrap the other view in a SwiftUI view that conforms to the UIViewRepresentable protocol. (Reference)
as example
import SwiftUI
import MapKit
struct MapView: UIViewRepresentable {
func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
}
func updateUIView(_ view: MKMapView, context: Context) {
let coordinate = CLLocationCoordinate2D(
latitude: 34.011286,
longitude: -116.166868
)
let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
let region = MKCoordinateRegion(center: coordinate, span: span)
view.setRegion(region, animated: true)
}
}
struct MapView_Preview: PreviewProvider {
static var previews: some View {
MapView()
}
}
Thank you for all the people who starred this repo!!