UICollectionLayoutListConfiguration

ViewController.swift

import UIKit
import SwiftUI

final class ViewController: UIViewController, UICollectionViewDataSource {
    private lazy var collectionView: UICollectionView = {
        var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        configuration.separatorConfiguration.bottomSeparatorInsets = .init(top: 0, leading: 100, bottom: 0, trailing: 0)
        let layout = UICollectionViewCompositionalLayout.list(using: configuration)
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.backgroundColor = .systemGroupedBackground
        collectionView.dataSource = self
        return collectionView
    }()

    private let registration = UICollectionView.CellRegistration { cell, path, item in
        cell.backgroundView = UIView()
        cell.backgroundView?.backgroundColor = .secondarySystemGroupedBackground
        cell.contentConfiguration = UIHostingConfiguration {
            Row(item: item)
        }
    }

    override func loadView() {
        view = collectionView
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        Item.items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        collectionView.dequeueConfiguredReusableCell(using: registration, for: indexPath, item: Item.items[indexPath.row])
    }
}

struct Row: View {
    var item: Item

    var body: some View {
        HStack(alignment: .top) {
            Image(systemName: item.icon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 30, height: 30)
                .padding()
                .background(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(.red.secondary, lineWidth: 1)
                )
                .foregroundStyle(.red)
                .padding(.top)

            VStack(alignment: .leading) {
                Text(item.name)
                    .font(.headline)
                Text(item.brand)
                    .font(.subheadline)
            }
            .padding()

            Spacer()

            VStack(alignment: .leading) {
                Spacer()
                Text("$\(item.price)")
                    .font(.headline)
                    .foregroundStyle(.secondary)
                Spacer()
            }
        }
    }
}

struct Item: Identifiable {
    var id = UUID()
    var name: String
    var brand: String
    var price: Int
    var icon: String

    static var items = [
        Item(name: "iPhone", brand: "Apple", price: 999, icon: "iphone"),
        Item(name: "iPad", brand: "Apple", price: 799, icon: "ipad"),
        Item(name: "MacBook Pro", brand: "Apple", price: 2399, icon: "laptopcomputer"),
        Item(name: "iMac", brand: "Apple", price: 1299, icon: "desktopcomputer"),
        Item(name: "Apple Watch", brand: "Apple", price: 399, icon: "applewatch"),
        Item(name: "AirPods", brand: "Apple", price: 199, icon: "airpods"),
        Item(name: "Apple TV", brand: "Apple", price: 179, icon: "appletv"),
        Item(name: "HomePod", brand: "Apple", price: 299, icon: "homepod"),
        Item(name: "Mac Mini", brand: "Apple", price: 699, icon: "macmini"),
        Item(name: "Mac Pro", brand: "Apple", price: 5999, icon: "macpro.gen3"),
        Item(name: "Vision Pro", brand: "Apple", price: 3499, icon: "visionpro"),
        Item(name: "Apple Pencil", brand: "Apple", price: 129, icon: "pencil"),
        Item(name: "AirTag", brand: "Apple", price: 29, icon: "airtag"),
        Item(name: "iPod Touch", brand: "Apple", price: 199, icon: "ipod")
    ]
}

#Preview("ContentView") {
    NavigationView {
        List(Item.items) { item in
            Row(item: item)
        }
        .navigationBarTitle("Products")
    }
}

#Preview("ViewController") {
    let controller = ViewController()
    controller.navigationItem.title = "Products"
    let navigation = UINavigationController(rootViewController: controller)
    navigation.navigationBar.prefersLargeTitles = true
    return navigation
}