SwiftUI is a revolutionary framework that lets you build beautiful and responsive user interfaces for iOS apps with less code and more declarative syntax. SwiftUI is not only easy to learn, but also fun to use. In this article, I will show you how to get started with SwiftUI and create a simple app that displays a list of movies.
Photo by Alexander Shatov on Unsplash
What is SwiftUI?
SwiftUI is a modern way to declare user interfaces for any Apple platform. It allows you to create views by composing simple components that automatically adapt to different screen sizes, orientations, and devices. SwiftUI also provides powerful tools for managing app state and data flow, as well as integrating with platform-specific features and frameworks.
SwiftUI is based on Swift, Apple’s programming language that is fast, expressive, and safe. Swift supports multiple paradigms, such as object-oriented, functional, and protocol-oriented programming. Swift also has features like generics, optionals, closures, and extensions that make it easy to write concise and elegant code.
SwiftUI is designed to work seamlessly with Xcode, Apple’s integrated development environment (IDE) that provides everything you need to develop, test, debug, and deploy your apps. Xcode has a built-in preview feature that lets you see your SwiftUI views in real time as you code. You can also use live reloading and interactive editing to experiment with your UI without running the app on a simulator or device.
How to Learn SwiftUI?
The best way to learn SwiftUI is by following the official tutorials from Apple Developer Documentation. These tutorials will guide you through the basics of SwiftUI, such as creating and combining views, building lists and navigation, handling user input, drawing shapes and animations, working with UI controls, interfacing with UIKit, and creating apps for watchOS and macOS.
You can find the tutorials here: 1
You can also explore the SwiftUI concepts articles that explain the principles and techniques of building multiplatform apps with SwiftUI. These articles cover topics such as app structure, view layout, state and data flow, custom input controls, source of truth, and more.
You can find the articles here: 2
Another great resource for learning SwiftUI is the documentation page that provides detailed information about the SwiftUI API. You can browse and search for various types of views, modifiers, protocols, functions, properties, and enums that make up the SwiftUI framework. You can also see examples of how to use them in your code.
You can find the documentation here: 3
How to Create a Simple SwiftUI App?
To demonstrate how easy it is to create a SwiftUI app, I will show you how to build a simple app that displays a list of movies. The app will have two screens: a main screen that shows a list of movies with their titles and posters, and a detail screen that shows more information about a selected movie.
To create this app, you will need Xcode 13.1 or later installed on your Mac. You can download Xcode from the Mac App Store or from here:
Step 1: Create a New Project
Open Xcode and choose File > New > Project. Select iOS > App from the template chooser and click Next. Enter “MovieList” as the product name, “com.example” as the organization identifier, “SwiftUI” as the interface, “Swift” as the language, and “No” as the core data option. Click Next and choose a location to save your project.
Step 2: Add Some Movie Data
Photo by charlesdeluvio on Unsplash
To display some movies in our app, we need some data to work with. For simplicity, we will use an array of structs that represent movies. Each movie struct has four properties: id (a unique identifier), title (the name of the movie), poster (the name of an image file that shows the movie poster), and overview (a short description of the movie plot).
To create this array of structs, open MovieListApp.swift file in the project navigator (the left pane) and add the following code below the import statement:
// A struct that represents a movie
struct Movie: Identifiable {
var id: Int
var title: String
var poster: String
var overview: String
}
// An array of sample movies
let movies \= [
Movie(id: 1,
title: "Dune",
poster: "dune",
overview: "Paul Atreides leads nomadic tribes in a battle to control the desert planet Arrakis."),
Movie(id: 2,
title: "No Time
Step 3: Create a List View
To display the movies in a list view, we need to use the List view type. List is a container that presents rows of data arranged in a single column. List is a performant alternative to ScrollView in terms of memory and performance. It is UIKit’s UITableView equivalent in SwiftUI.
To create a list view, we need to pass our movies array as the data source and provide a closure that returns a view for each movie. We can use the Text view to show the movie title for now.
Open ContentView.swift file and replace the default Text view with the following code:
List(movies) { movie in
Text(movie.title)
}
You should see something like this in the preview:
You can also use the .listStyle modifier to change the appearance of the list view. SwiftUI supports five different styles: .automatic, .grouped, .inset, .insetGrouped, .plain, and .sidebar. The default style is .automatic, which means SwiftUI will choose the appropriate style for the context.
For example, you can use the .grouped style to make the list view look like this:
List(movies) { movie in
Text(movie.title)
}
.listStyle(.grouped)
You can find more information about list styles here: 1
Step 4: Create a Custom Row View
To make our list view more attractive, we can create a custom row view that shows both the movie title and poster. To do this, we need to create a new SwiftUI view file and name it MovieRow.swift.
In MovieRow.swift file, replace the default code with the following:
import SwiftUI
struct MovieRow: View {
var movie: Movie
var body: some View {
HStack {
Image(movie.poster)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
Text(movie.title)
.font(.title2)
.fontWeight(.bold)
Spacer()
}
}
}
struct MovieRow_Previews: PreviewProvider {
static var previews: some View {
MovieRow(movie: movies[0])
}
}
This code defines a MovieRow view that takes a movie as a parameter and displays its poster and title in a horizontal stack. We use the Image view to load the poster image from the asset catalog and resize it to fit a fixed width. We also use the Text view to show the title with a custom font and weight. We add a Spacer view to push the content to the left.
You should see something like this in the preview:
To use this custom row view in our list view, we need to replace the Text view with MovieRow(movie: movie) in ContentView.swift file:
List(movies) { movie in
MovieRow(movie: movie)
}
.listStyle(.grouped)
You should see something like this in the preview:
Step 5: Create a Detail View
To show more information about a selected movie, we need to create a detail view that displays its overview and poster. To do this, we need to create another SwiftUI view file and name it MovieDetail.swift.
In MovieDetail.swift file, replace the default code with the following:
import SwiftUI
struct MovieDetail: View {
var movie: Movie
var body: some View {
VStack {
Image(movie.poster)
.resizable()
.aspectRatio(contentMode: .fit)
Text(movie.overview)
.font(.body)
.padding()
Spacer()
}
.navigationTitle(movie.title)
}
}
struct MovieDetail_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
MovieDetail(movie: movies[0])
}
}
}
This code defines a MovieDetail view that takes a movie as a parameter and displays its poster and overview in a vertical stack. We use the same Image view as before to load and resize the poster image. We also use another Text view to show the overview with acustom font and padding. We add a Spacer view to fill the remaining space. We also use the .navigationTitle modifier to set the title of the navigation bar to the movie title.
You should see something like this in the preview:
Step 6: Add Navigation
To navigate from the list view to the detail view, we need to use the NavigationView and NavigationLink views. NavigationView is a container that manages a stack of views and displays them with a navigation bar. NavigationLink is a view that triggers a navigation to another view when activated.
To use these views, we need to wrap our list view in a NavigationView and wrap each MovieRow view in a NavigationLink. We also need to pass the movie object to the destination view, which is MovieDetail.
Open ContentView.swift file and modify the code as follows:
NavigationView {
List(movies) { movie in
NavigationLink(destination: MovieDetail(movie: movie)) {
MovieRow(movie: movie)
}
}
.listStyle(.grouped)
.navigationTitle("Movies")
}
This code adds a navigation title to the list view and makes each row clickable. When you click on a row, it will push the detail view to the navigation stack and show it with a back button.
You should see something like this in the preview:
Step 7: Run the App
You have successfully created a simple SwiftUI app that displays a list of movies and their details. To run the app on a simulator or device, click on the play button on the top left corner of Xcode. You should see something like this:
Congratulations! You have learned how to use SwiftUI to create beautiful and responsive user interfaces for iOS apps.
References
: Introducing SwiftUI | Apple Developer Documentation : Learning SwiftUI | Apple Developer Documentation : SwiftUI | Apple Developer Documentation : SwiftUI List Style examples | Sarunw