CODEWITHSUNDEEP
iosswiftuiswiftui-list
alionthego
alionthego

Reputation: 9773

How to remove extra top padding in InsetGroupedListStyle List under iOS 15?

I have an InsetGroupedListStyle List in SwiftUI and noticed an extra top padding added in iOS 15. How can I control or remove this?

List {
    Section(header: Text("Header")) {
        // some content
    }
}
.listStyle(InsetGroupedListStyle())

Here is iOS 14:

enter image description here

and iOS 15:

enter image description here

Upvotes: 11

Views: 7694

Answers (3)

Phelippe Amorim
Phelippe Amorim

Reputation: 179

I'm late in the answering, but after spending almost a week to solve this issue I found a solution that solve my problem...

First, you need to add SwiftUIIntrospect to your project

List {
    Text("Item before section #0")
    ForEach(0..<10) { section in
        Section {
            ForEach(0..<6) { row in
                Text("Item #\(section)-#\(row)")
            }
        } header: {
            HStack {
                Text("Section #\(section)")
                    .foregroundColor(.black)
                Spacer()
            }
            .padding([.horizontal], 16)
            .frame(height: 40.0)
            .background(Color.cyan)
            .listRowInsets(.zero)
        }
    }
}
.listStyle(.plain)
.introspect(.list, on: .iOS(.v15)) { tableView in
    let identifier = "TableViewConfigured"
    guard tableView.focusGroupIdentifier != identifier else {
        return
    }
    tableView.focusGroupIdentifier = identifier

    tableView.sectionHeaderTopPadding = 0
}
.introspect(.list(style: .plain), on: .iOS(.v16, .v17)) { collectionView in
    let identifier = "CollectionViewConfigured"
    guard
        collectionView.focusGroupIdentifier != identifier,
        let collectionViewLayout = collectionView.collectionViewLayout as? UICollectionViewCompositionalLayout else {
        return
    }
    collectionView.focusGroupIdentifier = identifier

    let configuration = collectionViewLayout.configuration

    configuration.interSectionSpacing = -22

    collectionViewLayout.configuration = configuration
    collectionView.setCollectionViewLayout(collectionViewLayout, animated: false)
}

PS: On iOS 16 or 17, if the first element of your list is a section, it will still have the issue. In my case, it's not a problem because I have a cell without a section before the first section...

Result: enter image description here

Upvotes: 0

user16930239
user16930239

Reputation: 9808

For fixing this problem you can use the headerProminence

Section("Header") {
  // some content
}
.headerProminence(.increased)

iOS 15 vs 14

To fix the problem with table view

if #available(iOS 15.0, *)
    UITableView.appearance().sectionHeaderTopPadding = 0;

UPDATED: I think I found the solution for this specific case:

tableView.tableHeaderView = .init(frame: .init(x: 0, y: 0, width: 0, height: CGFloat.leastNonzeroMagnitude))

Upvotes: 7

yawnobleix
yawnobleix

Reputation: 1342

I had a similarly frustrating issue, doing this helped me

List {
    Section(header: Text("Header")) {
        // some content
    }
}
.listStyle(PlainListStyle())

Note this changed the colours of my headers

Upvotes: 6

Related Questions