When it comes to designing applications for iOS, ensuring your application feels modern and engaging is paramount. With the recent advancements in SwiftUI available in iOS 16 and later, developers have even more tools at their disposal to elevate the visual appeal of their apps. In today’s tutorial, we’ll focus on leveraging these new features to customize the background color of lists and their individual cells. Without further ado, let’s dive into the code:

import GameKit
import SwiftUI
import AVFoundation

struct ContentView: View {
    let randomNumbers: [Int] = (1...10).map { _ in Int.random(in: 1...100) }

    var evenNumbers: [Int] {
        randomNumbers.filter { $0 % 2 == 0 }
    }

    var oddNumbers: [Int] {
        randomNumbers.filter { $0 % 2 != 0 }
    }

    var body: some View {
        List {
            Section(header: Text("Even Numbers")) {
                ForEach(evenNumbers, id: \.self) { number in
                    Text("\(number)")
                }
            }.listRowBackground(Capsule()
                .fill(Color.yellow)
                .padding(2)
            )

            Section(header: Text("Odd Numbers")) {
                ForEach(oddNumbers, id: \.self) { number in
                    Text("\(number)")
                }
            }.listRowBackground(Capsule()
                .fill(Color.red)
                .padding(2)
            )
        }.scrollContentBackground(.hidden)
         .background(Color.mint.edgesIgnoringSafeArea(.all))
         .navigationBarTitle("Random Numbers")
         .listStyle(GroupedListStyle())
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Key Takeaways for iOS 16 Styling

1. Simplifying Array Creation and Filtering

The code showcases an array of random numbers between 1 to 100:

let randomNumbers: [Int] = (1...10).map { _ in Int.random(in: 1...100) }

Then, through the filter method, even and odd numbers are discerningly organized into two distinct arrays. This allows for a crisp and clear display within our list.

2. Personalized List Row Background

iOS 16’s SwiftUI introduces enhanced capabilities for customization. With the .listRowBackground() modifier, developers can now provide individual rows a distinct appearance. In this instance, the Capsule() shape filled with either yellow (for even numbers) or red (for odd numbers) is used, coupled with padding for aesthetics:

.listRowBackground(Capsule().fill(Color.yellow).padding(2))

3. Full List Background Customization

For providing a unified look to the entire list, the .background() modifier is employed. The choice of a ‘mint’ color, extended beyond safe area constraints via .edgesIgnoringSafeArea(.all), ensures a fresh, modern look:

.background(Color.mint.edgesIgnoringSafeArea(.all))

Wrapping Up

With the advancements in SwiftUI in iOS 16 and subsequent versions, developers have a broader palette of design tools. The ability to personalize lists, as we’ve explored today, isn’t just about functionality. It’s about enhancing the user’s visual journey. As the iOS platform continues to evolve, always remember to harness these tools to create more engaging and beautiful user interfaces!