A step by step walkthrough of some key features

Ashok Kumar
Aug 27 · 3 min read

If you’re new to SwiftUI SwiftUI — Quick Start Guide is a helpful resource.


Topics Covered

Generic structure: List, NavigationView , NavigationLink , VStack , Image , Text , EnvironmentObject


List

A container that presents rows of data arranged in a single column.

Declaration

struct ContentView: View {
var body: some View {
List{

}
}
}

NavigationView

A view for presenting a stack of views representing a visible path in a navigation hierarchy.

Declaration

struct ContentView: View {
var body: some View {
NavigationView{
List{

}
}
}
}

Note: List will locate inside the NavigationView.


Let’s Start!

Step 1

Initially, ContentView.swift will be like this:

Step 2

Add list:

Step 3

Create struct to load data into the list:

struct Movies: Identifiable{
var id = UUID()
var name = String()
var image = String()
}

Step 4

Inside the ContentView, create a variable called movies of type ‘Movies’.

let movies: [Movies] = [
Movies(name: "The Lion King (2019)", image: "1"),
Movies(name: "Aladdin (2019)", image: "2"),
Movies(name: "The Avengers : End game (2019)", image: "3")]

Add VStack which holds image and name vertically and align it to leading.

VStack(alignment: .leading){
Image(movie.image)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
Text(movie.name)
.font(.system(size: 15))
}

The result will be like this:

Step 5

Create struct called ‘DetailsView.swift’ that holds movie’s fullView image

Step 6

On ContentView.swift, add NavigationView and NavigationLink.

Now our Struct ContentView will look like this:

struct ContentView: View {

let movies: [Movies] = [
Movies(name: "The Lion King (2019)", image: "1"),
Movies(name: "Aladdin (2019)", image: "2"),
Movies(name: "The Avengers : End game (2019)", image: "3")]

var body: some View {
NavigationView {
List(movies) { movie in
NavigationLink(destination: DetailsView(index: movie.image)) {
VStack(alignment: .leading){
Image(movie.image)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
Text(movie.name)
.font(.system(size: 15))
}
}
}
.navigationBarTitle(Text("Movies").foregroundColor(Color.black))
}
}
}

Note: NavigationView holds List and List holds NavigationLink.

Step 7

On DetailsView.Swift, add custom Navigation Back button in NavigationBarItems. Create Binding presentation Mode property to dismiss my DetailsView when is navigation back button tapped.

Now our Struct DetailsView will look like this:

struct DetailsView: View {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var index: String
var body: some View {
NavigationView(){
Image("A\(index)")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)
}
.navigationBarItems(leading: Button(action: {
self.presentationMode.wrappedValue.dismiss()
}, label: { Image("back").foregroundColor(Color.white)}))
}

}

That's it — run your project!

GitHub

Better Programming

Advice for programmers.

Ashok Kumar

Written by

 iOS Developer @nfnlabs, Chennai. Here to share best practices learned through my experience. Reach me on https://www.linkedin.com/in/ashokkumar-b-26026913a/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade