SwiftUI Vertical List Section header padding in iOS 15

Question

I have a List with Sections :

    List {
        ForEach((1...3), id: \.self) { _ in
            Section(
                header: Text("My Section")
                            .font(.system(.title3))
                            .fontWeight(.bold)
                            .foregroundColor(.primary),
                content: {
                    ForEach((1...5), id: \.self) { _ in
                        Text("My Row")
                    }
                }
            )
        }
    }

Here is the result on an iPhone 8 simulator with iOS 14.5:

And here the result on an iPhone 8 simulator with iOS 15:

I want iOS15 list to be equal to iOS14.5 one. I can remove horizontal padding by adding .listStyle(PlainListStyle()) to the List but the header of the section still have different vertical padding.

Is there a way to have the same vertical header padding as iOS14.5 ?

Environment:

iOS 15 RC
XCode 13 RC

nelson PARRILLA · Answer 1 · 2021-10-26T13:32:44.177

1

Finally, what suited me the most was to add

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

In AppDelegate didFinishLaunchingWithOptions function

edited Oct 26 '21 at 13:32

answered Sep 30 '21 at 14:49

nelson PARRILLA

498
1
6
17

Is this for SwiftUI? And if yes, where do you put it? – cseh_17 Oct 19 '21 at 13:36
@cseh_17 Yes it's for SwiftUi, I put it in AppDelegate -> didFinishLaunchingWithOptions – nelson PARRILLA Oct 26 '21 at 13:32

score 1 · Answer 2 · answered Aug 02 '23 at 10:51

Tested with SwiftUIIntrospect 0.10.0 on iOS 15 and 16

Works with SwiftUI List

This modifier will remove padding for the header of UITableView on iOS 15

.introspect(.list(style: .plain), on: .iOS(.v15)) { tableView in
    tableView.sectionHeaderTopPadding = 0
}

This modifier will remove padding for the header of UICollectionView on iOS 16

.introspect(.list(style: .plain), on: .iOS(.v16)) { collectionView in
    let identifier = "ToolbarConfigured"
    guard collectionView.focusGroupIdentifier != identifier else { return }
    collectionView.focusGroupIdentifier = identifier
    
    var configuration = UICollectionLayoutListConfiguration(appearance: .plain)
    configuration.headerMode = .supplementary
    configuration.headerTopPadding = .zero
    configuration.showsSeparators = false
    configuration.backgroundColor = .clear
    let layout = UICollectionViewCompositionalLayout.list(using: configuration)
    collectionView.setCollectionViewLayout(layout, animated: false)
}

This code will remove grey background which appears under the header for both iOS 15 and iOS 16. It needs UIScrollView which both UICollectionView and UITableView conform to. Works with single header which is always presented.

.introspect(.scrollView, on: .iOS(.v15, .v16)){ scrollView in
    guard let headerBG = scrollView.subviews
        .first(where: { $0.frame.height == 220 })?
        .subviews
        .first(where: { String(describing: type(of: $0)) == "_UISystemBackgroundView" }) else { return }
    guard headerBG.alpha != 0 else { return }
    headerBG.alpha = 0
}

mahan · Accepted Answer · 2021-09-16T16:31:27.867

-1

Change list's style to GroupedListStyle using the .listStyle() modifier.

.listStyle(GroupedListStyle())

Header without gray backgrounnd

.listStyle(PlainListStyle())

More info

https://developer.apple.com/documentation/swiftui/liststyle

edited Sep 16 '21 at 16:31

answered Sep 16 '21 at 16:24

mahan

12,366
5
48
83

It answers my question thank you. But I see now that the header is not sticky, I will find another solution – nelson PARRILLA Sep 17 '21 at 11:56
@nelsonPARRILLA did you find another solution? – ShadeToD May 04 '23 at 10:17

SwiftUI Vertical List Section header padding in iOS 15

3 Answers3

More info

Linked