How to Create a ListView with Custom Cells and Navigation Bar in SwiftUI - A Step-by-Step Tutorial with Code in 2023

Article by: Manish Methani

Last Updated: September 20, 2021 at 8:04am IST
7 min 1 sec

Final Output:

Introduction

Creating a ListView with Custom Cells is a common task in iOS app development. Custom Cells give you more control over the look and feel of the list items, allowing you to create a more tailored user experience. In this tutorial, we will create a ListView with Custom Cells containing a title, subtitle, image, and button. The ListView will be wrapped inside a Navigation Bar to give users easy access to other parts of the app.

Prerequisites

This tutorial assumes you have a basic understanding of SwiftUI and Xcode. You should also have a development environment set up and running.

Step 1: Create a Custom Cell View

The first step is to create a Custom Cell View that will display the title, subtitle, image, and button.

struct CustomCellView: View {
    let title: String
    let subtitle: String
    let image: String
    let buttonAction: () -> Void
    
    var body: some View {
        HStack {
            Image(image)
                .resizable()
                .frame(width: 50, height: 50)
                .cornerRadius(10)
            VStack(alignment: .leading) {
                Text(title)
                    .font(.headline)
                Text(subtitle)
                    .font(.subheadline)
            }
            Spacer()
            Button(action: buttonAction) {
                Text("Explore")
                    .padding(.horizontal, 10)
                    .padding(.vertical, 5)
                    .background(Color.blue)
                    .foregroundColor(Color.white)
                    .cornerRadius(5)
            }
        }
        .padding()
    }
}

In this code, we define a CustomCellView that takes in a title, subtitle, and imageName. We then create a HStack containing an Image view, a VStack containing the title and subtitle text, a Spacer to push the button to the right, and finally, a Button with an action and label.

Step 2: Create a ListView

Next, we create a ListView that will display a list of Custom Cells.

struct ListView: View {
    let items = [
        (title: "Item 1", subtitle: "Subtitle 1", image: "image1"),
        (title: "Item 2", subtitle: "Subtitle 2", image: "image2"),
        (title: "Item 3", subtitle: "Subtitle 3", image: "image3"),
        (title: "Item 4", subtitle: "Subtitle 4", image: "image4"),
        (title: "Item 5", subtitle: "Subtitle 5", image: "image1")
    ]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(items, id: .title) { item in
                    NavigationLink(destination: DetailView(title: item.title, subtitle: item.subtitle, image: item.image)) {
                        CustomCellView(title: item.title, subtitle: item.subtitle, image: item.image){
                            print("Button tapped for item: (item.title)")
                        }
                    }
                }
            }
            .navigationBarTitle("Your Past Searches")
        }.ignoresSafeArea()
    }
}

In this code, we define a ListView that contains a List. We then use a ForEach loop to loop through our items array and create a CustomCellView for each item. We wrap each `CustomCell View in a NavigationLink that links to a DetailView passing the title, subtitle, and imageName as parameters.

Step 3: Create a DetailView

The DetailView will display the details of a selected item.

struct DetailView: View {
    let title: String
    let subtitle: String
    let image: String
    @Environment(.presentationMode) var presentationMode: Binding

    var body: some View {
        VStack {
            Image(image)
                .resizable()
                .frame(width: 150, height: 150)
                .cornerRadius(20)
            Text(title)
                .font(.largeTitle)
            Text(subtitle)
                .font(.title)
            Button(action: {
                presentationMode.wrappedValue.dismiss()

            }) {
                Text("Back")
                    .padding(.horizontal, 10)
                    .padding(.vertical, 5)
                    .background(Color.blue)
                    .foregroundColor(Color.white)
                    .cornerRadius(5)
            }

        }
        .padding()
    }
}

In this code, we define a DetailView that takes in the title, subtitle, and imageName. We then create a VStack containing an Image view, a Text view for the title, a Text view for the subtitle, and a back button to push the view back to previous screen.

Step 4: Add Navigation Links to ListView

To link our ListView to our DetailView, we need to wrap our ListView in a NavigationView.

struct ContentView: View {
    var body: some View {
        NavigationView {
            ListView()
                .navigationTitle("List View")
        }
    }
}

In this code, we define a ContentView that contains a NavigationView wrapping our ListView. We also set the navigation bar title to "List View".

Step 5: Add a Navigation Bar Title

Finally, we can add a navigation bar title to our DetailView.

struct DetailView: View {
    let title: String
    let subtitle: String
    let image: String
    @Environment(.presentationMode) var presentationMode: Binding

    var body: some View {
        VStack {
            Image(image)
                .resizable()
                .frame(width: 150, height: 150)
                .cornerRadius(20)
            Text(title)
                .font(.largeTitle)
            Text(subtitle)
                .font(.title)
            Button(action: {
                presentationMode.wrappedValue.dismiss()

            }) {
                Text("Back")
                    .padding(.horizontal, 10)
                    .padding(.vertical, 5)
                    .background(Color.blue)
                    .foregroundColor(Color.white)
                    .cornerRadius(5)
            }

        }
        .padding().navigationTitle(title)
    }
}

In this code, we add a .navigationTitle modifier to our VStack to set the navigation bar title to the title of the item.

Final Output:

Frequently Asked Questions

Q: Can I use a different type of list view instead of List?

A: Yes, you can use other types of lists, such as ScrollView or LazyVStack.

Q: Can I customize the navigation bar further?

A: Yes, you can customize the navigation bar by adding modifiers such as .navigationBarColor, .navigationBarTitleDisplayMode, or .navigationBarItems.

Conclusion

In this tutorial, we created a ListView with Custom Cells containing a title, subtitle, image, and button. The ListView was wrapped inside a Navigation Bar to give users easy access to other parts of the app. We also created a DetailView to display the details of a selected item. By following the steps outlined in this tutorial, you can create your own ListView with Custom Cells and Navigation Bar in SwiftUI.

 

Simplified Coding for Beginners.








Download the Codzify
Mobile App


Mobile App Development, Web App Development, Programming Languages, Latest Tech News & lot more.

Codzify Mobile App

A self-paced learning Courses Created by an Engineer
For Engineers.

Premium

The Complete Angular Course

Instructor: Manish Methani

Explore Curriculum
Free

C Programming for Absolute Beginners

Instructor: Manish Methani

Start Watching
Premium

Flutter Mobile App Development Course

Instructor: Manish Methani

Explore Curriculum
Free

Learn HTML, CSS & Bootstrap

Instructor: Manish Methani

Start Watching

Test your skills with these expert-led curated
Mock Tests.

C Programming Test

Test your C Programming skills with this comprehensive mock test on C Programming.

Take Test

Flutter Test

Solve most asked Interview Questions on Flutter and Test your foundational skills in flutter.

Take Test

GATE(CSE) Operating Systems

Solve most asked GATE Questions in Operating Systems and test your Gate Score.

Take Test

HTML,CSS Test

This is a mock test designed to help you assess your knowledge and skills in HTML and CSS.

Take Test

(GATE CSE) Data Structures & Algorithms Test

Solve most asked GATE Questions in Data Structures and Algorithms and test your Gate Score.

Take Test
include_once 'codzify-footer.php'; ?>