How do I add a Background Image behind a NavigatinLink

Question

Created Sep ’22

Replies 1

Boosts 0

Views 1.1k

Participants 2

I'm reletivly new to SwiftUI, so this might be a simple solution. I would like to have a Background Image behind a NavigatinLink but I can't seem to get the image to show. I looked everywhere on how to do this. I was able to briefly get it working using GeometryReader. However, when Xcode 14 was released it no longer was working and now I'm back to square one. I can't seem to find solution. Any help would be great, Thanks.

Before Xcode Update:

After Xcode Update (Background Missing)


        

        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]

        

        UITableView.appearance().backgroundColor = .clear

                UITableViewCell.appearance().backgroundColor = .black

                UITableView.appearance().tableFooterView = UIView()    }

    

    var categories: [Category] = CategoryList.Ten

    

    var body: some View {

    NavigationView {

        VStack {

            VStack(alignment: .leading, spacing: -15) {

            List(categories, id: \.id) { category in

                NavigationLink(destination: CategoriesDetailView(category: category), label: {

                Text(category.title)

                    .fontWeight(.light)

                    .lineLimit(2)

                    .listRowBackground(Color.black)

                    .minimumScaleFactor(0.5)

                    .frame(maxWidth: 1000, minHeight: 0, alignment: .topLeading)

                    .padding(.vertical, 0)

                

                    

                }

                               

                )

                .listRowBackground(Color.black)

                .listRowSeparatorTint(.white)

                .foregroundColor(.white)

            }

                ZStack {

                    VStack {}

                .navigationTitle("Categories")

                .foregroundColor(.white)

                }

            

        }

               .background(

                GeometryReader { geo in

                          Image("Catagories-1")

                        .resizable()

                        .aspectRatio(geo.size, contentMode: .fill)

                        .edgesIgnoringSafeArea(.all)

                        .padding(.vertical, 10)

                  }



        )

        }

    }.accentColor(.white)

    }

struct CategoriesListView_Previews: PreviewProvider {

    static var previews: some View {

        CategoriesListView()

            

    }

}

}

Answered by BabyJ in 730051022

I'm assuming you mean change the List background to a custom image, since you are already changing the NavigationLink background with this:

.listRowBackground(Color.black)

In iOS 16, List no longer relies on UITableView, so your appearance proxy workarounds won't work. Instead, a new modifier, scrollContentBackground(_:), was introduced to remove the default background of a List and let you customise it with whatever view you wanted.

You would use it like this:

List(...) {
    ...
}
.scrollContentBackground(.hidden) // new in iOS 16
.background {
    Image("ImageName")
        .resizable()
        .scaledToFill()
}

Boost

Answer 1

BabyJ OP

Sep ’22

Accepted Answer

I'm assuming you mean change the List background to a custom image, since you are already changing the NavigationLink background with this:

.listRowBackground(Color.black)

In iOS 16, List no longer relies on UITableView, so your appearance proxy workarounds won't work. Instead, a new modifier, scrollContentBackground(_:), was introduced to remove the default background of a List and let you customise it with whatever view you wanted.

You would use it like this:

List(...) {
    ...
}
.scrollContentBackground(.hidden) // new in iOS 16
.background {
    Image("ImageName")
        .resizable()
        .scaledToFill()
}

0